一、jquery简介
jQuery是使用JavaScript语言编写的函数库。它提供如下主要功能：
- 方便修改节点内容及显示样式
- 方便处理用户操作事件
- 方便为页面添加动态效果；如淡入淡出
- 更便捷的AJAX应用接口
jQuery库有development和production版的区别。要使用jQuery，需在HTML页面中使用<script>进行导入。
<body>
<script>
方法一：
$(document).ready(function() {
//让鼠标聚焦
$("input[name=userName]").focus();
})
方法二：
$().ready(function() {
//让鼠标聚焦
$("input[name=userName]").focus();
})
方法三：
jQuery(function() {
//让鼠标聚焦
jQuery("input[name=userName]").focus();
})
</script>
用户名：<input type="text" name="userName" /><br/>
年龄：<input type="text" name="age" /><br/>
</body>
导入jquery：
<script type="text/javascript" src="文件路径"></script>
jQuery对象的length属性和size()方法会返回其中包含的DOM节点的个数。如果需要获得jQuery对象中的DOM节点对象，可使用get(index)方法。如果要将普通的DOM节点转换为jQuery对象，可使用$( )函数：$(DOM对象)
<script type="text/javascript"> $(function(){ //查找用户名 //dom对象 var domObj = document.getElementsByName("userName")[0]; //dom对象转成jquery对象 console.log($(domObj)); //输出控制台 /* console.log(domObj); */ //jqurey对象 var jqueryObj = $("input[name=userName]") //输出控制台 /* console.log(jqueryObj); */ //jquery对象转成dom对象 console.log(jqueryObj.get(0)); }); </script> <body> 用户名:<input type="text" name="userName"/><br> 年龄:<input type="text" name="age"/> </body>
两个对象转换后浏览器的结果：
二、选择和过滤
<script type="text/javascript"> $(function () { //id选择器 //查找id为user的文本框，并设置样式 $("#user").css("background","#ff0000"); //查找class为age的文本框，并设置样式 $(".age").css("background","#00ff00"); //标签选择器 $("span").css({ "font-size":"50px", "color":"#ff0000", }); }) </script> <body> <input type="text" name="userName" id="user" /><br /> <input type="text" name="age" class="age" /><br /> <span>Hello World!</span> </body>
<script type="text/javascript"> $(function () { //给table，tr，td设置样式 $("table,tr,td").css({ "border":"solid 1px #ff0000", "border-collapse":"collapse", "width":"120px", "text-align":"center", }); }); </script> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </body>
<script type="text/javascript"> $(function () { //选择body下的所有元素，并设置背景 $("body *").css({ "background":"#aa4499", }); }); </script> <body> <div>123</div> <p>456</p> <span>789</span> </body>
<script type="text/javascript"> $(function() { //查找input元素，jquery天生具有集合性 console.log($("input")); //输出长度 console.log("input的长度:" + $("input").length); //输出长度 console.log("input的长度:" + $("input").size()); }) </script> <body> 账号：<input type="text" name="account" /><br /> 用户名：<input type="text" name="userName" /><br /> 性别：<input type="radio" name="gender" value="1" />男 <input type="radio" name="gender" value="0" />女<br /> 密码：<input type="password" name="pwd" /><br /> <p>我是一个段落</p> </body>
<script type="text/javascript"> $(function () { //给h1后面的第一个兄弟p设置样式 $("h1+p").css({ "background":"#00ff00", }); }); </script> <body> <h1>This is heading</h1> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> </body>
<script type="text/javascript"> //给div下面的所有兄弟input标签加样式 $(function () { $("#div2~input").css({ "background":"#dd4499", "color":"#000000", }); }); </script> <body> <div>div1</div> <div id="div2">div2</div> <input type="text" name="userName" /><br /> <input type="text" name="age" /><br /> <input type="button" value="点我" /><br /> <p>Hello World!</p> </body>
<script type="text/javascript"> $(function () { //给div2后面的指定兄弟input标签加样式 $("#div2~input:eq(1)").css({ "background":"#dd4499", "color":"#000000", }); }); </script> <body> <div>div1</div> <div id="div2">div2</div> <input type="text" name="userName" /><br /> <input type="text" name="age" /><br /> <input type="button" value="点我" /><br /> <p>Hello World!</p> </body>
<script type="text/javascript"> $(function () { //给div的后代span设置样式 $("#container span").css({ "background":"#aa1188", "color":"#ffffff", }); }); </script> <body> <div id="container"> <span>div span</span> <div> <span>div div span</span> </div> </div> </body>
<script type="text/javascript"> $(function () { //给div的第一个儿子设置样式 $("#container>span").css({ "background":"#00ff00", "color":"#000000", }); }); </script> <body> <div id="container"> <span>div span</span> <div> <span>div div span</span> </div> </div> </body>
<body>
<table>
<thead>
<!-- 0 -->
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<!-- 2 -->
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<!-- 3 -->
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<!-- 4 -->
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
<table>
<thead>
<!-- 5 -->
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<!-- 6 -->
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<!-- 7 -->
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<!-- 8 -->
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<!-- 9 -->
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
</body>
编号从0开始
$(function () { $("tr:first").css({ "background":"#ff0000", }); });
$(function () { $("tr:last").css({ "background":"#00ff00", }); });
编号从0开始
$(function () { $("tr:even").css({ "background":"#0000ff", }); });
编号从0开始
$(function () { $("tr:odd").css({ "background":"#0000ff", }); });
编号从0开始，不包含3
$(function () { //让编号>3的tr,设置背景色：great than $("tr:gt(3)").css({ "background":"pink", }); });
编号从0开始，不包含3
$(function () { //让编号<3的tr,设置背景色：litter than $("tr:gt(3)").css({ "background":"pink", }); });
$(function () { //让编号=3的tr,设置背景色：equals $("tr:eq(3)").css({ "background":"#dd4411", "color":"#000000", }); });
2.根据节点包含的内容进行过滤
<script type="text/javascript"> $(function () { //包含元素的，区分大小写 $("div:contains(W)").css({ "background":"#ff0000", }); }); </script> <body> <div>hello world!</div> <div>hello World!123</div> </body>
<script type="text/javascript"> //查找不含子元素和文本的div，并设置样式 $(function () { $("div:empty").css({ "background":"#ff0000", "width":"300px", "height":"300px", }); }); </script> <body> <div></div> <div> </div> <div>Hello World!</div> <div>Hello <span>World!</span></div> </body>
因为第二个div包含空格，所以不会加样式，浏览器效果为：
<script type="text/javascript"> $(function () { //div下面包含span元素的 $("div:has(span)").css({ "background":"#00ff00", }); }); </script> <body> <div>Hello World!</div> <div>Hello <span>World!</span></div> </body>
:visible 可见 :hidden 不可见
<script type="text/javascript"> $(function () { //获取可见的input元素的值 var v1 = $("input[type=text]:visible").val(); //获取隐藏的input元素的值 //方法一 var v2 = $("input:hidden:eq(0)").val(); //方法二 var v2_1 = $("input[type=text]:hidden").val(); //获取隐藏域的值 var v3 = $("input:hidden:eq(1)").val(); //输出v1,v2.v3 document.write("v1:" + v1 + "<br />"); document.write("v2:" + v2 + "<br />"); document.write("v2_1:" + v2_1 + "<br />"); document.write("v3:" + v3 + "<br />"); }); </script> <body> <input type="text" value="我是可见的input元素" /><br /> <input type="text" value="我是隐藏的input元素" style="display: none;" /><br /> <input type="hidden" value="我是隐藏域" /><br /> <input type="button" value="我是按钮" /><br /> </body>
4.根据节点的属性进行过滤
- [attribute] 包含给定属性
- [attribute=value] 给定的属性是某个特定值 例: $("input[name='newsletter']")
- [attribute!=value] 给定的属性不是某个特定值。 例: $("input[name!='newsletter']")
- [attribute ^= value] 给定的属性其值以value开始。
- [attribute $= value] 给定的属性其值以value结束。
- [attribute *= value] 给定的属性其值中包含有value。
<body>
<form action="/servlet_demo_anno/userServlet?" method="get"> <!-- /servlet_demo_anno/userServlet?account=zhangsan&pwd=123 -->
Account:<input type="text" name="account"/><br><!-- zhangsan -->
Password:<input type="password" name="pwd"/><br><!-- 123 -->
验证码:<input type="text" name="verifyCode"><img src="/servlet_demo_anno/verifyServlet"/><br />
<input type="submit" value="登录1">
<input type="submit" value="登录2">
<input type="button" value="按钮">
</form>
</body>
给密码框设置背景色: =
<script type="text/javascript"> $(function () { //给密码框设置背景色 $("input[name = pwd]").css({ "background":"#ff0000", }); }); </script>
给不是密码的文本框，设置背景色: !=
<script type="text/javascript"> $(function () { //给不是密码的文本框，设置背景色 $("input[type = text][name != pwd]").css({ "background":"#ff0000", }); }); </script>
设置有value属性的节点，设置背景色: [value]
<script type="text/javascript"> $(function () { //给不是密码的文本框，设置背景色 $("input[value]").css({ "background":"#ff0000", }); }); </script>
名字以ac开头，设置背景色: ^=
<script type="text/javascript"> $(function () { //名字以ac开头，设置背景色 $("input[name ^= ac]").css({ "background":"#ff0000", }); }); </script>
value属性值里面，以2结尾的: $=
<script type="text/javascript"> $(function () { //value属性值里面，以2结尾的 $("input[value $= 2]").css({ "background":"#ff0000", }); }); </script>
value属性里面，含有“录”的: *=
<script type="text/javascript"> $(function () { //value属性里面，含有“录”的 $("input[value *= 录]").css({ "background":"#ff0000", }); }); </script>
5.节点作为儿子节点的角度进行过滤
根据节点的属性进行过滤
<body>
<table>
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
</body>
选取父节点的第2个孩子，编号从1开始 :nth-child(2)
1 <script type="text/javascript"> 2 $(function () { 3 //选取父节点的第2个孩子,编号从1开始 4 $("tr:nth-child(2)").css({ 5 "background":"#ff0000", 6 }); 7 }); 8 </script>
选择父节点的第一个孩子,编号从1开始 :first-child
<script type="text/javascript"> $(function () { //选择父节点的第一个孩子,编号从1开始 $("tr:first-child").css({ "background":"#ff0000", }); }); </script>
父节点的最后一个孩子,编号从1开始 :last-child
<script type="text/javascript"> $(function () { //父节点的最后一个孩子,编号从1开始 $("tr:last-child").css({ "background":"#ff0000", }); }); </script>
父节点的唯一孩子,编号从1开始 :only-child
<script type="text/javascript"> $(function () { //父节点的唯一孩子,编号从1开始 $("tr:only-child").css({ "background":"#ff0000", }); }); </script>
父节点的偶数顺序孩子,编号从1开始 :nth-child(even)
<script type="text/javascript"> $(function () { //父节点的偶数顺序孩子,编号从1开始 $("tr:nth-child(even)").css({ "background":"#ff0000", }); }); </script>
父节点的奇数顺序孩子,编号从1开始 :nth-child(odd)
<script type="text/javascript"> $(function () { //父节点的奇数顺序孩子,编号从1开始 $("tr:nth-child(odd)").css({ "background":"#ff0000", }); }); </script>
满足方程式的节点的孩子，编号从0开始 :nth-child(2n)
<script type="text/javascript"> $(function () { //满足方程式的节点的孩子，编号从0开始 $("tr:nth-child(2n)").css({ "background":"#ff0000", }); }); </script>
满足方程式的节点的孩子，编号从0开始 :nth-child(2n+1)
<script type="text/javascript"> $(function () { //满足方程式的节点的孩子，编号从0开始 $("tr:nth-child(2n+1)").css({ "background":"#ff0000", }); }); </script>
6.根据节点状态进行过滤
<script type="text/javascript"> $(function () { //选中的复选框消失 $("input[name = hobby]:checked").hide(); }); </script> <body> 爱好: <input type="checkbox" value="1" name="hobby">篮球 <input type="checkbox" value="2" name="hobby">足球 <input type="checkbox" value="3" name="hobby" checked="checked">羽毛球 <input type="checkbox" value="4" name="hobby">网球 <input type="checkbox" value="5" name="hobby">java </body>
<script type="text/javascript"> $(function () { //没有选中的复选框消失 $("input[name = hobby]:not(:checked)").hide(); }); </script> <body> 爱好: <input type="checkbox" value="1" name="hobby">篮球 <input type="checkbox" value="2" name="hobby">足球 <input type="checkbox" value="3" name="hobby" checked="checked">羽毛球 <input type="checkbox" value="4" name="hobby">网球 <input type="checkbox" value="5" name="hobby">java </body>
<script type="text/javascript"> $(function () { //给可用的按钮添加背景色 $("input[type = button]:enabled").css({ "background":"#ff0000", }); //给不可用的且名字不为btn3的按钮添加样式 //方法一 $("input[type = button][name != btn3]:disabled").css({ "background":"#ff0000", }); //方法二 $("input[type = button]:disabled:eq(0)").css({ "background":"#ff0000", }); }); </script> <body> <input type="button" value="按钮1"> <input type="button" value="按钮2" disabled="disabled" name="btn2"> <input type="button" value="按钮3" disabled="disabled" name="btn3"> </body>
<script type="text/javascript"> $(function () { //让选中的option的字体变大 $("select option:selected").css({ "font-size":"40px", }); //让没有选中的option,改变其背景色 $("select option:not(:selected)").css({ "background":"#ff7788", }); }); </script> <body> 专业： <select name="major" multiple="multiple"> <option>-------请选择--------</option> <optgroup label="数学系"></optgroup> <option>数学一</option> <option>数学二</option> <option>数学三</option> <optgroup label="计算机系"></optgroup> <option selected="selected">计算机科学与技术</option> <option>大数据</option> <option>软件工程</option> </select> </body>
三、修改css属性及样式
- addClass(“className”)
- removeClass(“className”) //去掉CSS类。 如果没有参数则去掉所有CSS类
- hasClass(“className”) //判断是否含有特定的CSS类
- toggleClass(“class_name”); //交替添加或删除CSS类
2、和CSS样式属性相关的方法：
- css(“propertyName”) //获取样式属性值
- css(“propertyName”,”propertyValue”) //设置样式属性值
注： 属性名支持连字符表示法和驼峰表示法。
3、设置一组样式属性值
- css({“propertyName1”:”propertyValue1”,” propertyName2”:” propertyValue2”})
CSS类相关的方法
<style type="text/css"> .style1{ background-color: orange; } .style2{ width: 260px; height: 300px; } </style> <script type="text/javascript"> $(function () { //给按钮注册一个单击事件 $("button").on("click",function (){ //单击的动作 //判断style1有没有样式类，有就删除，没有就添加 if($("input[name = userName]").hasClass("style1")){ //删除 $("input[name = userName]").removeClass("style1"); }else { //添加 $("input[name = userName]").addClass("style1"); } }); //给toggle按钮注册一个单击事件 $("input[type = button]").click(function () { //添加或者删除两个样式类 $("input[name = userName]").toggleClass("style1"); $("input[name = userName]").toggleClass("style2"); }); }); </script> <body> <input type="text" name="userName" /> <button>按钮</button> <input type="button" value="toggle" /> </body>
点击按钮，则input标签背景变为橘色，效果如图：
点击toggle，则会出现style2的样式，效果如图：
toggle按钮在两者之间进行切换，在点击toggle按钮会回到初始状态，如图：
<script type="text/javascript"> $(function () { //设置背景色 $("input[name = userName]").css({ "background":"#ff0000", }); //获取背景色 console.log($("input[name = userName]").css("background")); }); </script> <body> <input type="text" name="userName" /> <p>hello world</p> </body>
四、文档处理
addClass() 和 removeClass() 函数本身就是更改元素的 class 属性。
2、对于元素的内置属性，可使用prop函数进行获取和设置(jQuery1.6以前使用attr函数，此函数现在用于设置和获取元素的自定义属性)：
prop(‘attrName’) ;
prop(‘attrName’,’value’) ;
prop(‘attrName’, function(index, oldAttr)) ; 第二个参数是返回属性值的函数，index为当前元素的索引值，oldAttr为原先的属性值；
removeProp(‘attrName’) ;
<script type="text/javascript"> $(function() { //给按钮注册一个单击事件 $("input[value= 按钮]").click(function () { //将option的value属性统一改成它的下标 $("select option").prop("value",function (index,old) { //输出老的value属性值 /* console.log(old); */ //输出index:当前option的序号:0-7 /* console.log(index); */ return old.substring(5); //当点击按钮的时候，将option的value值改为数字1-8 }); }); }); </script> <body> <select> <option value="index1">项目1</option><!-- 0 --> <option value="index2">项目2</option> <option value="index3">项目3</option> <option value="index4">项目4</option> <option value="index5">项目5</option> <option value="index6">项目6</option> <option value="index7">项目7</option> <option value="index8">项目8</option> </select> <input type="button" value="按钮"> </body>
<script type="text/javascript"> $(function () { //默认找第一个input标签的checked属性，有true，无false(即使其他input有checked属性) console.log($("input[name = hobby]").prop("checked")); //获取第二个复选框的checked属性 /* console.log($("input[name = hobby]:checked").prop("checked")); */ //获取第二个复选框的checked属性 /* console.log($("input[name = hobby]:eq(1)").prop("checked")); */ }); </script> <body> <input type="checkbox" name="hobby" value="1" />篮球 <input type="checkbox" name="hobby" value="2" checked="checked" />足球 <input type="checkbox" name="hobby" value="3" />网球 </body>
<style type="text/css"> div{ border: 1px solid black; width: 80%; height: 250px; } .back{ background-color: gray; } .font{ font-size: 64px; color: yellow; } .reset{ font-size: 32px; color: blue; } </style> <script type="text/javascript"> $(function () { //给按钮注册一个单击事件 $("button").click(function () { //将名为class的属性值的样式改成reset的样式 $("div").prop("class","reset") }); }); </script> <body> <div class="back font">Hello World!</div> <button>按钮</button> </body>
3、设置一组属性值
$("#container a").prop({"href":"http://www.baidu.com","title":"百度"});
<script type="text/javascript"> $(function () { //点击按钮,执行修改p的子元素a的href属性(点击按钮后，控制台会变成谷歌.com) $("button").click(function () { //方法一 $("p a").attr("href","http://www.google.com"); //方法二 $("p a").prop("href","http://www.google.com"); }); }); </script> <body> <p>Hello world<a href="http://www.baidu.com">你好</a></p> <button>点我</button> </body>
- html() //获取或设置元素中的html内容
- text() //获取或设置元素中的文本内容
- val() //获取或设置输入性控件的值。如:文本框,单选按钮,复选框和下拉列表等
1 <script type="text/javascript"> 2 $(function () { 3 //给btn1注册一个单击事件 4 $("#btn1").click(function () { 5 //设置p1的html内容 6 $("#p1").html("Hello,<b>World!</b>"); 7 }); 8 //给btn2注册一个单击事件 9 $("#btn2").click(function () { 10 //设置p2的文本内容 11 $("#p2").text("Hello,World!"); 12 }); 13 //给btn3注册一个单击事件 14 $("#btn3").click(function () { 15 //设置p3的用户名 16 $("#p3 input").val("wangmazi"); 17 }); 18 //给btn4注册一个单击事件 19 $("#btn4").click(function () { 20 //获取p1的html内容 21 console.log($("#p1").html()); 22 }); 23 //给btn5注册一个单击事件 24 $("#btn5").click(function () { 25 //获取p2的文本内容 26 console.log($("#p2").text()); 27 }); 28 //给btn6注册一个单击事件 29 $("#btn6").click(function () { 30 //获取p3的用户名 31 console.log($("#p3 input").val()); 32 }); 33 }); 34 </script> 35 <body> 36 <!-- p的html内容=<span>你好</span>这里是我随便输入的 html()--> 37 <!-- 获取p的文本内容 =这里是我随便输入的 text() --> 38 <!-- 获取用户名:获取用户名文本框的value属性值 val()--> 39 <p id="p1"><span>你好</span></p> 40 <p id="p2">这里是我随便输入的</p> 41 <p id="p3"><input type="text" name="userName" value="zhangsan"></p> 42 <!-- 设置 --> 43 <input type="button" value="设置p1的html内容" id="btn1"/><br> 44 <input type="button" value="设置p2的文本内容" id="btn2"/><br> 45 <input type="button" value="设置p3的用户名" id="btn3"/><br> 46 <hr> 47 <!-- 获取 --> 48 <input type="button" value="获取p1的html内容" id="btn4"/><br> 49 <input type="button" value="获取p2的文本内容" id="btn5"/><br> 50 <input type="button" value="获取p3的用户名" id="btn6"/><br> 51 </body>
after(content) //在节点之后插入内容。 参数content可以是HTML片段和DOM节点，如果是页面已存在的DOM节点或jQuery对象，则是移动操作
1 <script type="text/javascript"> 2 $(function () { 3 //给div后面添加一个超链接 4 $("div").after("<a href='http://www.baidu.com'>点我访问百度</a>" + "<br />"); 5 $("div").after($("<a href='http://www.baidu.com'>访问百度</a>" + "<br/>"));//a标签会在浏览器首先显示 6 }); 7 </script> 8 <body> 9 <div>我是一个div块</div> 10 </body>
类似的函数：
before( )
append( ) //节点内部追加
prepend( ) //节点内部前置
1 <script type="text/javascript"> 2 $(function () { 3 //给div添加一个子元素，并且搁置在最后面 4 $("div").append("<a href='http://www.baidu.com'>点我访问百度</a>"); 5 //给div添加一个子元素，并且搁置在最前面 6 $("div").prepend($("<a href='http://www.baidu.com'>访问百度</a>" + "<br />")); 7 }); 8 </script> 9 <body> 10 <div> 11 <span>我是一个div块</span> 12 <b>div</b> 13 <br /> 14 </div> 15 </body>
另外，还有一些反转方式的方法：
insertAfter( )、insertBefore( )、appendTo( )、prependTo( )
1 <script type="text/javascript"> 2 $(function () { 3 //删除编号为“2”的li子元素 4 $("ul li:eq(2)").empty(); 5 //删除编号为“2”的li 6 $("ul li:eq(2)").remove(); 7 }); 8 </script> 9 <body> 10 <ul> 11 <li>项目一</li> 12 <li>项目二</li> 13 <li><span>项目</span>三</li> 14 <li>项目四</li> 15 </ul> 16 </body>
next()，prev() //获取下一个或前一个兄弟节点。
children() //获取元素的子节点，不包括孙子及其他后代节点。
siblings() //获取前后所有兄弟节点。
parent() //获取父节点；
parents() //获取所有祖先节点。
1 <script type="text/javascript"> 2 $(function () { 3 //获取div的所有子元素 4 var nodes = $("div").children(); 5 //遍历div的所有子元素 6 //方式一 7 nodes.each(function (index) { 8 //this指向当前dom元素 9 console.log(index + "：" + $(this).html()); 10 }); 11 //方式二 12 $.each(nodes,function (index,data) { 13 //data:当前的dom元素 14 console.log(index + "：" + $(data).html()); 15 }); 16 }); 17 </script> 18 <body> 19 <div> 20 我是div的<span>子元素</span> 21 我是div的<span>子元素</span> 22 我是div的<span>子元素</span> 23 我是div的<span>子元素</span> 24 我是div的<span>子元素</span> 25 我是div的<span>子元素</span> 26 我是div的<span>子元素</span> 27 我是div的<span>子元素</span> 28 我是div的<span>子元素</span> 29 我是div的<span>子元素</span> 30 </div> 31 </body>
9、对集合的遍历，可使用：
obj.each(function(index){
// 函数中的this关键字指向DOM节点
});
或者使用：
$.each(ch,function(index,data){
// data引用了每个DOM节点
});
五、事件处理
1、$(document).ready(fn)
每一次调用$(document).ready() 都是向事件队列中追加函数，多个函数会按照注册的顺序依次被调用。
注册的函数在HTML文档被解析为DOM树之后马上被执行，不会等待页面中的图片等元素完成下载；
2、使用on(‘eventName’, fn) 方法可以为节点绑定事件处理函数(jQuery1.7以前使用bind函数)。 eventName可取标准javascript事件名，如：
blur,focus,change,select,click,mouseover,keydown等。
1 <script type="text/javascript"> 2 $(function () { 3 //给用户名注册一个聚焦事件,设置用户名聚焦时input的背景色 4 $("input[name = userName]").on("focus",function () { 5 //查找用户名 6 $("input[name = userName]").css("background","#ff0000"); 7 }); 8 //给用户名注册一个焦点离开事件，设置焦点离开时input的背景色 9 $("input[name = userName]").on("blur",function () { 10 $("input[name = userName]").css("background","#00ff00"); 11 }); 12 }); 13 </script> 14 <body> 15 <input type="text" name="userName" /><br /> 16 <input type="text" name="age" /><br /> 17 </body>
3、jQuery还提供了一些绑定标准事件的简单方式，比如.click(fn)方法等效于.on(‘click’,fn)。如果调用click()时未提供参数，则是触发事件。还有以下简化方式：
blur, focus, click, mouseover, mouseout, change, select, submit, keydown, keypress, keyup。
【示例】全部选择复选框，反选复选框
1 $(function () { 2 //给全选复选框注册一个单机事件 3 $("input[name = chkAll]").click(function () { 4 //让本页5个复选框的checked属性=全选复选框的checked属性 5 //查找5个复选框 6 var nodes = $("input[name = chkedPrdId]"); 7 //设置5个复选框的属性 8 nodes.prop("checked",$("input[name = chkAll]").prop("checked")) 9 }); 10 //给反选复选框注册一个单击事件 11 $("input[name = unChk]").click(function () { 12 //获取选中的复选框节点 13 var yes = $("input[name = chkedPrdId]:checked"); 14 //获取没有选中的复选框节点 15 var no = $("input[name = chkedPrdId]:not(:checked)"); 16 //将yes的checked属性设置为false 17 yes.prop("checked",false); 18 //将no的checked属性设置为true 19 no.prop("checked",true); 20 }); 21 });
hover()接受两个函数作为参数，第一个函数会在鼠标进入对象时触发，第二个函数会在鼠标离开元素时触发。
1 <script type="text/javascript"> 2 $(function () { 3 $("div").hover(function () { 4 //鼠标进入div的时候，设置样式 5 $("div").css("background","#ff0000"); 6 },function () { 7 //鼠标进离开div时候,修改样式 8 $("div").css("background","#00ff00"); 9 }) 10 }) 11 </script> 12 <body> 13 <div> 14 我是div的<span>子元素</span><br> 15 我是div的<span>子元素</span><br> 16 我是div的<span>子元素</span><br> 17 我是div的<span>子元素</span><br> 18 我是div的<span>子元素</span><br> 19 我是div的<span>子元素</span><br> 20 我是div的<span>子元素</span><br> 21 我是div的<span>子元素</span><br> 22 我是div的<span>子元素</span><br> 23 我是div的<span>子元素</span><br> 24 </div> 25 </body>
六、显示效果
hide() 方法将元素的样式属性设置为display:none ;
show() 方法会恢复元素的 display属性值到之前的状态
1 <script type="text/javascript"> 2 $(function () { 3 $("p").click(function () { 4 //this: 当前dom元素 5 $(this).hide(); 6 }); 7 }); 8 </script> 9 <body> 10 <p>点击我，我会隐藏</p> 11 <p>点我隐藏</p> 12 <p>隐藏</p> 13 </body>
1 <script type="text/javascript"> 2 $(function () { 3 //给btn1注册一个单击事件 4 $("#btn1").click(function () { 5 //隐藏p 6 $("p").hide(); 7 }); 8 //给btn2注册一个单击事件 9 $("#btn2").click(function () { 10 //显示p 11 $("p").show(); 12 }); 13 //给btn3注册一个单击事件 14 $("#btn3").click(function () { 15 //隐藏p1 16 $("#p1").hide(); 17 }); 18 //给btn4注册一个单击事件 19 $("#btn4").click(function () { 20 //显示p1 21 $("#p1").show(); 22 }); 23 }); 24 </script> 25 <body> 26 <p id="p1">如果点击隐藏按钮,我就会消失</p> 27 <p>这一行,暂时不隐藏</p> 28 <input type="button" value="隐藏p" id="btn1"><br> 29 <input type="button" value="显示p" id="btn2"><br> 30 <hr> 31 <input type="button" value="根据编号,隐藏" id="btn3"><br> 32 <input type="button" value="根据编号,显示" id="btn4"> 33 </body>
2、show() 和 hide() 方法还可以带有一个speed 参数，该参数可取三种预定义的字符串“slow”, “normal”, “fast”或表示动画时长的毫秒数。
1 <script type="text/javascript"> 2 //定义一个标志位 3 $(function () { 4 var bol = true;//true:显示；false:隐藏 5 //给按钮注册一个单击事件 6 $("input[type = button]").click(function () { 7 //判断 8 if(bol){ 9 //隐藏div 10 $("div").hide("fast"); 11 //修改标志位 12 bol = false; 13 }else{ 14 //显示div 15 $("div").show("slow"); 16 //修改标志位 17 bol = true; 18 } 19 }); 20 }); 21 </script> 22 <body> 23 <input type="button" value="show/hide"/> 24 <div> 25 我是div的<span>子元素</span><br> 26 我是div的<span>子元素</span><br> 27 我是div的<span>子元素</span><br> 28 我是div的<span>子元素</span><br> 29 我是div的<span>子元素</span><br> 30 我是div的<span>子元素</span><br> 31 我是div的<span>子元素</span><br> 32 我是div的<span>子元素</span><br> 33 我是div的<span>子元素</span><br> 34 我是div的<span>子元素</span><br> 35 </div> 36 <div> 37 <select multiple="multiple"> 38 <option>项目1</option> 39 <option>项目2</option> 40 <option>项目3</option> 41 <option>项目4</option> 42 <option>项目5</option> 43 <option>项目6</option> 44 <option>项目7</option> 45 </select> 46 </div> 47 <input type="text" value="文本框"> 48 </body>
3、淡入淡出：fadeIn(speed) 和 fadeOut(speed) 方法。
1 <script type="text/javascript"> 2 //定义一个标志位 3 $(function () { 4 var bol = true;//true:显示；false:隐藏 5 //只修改不透明度 6 //给按钮注册一个单击事件 7 $("input[type = button]").click(function () { 8 //判断 9 if(bol){ 10 //隐藏div 11 $("div").fadeOut(3000); 12 //修改标志位 13 bol = false; 14 }else{ 15 //显示div 16 $("div").fadeIn(3000); 17 //修改标志位 18 bol = true; 19 } 20 }); 21 }); 22 </script> 23 <body> 24 <input type="button" value="show/hide"/> 25 <div> 26 我是div的<span>子元素</span><br> 27 我是div的<span>子元素</span><br> 28 我是div的<span>子元素</span><br> 29 我是div的<span>子元素</span><br> 30 我是div的<span>子元素</span><br> 31 我是div的<span>子元素</span><br> 32 我是div的<span>子元素</span><br> 33 我是div的<span>子元素</span><br> 34 我是div的<span>子元素</span><br> 35 我是div的<span>子元素</span><br> 36 </div> 37 <div> 38 <select multiple="multiple"> 39 <option>项目1</option> 40 <option>项目2</option> 41 <option>项目3</option> 42 <option>项目4</option> 43 <option>项目5</option> 44 <option>项目6</option> 45 <option>项目7</option> 46 </select> 47 </div> 48 <input type="text" value="文本框"> 49 </body>
4、滑入滑出：slideDown() 和 slideUp()方法。
1 <script type="text/javascript"> 2 //定义一个标志位 3 $(function () { 4 var bol = true;//true:显示；false:隐藏 5 //只修改高度 6 //给按钮注册一个单击事件 7 $("input[type = button]").click(function () { 8 //判断 9 if(bol){ 10 //隐藏div 11 $("div").slideUp(3000); 12 //修改标志位 13 bol = false; 14 }else{ 15 //显示div 16 $("div").slideDown(3000); 17 //修改标志位 18 bol = true; 19 } 20 }); 21 }); 22 </script> 23 <body> 24 <input type="button" value="show/hide"/> 25 <div> 26 我是div的<span>子元素</span><br> 27 我是div的<span>子元素</span><br> 28 我是div的<span>子元素</span><br> 29 我是div的<span>子元素</span><br> 30 我是div的<span>子元素</span><br> 31 我是div的<span>子元素</span><br> 32 我是div的<span>子元素</span><br> 33 我是div的<span>子元素</span><br> 34 我是div的<span>子元素</span><br> 35 我是div的<span>子元素</span><br> 36 </div> 37 <div> 38 <select multiple="multiple"> 39 <option>项目1</option> 40 <option>项目2</option> 41 <option>项目3</option> 42 <option>项目4</option> 43 <option>项目5</option> 44 <option>项目6</option> 45 <option>项目7</option> 46 </select> 47 </div> 48 <input type="text" value="文本框"> 49 </body>
七、JavaScript中的其他辅助方法
- $.parseXML(“”) //解析xml字符串，返回Documen对象
- $.trim(“”) //去掉字符串前后的空格
- $(“form”).serialize() // 将表单数据序列化为字符串
1 <script type="text/javascript"> 2 $(function () { 3 //给注册按钮注册一个单击事件 4 $("input[type = button]").click(function () { 5 //获取表单数据 6 //获取账号 7 var account = $("input[nme = account]").val(); 8 //获取用户名 trim:去掉前后空格 9 var userName = $.trim($("input[name = userName]").val()); 10 //获取性别 11 var gender = $("input[name = gender]").val(); 12 //获取密码 13 var pwd = $("input[name = pwd]").val(); 14 //获取确认密码 15 var confirm = $("input[name = confirm]").val(); 16 //将注册信息,反映json字符串 17 var jsn ='{"account":"' + account + '","userName":"' + userName + '","gender":"' + gender + '","pwd":"' + pwd + '","confirm":"' + confirm + '"}'; 18 //方法一 19 console.log($.parseJSON(jsn)); 20 //方法二 21 console.log(eval("(" + jsn + ")")); 22 //将表单数据序列化(控制台中的空格会变为加号) 23 console.log($("form").serialize()); 24 }); 25 }); 26 </script> 27 <body> 28 <h2>注册</h2> 29 <form action="${pageContext.request.contextPath}/userServlet?flag=register" method="post" enctype="multipart/form-data" οnsubmit="return chk()"> 30 账号:<input type="text" name="account"/><br> 31 用户名:<input type="text" name="userName"/><br> 32 性别:<input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女<br> 33 密码:<input type="password" name="pwd"/><br> 34 确认密码:<input type="password" name="confirm"/><br> 35 <input type="button" value="注册"> 36 </form> 37 </body>
扫一扫
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
