JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍
1、下载jquery的函数包
2、强函数包添加到工程的web-root目录下
3、在jsp文件中加载js文件
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
</script>
案例一：在文档加载完成后显示对话框
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js"> </script>
<script type="text/javascript">
$(function(){
alert("hello");
})
</script>
<body>
This is my JSP page. <br>
</body>
</html>
$(）中传人了一个function函数，在函数中显示一个字符，
$(function(){...})这是JQUERY的内置函数，表示网页加载完毕后要执行的意思，和JAVASCRIPT原来的这个是一样的：
window.onload=function(){ //执行函数} 相当于 $(document).ready(function(){ } )
或者：
<body onload="XXX">
也是一个意思。
2、jquery的查找元素
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js"> </script>
<script type="text/javascript">
$(function(){
var ele = $("#myDiv");//返回一个jquery对象
alert(ele.text());//打印该元素的文本内容
var ele2 = $("#myNote");//返回一个jquery对象
alert(ele2.html());//打印该元素的html内容 })
</script>
<body>
This is my JSP page. <br>
<div id="myDiv">abd</div>
<div id="myNote"><p>dec</p></div>
</body>
</html>
输出的结果是：adb 和<p>dec</p>
如果将
ele2.html()写成
ele2.text()
输出的结果就是输出的结果是：adb 和dec
$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> </head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js"> </script>
<script type="text/javascript">
$(function(){
var ele = $("div");//返回一个jquery对象,获得元素div
alert(ele.length);//输出的结果是2 })
</script>
<body>
This is my JSP page. <br>
<div id="myDiv">abd</div>
<div id="myNote"><p>dec</p></div>
</body>
</html>
$("div") 选择所有的div标签元素，返回div元素数组
2、jquey的类选择器
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> </head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js"> </script>
<script type="text/javascript">
$(function(){
var ele = $(".myclass");//返回一个jquery对象,获得myclass元素
ele.text("");//将该元素的文件值设置成4414144 })
</script>
<body>
This is my JSP page. <br>
<div class="myclass"></div>
</body>
</html>
$(".myClass") 选择使用myClass类的css的所有元素
ele.text（）获得文本值
ele.text（“42442”）设置文本值 4、jquery的属性选择器
用户名:<input type="text" name="name"></input>
密码:<input type="text" name="age"></input>
这里有两个name的属性，我们如何通过属性来获得对应的值了：
$("[name]").length
这里就是获得属性是name的jquery对象的值，这里是2
如何写成$("[name=age]").length这里的值就是1
$("[name=age]").val()这里是获得输入文本框中的值
$("[name=age]").val("jkjk")这里是这种输入文本框中的值
val是主要是用于input中获得和设置文本框中的值
总结：#表示id选择权
.点表示类选择权
没有#和.就表示元素选择器
获得select对象当前被选中的select对象的文本值
这里获得的文本值就是什么是小学
表单选择器：
我们来看下面这样的一个列子：
<form id="form1" actio="#">
<input type="text" />
<input type="password" />
<input type="submit" />
<input type="reset" />
</form>
表单选择器的用法：
$(‘#form1 :input’) 可以选取表单内表单元素的个数
$(‘#form1 :text’) 可以选取表单内单行文本框的个数
$(‘#form1 :passowrd’) 可以选取表单内密码框的个数
列子2：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> </head>
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js"> </script>
<script type="text/javascript">
$(function(){ var id = $(":input[name=age]").attr("id");
alert(id);
})
</script>
<body>
This is my JSP page. <br>
用户名:<input type="text" name="name" ></input>
密码:<input type="text" name="age" id="kebi"></input>
</body>
</html>
$(":input[name=age]").attr("id");首先获得表单中的input元素，执行input中属性是name，属性的值是age的id的值是多少
输出的结果就是kebi
$(":input[name=age]").attr("id"，“klsdk”)这里是设置id的值是
klsdk
$(":input[name=age]").attr("value"，“25252525”)
首先获得表单中的input元素，执行input中属性是name，将name属性的值是age 的文本框的值设置为
25252525
我们来看下面程序的代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src=" ${pageContext.request.contextPath}/jquery-1.5.1.js">
</script>
<script type="text/javascript">
$(function(){ $("button").click(function(){
$("p:first").removeClass("intro").addClass('main');
}); })
</script>
<!-- 类KEBI --> <style type="text/css">
.intro
{
font-size:120%;
color:red;
}
.main
{
font-size:90%;
color:blue;
}
</style> </head> <body>
<h1>This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>改变第一个段落的类</button>
</body>
</html>
案例2：
事件：
fn表示函数的参数是function函数
我们来看下程序的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
});
</script>
</head>
<body> <p>鼠标移动到该段落。</p> </body>
</html>
JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍的更多相关文章
- JavaWeb网上图书商城完整项目--12.项目所需jquery函数介绍之ajax
jquery中使用ajax发送异步请求 下面的一个案例在input输入框失去焦点的时候发送一个异步的请求: 我们来看程序的案例: 这里要强调的是返回值最好选择是json,json对应的就是对象,Jav ...
- JavaWeb网上图书商城完整项目--13.项目所需环境的搭建
1.首先安装mysql 创建项目所需的数据库,直接运行项目提供的goods.sql文库 2.myeclipse创建一个web project ,项目的名称是goods 把视频中提供的项目原型下的提供的 ...
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
- JavaWeb网上图书商城完整项目--过滤器解决中文乱码
我们知道,如果是POST请求,我们需要调用request.setCharacterEncoding(“utf-8”)方法来设计编码:如果是GET请求,我们需要自己手动来处理编码问题.如果我们使用了En ...
- JavaWeb网上图书商城完整项目--day03-1.图书模块功能介绍及相关类创建
1 前两天我们学习了user用户模块和图书的分类模块,接下来我们学习图书模块 图书模块的功能主要是下面的功能: 2 接下来我们创建对应的包 我们来看看对应的数据库表t_book CREATE TABL ...
- JavaWeb网上图书商城完整项目--BaseServlet
1.以前进行操作的时候,例如我们进行登陆操作我们使用LoginServlet进行处理,进行注册操作我们使用RegisterServlet,很多业务的操作的时候我们就要定义很多个Servlet 有了Ba ...
- JavaWeb网上图书商城完整项目--day02-21.退出功能的实现
1.当用户点击退出的时候,跳转到登陆页面 当用户点击退出的时候,需要将session中保存的登陆的用户销毁掉 当用户点击退出的时候,调用UserServlet的quit方法 退出按钮在top.jsp中 ...
- JavaWeb网上图书商城完整项目--day02-17.登录功能页面实现
1.当在登陆页面点击登陆按钮的时候,会调用UserServlet的login方法,我们要在login.jsp中进行配置 2.要在login.jsp中处理Servlet在后台业务操作之后forward到 ...
随机推荐
- Python实现批量MD5加密
#!/usr/bin/python # -*- coding: utf-8 -*- import hashlib def md5(str): hl = hashlib.md5() hl.update( ...
- Rocket - debug - TLDebugModuleInner - Hart Bus Access
https://mp.weixin.qq.com/s/deNMEyJ1idJDVoZwwo0A1A 简单介绍TLDebugModuleInner中核心总线访问(Hart Bus Access). 参考 ...
- 使用ADMT和PES实现window AD账户跨域迁移-介绍篇
使用 ADMT 和 pwdmig 实现 window AD 账户跨域迁移系列: 介绍篇 ADMT 安装 PES 的安装 ADMT:迁移组 ADMT:迁移用户 ADMT:计算机迁移 ADMT:报告生成 ...
- Java实现 洛谷 P3916 图的遍历（反向DFS+记忆化搜索）
P3916 图的遍历 输入输出样例 输入 4 3 1 2 2 4 4 3 输出 4 4 3 4 import java.io.BufferedReader; import java.io.IOExce ...
- Java实现 LeetCode 468 验证IP地址
468. 验证IP地址 编写一个函数来验证输入的字符串是否是有效的 IPv4 或 IPv6 地址. IPv4 地址由十进制数和点来表示,每个地址包含4个十进制数,其范围为 0 - 255, 用(&qu ...
- Java实现 LeetCode 153 寻找旋转排序数组中的最小值
153. 寻找旋转排序数组中的最小值 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 请找出其中 ...
- Java实现 LeetCode 140 单词拆分II
class Solution { public List<String> wordBreak(String s, List<String> wordDict) { List&l ...
- java实现整数翻转
** 整数翻转** 以下程序把一个整数翻转(8765变为:5678),请补充缺少的代码. int n = 8765; int m = 0; while(n>0) { m = __________ ...
- 一、kafka 介绍 && kafka-client
一.kafka 介绍 1.1.kafka 介绍 Kafka 是一个分布式消息引擎与流处理平台,经常用做企业的消息总线.实时数据管道,有的还把它当做存储系统来使用. 早期 Kafka 的定位是一个高吞吐 ...
- [RH134] 12-系统启动
1.系统启动流程 开机--->BIOS自检(需要检测的设备是否正常)--->磁盘的MBR分区--->BootLoader(引导加载器)加载内核--->识别各分区的文件系统 2. ...