JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法
在使用Jquery包装集的知识之前首先要注意三个概念（当前包装集、新包装集、包装集内部元素）的区别。
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>包装集size(),length,index</title> 6 <script src="js/jquery-1.8.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //window.alert($("tr").size());//获取tr的个数 10 //window.alert($("tr").length);//获取tr的个数 11 12 //当执行了get之后得到的结果是一个js的元素 13 //var dom = $("tr").get(1); 14 //$(dom).css("color", "blue"); 15 16 //判断id为abc的tr在包装集的位置 17 //window.alert($("tr").index($("tr#abc"))); 18 19 //得到tbody下面第三个tr 20 //$("tbody tr:eq(2)").css("color", "blue"); 21 }); 22 </script> 23 </head> 24 <body> 25 <table width="700" border="1" align="center"> 26 <thead> 27 <tr> 28 <td>用户标识</td> 29 <td>用户姓名</td> 30 <td>用户年龄</td> 31 <td>用户密码</td> 32 </tr> 33 </thead> 34 <tbody> 35 <tr id="abc"> 36 <td>1</td> 37 <td>张三</td> 38 <td>23</td> 39 <td>abc123</td> 40 </tr> 41 <tr> 42 <td>2</td> 43 <td>李四</td> 44 <td>33</td> 45 <td>abc123</td> 46 </tr> 47 <tr> 48 <td>3</td> 49 <td>王五</td> 50 <td>13</td> 51 <td>abc123</td> 52 </tr> 53 <tr> 54 <td>4</td> 55 <td>赵六</td> 56 <td>45</td> 57 <td>abc123</td> 58 </tr> 59 <tr> 60 <td>5</td> 61 <td>朱七</td> 62 <td>21</td> 63 <td>abc123</td> 64 </tr> 65 </tbody> 66 </table> 67 </body> 68 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>多个包装集在一起的操作（注意哪些是返回的是源包装集，哪些是返回的是新包装集。）</title> 6 <script src="js/jquery-1.8.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //在表达式中通过“,”可以分割多个包装集 10 //$("tbody tr:eq(2),tr#abc").css("color", "blue"); 11 12 //可以为包装集使用add方法，可以将新加入的表达式添加到源包装集中 13 //$("tbody tr:eq(2)").add("thead tr td:eq(2)").add("tr td:contains('3')").css("color", "blue"); 14 15 //not方法可以在源包装集中取消掉指定的表达式 16 //$("tr").not("tr#abc").css("color","blue"); 17 18 //获取tr中位置小于3的元素,filter表示在当前tr的包装集中进行过滤 19 //$("tr").filter("tr:lt(3)").css("color", "blue"); 20 21 //下面这个不行，因为find是在当前包装集内部进行查找 22 //$("tr").find("tr:lt(3)").css("color", "blue"); 23 24 //注意：以上都是返回获取的源包装集上的操作，以下返回的都是获取的新包装集上的操作 25 26 //slice返回的是一个新的包装集，获取tr中的1到3形成一个新的包装集，返回的值就是新的包装集 27 //$("tr").slice(1, 3).css("color", "red"); 28 29 //获取tr中的1到3形成一个新的包装集设置颜色，原来的设置另外一个颜色 30 //$("tr").css("color", "blue").slice(1, 3).css("color", "red"); 31 32 //从包装集的内部获取相应的元素，返回的值也是新包装集 33 //$("table").find("tr#abc").css("color","blue"); 34 35 }); 36 </script> 37 </head> 38 <body> 39 <table width="700" border="1" align="center"> 40 <thead> 41 <tr> 42 <td>用户标识</td> 43 <td>用户姓名</td> 44 <td>用户年龄</td> 45 <td>用户密码</td> 46 </tr> 47 </thead> 48 <tbody> 49 <tr id="abc"> 50 <td>1</td> 51 <td>张三</td> 52 <td>23</td> 53 <td>abc123</td> 54 </tr> 55 <tr> 56 <td>2</td> 57 <td>李四</td> 58 <td>33</td> 59 <td>abc123</td> 60 </tr> 61 <tr> 62 <td>3</td> 63 <td>王五</td> 64 <td>13</td> 65 <td>abc123</td> 66 </tr> 67 <tr> 68 <td>4</td> 69 <td>赵六</td> 70 <td>45</td> 71 <td>abc123</td> 72 </tr> 73 <tr> 74 <td>5</td> 75 <td>朱七</td> 76 <td>21</td> 77 <td>abc123</td> 78 </tr> 79 </tbody> 80 </table> 81 </body> 82 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>包装集slice,find,is,children,next,nextAll,parent,parents,closest,siblings</title> 6 <script src="js/jquery-1.8.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //slice返回的是一个新的包装集，获取tr中的1到3形成一个新的包装集，返回的值就是新的包装集 10 //$("tr").slice(1, 3).css("color", "red"); 11 12 //获取tr中的1到3形成一个新的包装集设置颜色，原来的设置另外一个颜色 13 //$("tr").css("color", "blue").slice(1, 3).css("color", "red"); 14 15 //从包装集的内部获取相应的元素，返回的值也是新包装集 16 //$("table").find("tr#abc").css("color","blue"); 17 18 //is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td 19 //window.alert($("table").is("td:contains('用户')")); 20 //window.alert($("td").is("td:contains('用户')")); 21 22 //获取tbody中的所有tr元素,返回的也是新包装集 23 //$("tbody").children("tr").css("color","blue"); 24 25 //获取tbody中的等于3的tr子元素,返回的也是新包装集 26 //$("tbody").children("tr:eq(3)").css("color", "blue"); 27 28 //找到下一个子元素，只是一个元素，返回新包装集 29 //$("tr#abc").next().css("color","blue"); 30 31 //找到下一个组兄弟元素，所有元素，返回新包装集 32 //$("tr#abc").nextAll().css("color", "blue"); 33 34 //parent仅仅只是返回上一级的div，返回新包装集 35 //$("#s1").parent("div").css("color","blue"); 36 37 //返回所有满足条件的父类节点，返回新包装集 38 //$("#s1").parents("div").css("color", "blue"); 39 40 //closest是从自己开始往上找，返回找到的第一个满足条件的节点，返回新包装集 41 //$("#s1").closest("div").css("color", "blue"); 42 43 //返回第3个tr的所有兄弟节点，但不包含自己（第3个tr），返回新包装集 44 //$("tr:eq(2)").siblings("tr").css("color", "blue"); 45 46 //返回第3个tr的所有兄弟节点，但不包含自己（第3个tr），判断兄弟节点中有没有tr id=abc元素，返回新包装集 47 //window.alert($("tr:eq(2)").siblings("tr").is("tr#abc")); 48 }); 49 </script> 50 </head> 51 <body> 52 <div> 53 abc 54 <div id="d1"> 55 def 56 <div> 57 123 58 <span id="s1">456</span> 59 </div> 60 </div> 61 </div> 62 <table width="700" border="1" align="center"> 63 <thead> 64 <tr> 65 <td>用户标识</td> 66 <td>用户姓名</td> 67 <td>用户年龄</td> 68 <td>用户密码</td> 69 </tr> 70 </thead> 71 <tbody> 72 <tr id="abc"> 73 <td>1</td> 74 <td>张三</td> 75 <td>23</td> 76 <td>abc123</td> 77 </tr> 78 <tr> 79 <td>2</td> 80 <td>李四</td> 81 <td>33</td> 82 <td>abc123</td> 83 </tr> 84 <tr> 85 <td>3</td> 86 <td>王五</td> 87 <td>13</td> 88 <td>abc123</td> 89 </tr> 90 <tr> 91 <td>4</td> 92 <td>赵六</td> 93 <td>45</td> 94 <td>abc123</td> 95 </tr> 96 <tr> 97 <td>5</td> 98 <td>朱七</td> 99 <td>21</td> 100 <td>abc123</td> 101 </tr> 102 </tbody> 103 </table> 104 </body> 105 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>包装集-链式编程-add,end,andSelf,find,filter</title> 6 <script src="js/jquery-1.8.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 10 //将第三个tr之外的所有tr的color设置为blue，backgroundcolor设置为green 11 //$("tr:eq(2)").siblings("tr").css("color", "blue").css("background-color", "green"); 12 13 //将第三个tr之外的所有tr的color设置为blue，backgroundcolor设置为green，在将第三个tr设置为backgroundcolor设置为red。使用end()方法返回上一个包装集 14 //$("tr:eq(2)").siblings("tr").css("color", "blue").css("background-color", "green").end().css("background-color","red"); 15 16 //复制user2的table中的tbody内容，添加到user1中 17 //$("#user2 tbody").clone().appendTo("#user1"); 18 19 //复制user2的table中的tbody内容，添加到user1中，同时给user1设置color=blue 20 //$("#user2 tbody").clone().appendTo("#user1").css("color", "blue"); 21 22 //复制user2的table中的tbody内容，添加到user1中，同时又添加了偶数行的tr后，在设置color=blue 23 //$("#user2 tbody").clone().appendTo("#user1").add("tr:even").css("color", "blue"); 24 25 //filter实在当前的包装集（user1）中进行过滤，它是找不到tr:even 26 //$("#user2 tbody").clone().appendTo("#user1").filter("tr:even").css("color", "blue"); 27 28 //find实在当前的包装集（user1）的内部进行查找，所以它是能找到tr:even 29 //$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue"); 30 31 //给user1的偶数行tr设置color=blue之后，再给原包装集user2设置color=blue，需要使用end()得到上一个包装集。使用两次end().end()就能找到user2的包装集了。 32 //$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue").end().end().css("color", "blue"); 33 34 //上面这个例子如果只使用了一次end(),那么它会找到clone()之后的包装集 35 //$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue").end().css("color", "blue"); 36 37 //andSelf()把当前所有的包装集合并在一起,设置color=blue 38 //$("#user2 tbody").clone().appendTo("#user1").andSelf().find("tr:even").css("color", "blue"); 39 }); 40 </script> 41 </head> 42 <body> 43 <table id="user1" width="700" border="1" align="center"></table> 44 <table width="700" border="1" align="center" id="user2"> 45 <thead> 46 <tr> 47 <td>用户标识</td> 48 <td>用户姓名</td> 49 <td>用户年龄</td> 50 <td>用户密码</td> 51 </tr> 52 </thead> 53 <tbody> 54 <tr id="abc"> 55 <td>1</td> 56 <td>张三</td> 57 <td>23</td> 58 <td>abc123</td> 59 </tr> 60 <tr> 61 <td>2</td> 62 <td>李四</td> 63 <td>33</td> 64 <td>abc123</td> 65 </tr> 66 <tr> 67 <td>3</td> 68 <td>王五</td> 69 <td>13</td> 70 <td>abc123</td> 71 </tr> 72 <tr> 73 <td>4</td> 74 <td>赵六</td> 75 <td>45</td> 76 <td>abc123</td> 77 </tr> 78 <tr> 79 <td>5</td> 80 <td>朱七</td> 81 <td>21</td> 82 <td>abc123</td> 83 </tr> 84 </tbody> 85 </table> 86 </body> 87 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>包装集-链式编程-find,filter,仅在当前包装集过滤,和在包装集内部的元素上进行查找的区别</title> 6 <script src="js/jquery-1.8.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //查询出了两个table包装集，一个为user1的table一个为user2的table，此时可以过滤得到users这个table 10 //$("table").filter("table#user1").css("color", "blue"); 11 12 //如果想过滤tr的话，那是不行的，因为filter只能对当前包装集操作，而不能对当前包装集内部的元素进行操作。 13 //$("table").filter("tr").css("color", "blue"); 14 15 //解决方法1是增加tr这个包装集到源包装集中 16 //$("table").add("tr").filter("tr").css("color", "blue"); 17 18 //解决方法2是使用find方法在包装集内部的元素中进行查找 19 $("table").find("tr").css("color", "blue"); 20 }); 21 </script> 22 </head> 23 <body> 24 <table id="user1" width="700" border="1" align="center"> 25 <thead> 26 <tr> 27 <td>用户标识</td> 28 <td>用户姓名</td> 29 <td>用户年龄</td> 30 <td>用户密码</td> 31 </tr> 32 </thead> 33 <tbody> 34 <tr id="abc"> 35 <td>1</td> 36 <td>张三</td> 37 <td>23</td> 38 <td>abc123</td> 39 </tr> 40 <tr> 41 <td>2</td> 42 <td>李四</td> 43 <td>33</td> 44 <td>abc123</td> 45 </tr> 46 <tr> 47 <td>3</td> 48 <td>王五</td> 49 <td>13</td> 50 <td>abc123</td> 51 </tr> 52 <tr> 53 <td>4</td> 54 <td>赵六</td> 55 <td>45</td> 56 <td>abc123</td> 57 </tr> 58 <tr> 59 <td>5</td> 60 <td>朱七</td> 61 <td>21</td> 62 <td>abc123</td> 63 </tr> 64 </tbody> 65 </table> 66 <table width="700" border="1" align="center" id="user2"> 67 <thead> 68 <tr> 69 <td>用户标识</td> 70 <td>用户姓名</td> 71 <td>用户年龄</td> 72 <td>用户密码</td> 73 </tr> 74 </thead> 75 <tbody> 76 <tr id="abc"> 77 <td>1</td> 78 <td>张三</td> 79 <td>23</td> 80 <td>abc123</td> 81 </tr> 82 <tr> 83 <td>2</td> 84 <td>李四</td> 85 <td>33</td> 86 <td>abc123</td> 87 </tr> 88 <tr> 89 <td>3</td> 90 <td>王五</td> 91 <td>13</td> 92 <td>abc123</td> 93 </tr> 94 <tr> 95 <td>4</td> 96 <td>赵六</td> 97 <td>45</td> 98 <td>abc123</td> 99 </tr> 100 <tr> 101 <td>5</td> 102 <td>朱七</td> 103 <td>21</td> 104 <td>abc123</td> 105 </tr> 106 </tbody> 107 </table> 108 </body> 109 </html>