首页 > 代码库 > JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法
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="http://www.mamicode.com/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下面第三个tr20 //$("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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/js/jquery-1.8.2.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 10 //将第三个tr之外的所有tr的color设置为blue，backgroundcolor设置为green11 //$("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=blue20 //$("#user2 tbody").clone().appendTo("#user1").css("color", "blue");21 22 //复制user2的table中的tbody内容，添加到user1中，同时又添加了偶数行的tr后，在设置color=blue23 //$("#user2 tbody").clone().appendTo("#user1").add("tr:even").css("color", "blue");24 25 //filter实在当前的包装集（user1）中进行过滤，它是找不到tr:even26 //$("#user2 tbody").clone().appendTo("#user1").filter("tr:even").css("color", "blue");27 28 //find实在当前的包装集（user1）的内部进行查找，所以它是能找到tr:even29 //$("#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=blue38 //$("#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="http://www.mamicode.com/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>
JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。