1、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jquery的包装集</title> <!--引入jquery依赖包--> <script type="text/javascript" src="../jquery-1.11.3.js"></script> <script type="text/javascript"> /** * 包装集的定义: * 通过$("exp")筛选出页面的一组满足表达式的元素,这一组元素就属于jquery包装集中的元素 * 包装集的常用方法: * 1.获取包装集中的元素个数:$("exp").length * 2.通过下标值获取包装集中的某个元素[js元素]:$("exp").get(index) * 3.获取某个元素在包装集中的位置:$("exp").index(element) */ $(function() { /** * size()|length|get()|index */ //1.获取<tr>元素的个数 //alert($("tr").length); //6 //alert($("tr").size()); //6 //2.获取第2个<tr>元素 //$($("tr").get(1)).css("color","#f00"); //3.判断id为abc的<tr>元素在包装集中的位置 //alert($("tr").index($("tr#abc"))); //2 /** * add()|not()|filter()|slice() */ //4.在表达式中通过逗号,可以分割多个包装集 //$("tbody tr:eq(2),tr#abc").css("color","#f00"); //5.通过包装集的add方法,可以将新加入的元素添加到包装集中 //$("tbody tr:eq(2)").add("tr td:contains('2')").css("color","#f00"); //6.通过not方法取消包装集中的元素 //$("tr").not("tr#abc").css("color","#f00"); //7.获取<tr>中位置小于3的元素 //$("tr").filter("tr:lt(3)").css("color","#f00"); //8.获取<tr>中位置是1,3[不包括3]形成的新包装集,返回值就是新的包装集 //$("tr").slice(1,3).css("color","#f00"); /** * find()|is() */ //9.从包装集的内部获取相应的元素,返回值也是新包装集 //$("table").find("tr#abc").css("color","#f00"); //10.is表示判断当前包装集中是否有某个元素 //$("table")的包装集中只有一个元素table,所有没有<td> //alert($("td").is("td:contains('用户')")); //true /** * children()|next()|nextAll()|parent()|parents()|siblings() */ //11.获取<tbody>中的所有元素位置大于2的<tr>子元素,返回的是新包装集 //$("tbody").children("tr:gt(2)").css("color","#f00"); //12.找到下一个兄弟元素,只是一个元素,返回新包装集 //$("tr#abc").next().css("color","#f00"); //13.找到下一组兄弟元素,返回新包装集 //$("tr#abc").nextAll().css("color","#f00"); //14.parent("div")仅仅只是返回上一级的div,返回新包装集 //$("#s1").parent("div").css("color","#f00"); //15.parents("div")返回满足条件的所有父节点,返回新包装集 //$("#s1").parents("div").css("color","#f00"); //16.返回第3个<tr>的所有兄弟节点,返回新包装集 //$("tr:eq(2)").siblings().css("color","#f00"); }); </script> </head> <body> <div id="d1"> abc <div> <span id="s1">def</span> </div> </div> <table width="700" border="1" align="center"> <thead> <tr align="center"> <td>用户编号</td> <td>用户姓名</td> <td>用户年龄</td> <td>用户密码</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>23</td> <td>abc123</td> </tr> <tr id="abc"> <td>2</td> <td>李四</td> <td>33</td> <td>abc123</td> </tr> <tr> <td>3</td> <td>王五</td> <td>43</td> <td>abc123</td> </tr> <tr> <td>4</td> <td>赵六</td> <td>53</td> <td>abc123</td> </tr> <tr> <td>5</td> <td>孙七</td> <td>63</td> <td>abc123</td> </tr> </tbody> </table> </body> </html>
2、案例2
3、案例4
4、案例5
5、案例6
6、案例7
7、案例8
8、案例9
9、案例11
10、案例12
11、案例13
12、案例14
13、案例15
14、案例16