包装集

包装集

关注
发信
关注(28)粉丝(399)

JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法

在使用Jquery包装集的知识之前首先要注意三个概念（当前包装集、新包装集、包装集内部元素）的区别。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>包装集size(),length,index</title>

     <script src="js/jquery-1.8.2.js"></script>

     <script type="text/javascript">

         $(function () {

             //window.alert($("tr").size());//获取tr的个数

             //window.alert($("tr").length);//获取tr的个数

             //当执行了get之后得到的结果是一个js的元素

             //var dom = $("tr").get(1);

             //$(dom).css("color", "blue");

             //判断id为abc的tr在包装集的位置

             //window.alert($("tr").index($("tr#abc")));

             //得到tbody下面第三个tr

             //$("tbody tr:eq(2)").css("color", "blue");

         });

     </script>

 </head>

 <body>

     <table width="700" border="1" align="center">

         <thead>

             <tr>

                 <td>用户标识</td>

                 <td>用户姓名</td>

                 <td>用户年龄</td>

                 <td>用户密码</td>

             </tr>

         </thead>

         <tbody>

             <tr id="abc">

                 <td>1</td>

                 <td>张三</td>

                 <td>23</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>李四</td>

                 <td>33</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>王五</td>

                 <td>13</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>赵六</td>

                 <td>45</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>朱七</td>

                 <td>21</td>

                 <td>abc123</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

jquery_wrap01_size_length_index

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>多个包装集在一起的操作（注意哪些是返回的是源包装集，哪些是返回的是新包装集。）</title>

     <script src="js/jquery-1.8.2.js"></script>

     <script type="text/javascript">

         $(function () {

             //在表达式中通过“,”可以分割多个包装集

             //$("tbody tr:eq(2),tr#abc").css("color", "blue");

             //可以为包装集使用add方法，可以将新加入的表达式添加到源包装集中

             //$("tbody tr:eq(2)").add("thead tr td:eq(2)").add("tr td:contains('3')").css("color", "blue");

             //not方法可以在源包装集中取消掉指定的表达式

             //$("tr").not("tr#abc").css("color","blue");

             //获取tr中位置小于3的元素,filter表示在当前tr的包装集中进行过滤

             //$("tr").filter("tr:lt(3)").css("color", "blue");

             //下面这个不行，因为find是在当前包装集内部进行查找

             //$("tr").find("tr:lt(3)").css("color", "blue");

             //注意：以上都是返回获取的源包装集上的操作，以下返回的都是获取的新包装集上的操作

             //slice返回的是一个新的包装集，获取tr中的1到3形成一个新的包装集，返回的值就是新的包装集

             //$("tr").slice(1, 3).css("color", "red");

             //获取tr中的1到3形成一个新的包装集设置颜色，原来的设置另外一个颜色

             //$("tr").css("color", "blue").slice(1, 3).css("color", "red");

             //从包装集的内部获取相应的元素，返回的值也是新包装集

             //$("table").find("tr#abc").css("color","blue");

         });

     </script>

 </head>

 <body>

     <table width="700" border="1" align="center">

         <thead>

             <tr>

                 <td>用户标识</td>

                 <td>用户姓名</td>

                 <td>用户年龄</td>

                 <td>用户密码</td>

             </tr>

         </thead>

         <tbody>

             <tr id="abc">

                 <td>1</td>

                 <td>张三</td>

                 <td>23</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>李四</td>

                 <td>33</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>王五</td>

                 <td>13</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>赵六</td>

                 <td>45</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>朱七</td>

                 <td>21</td>

                 <td>abc123</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

jquery_wrap02_mutil_sourcewrap_newwrap

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>包装集slice,find,is,children,next,nextAll,parent,parents,closest,siblings</title>

     <script src="js/jquery-1.8.2.js"></script>

     <script type="text/javascript">

         $(function () {

             //slice返回的是一个新的包装集，获取tr中的1到3形成一个新的包装集，返回的值就是新的包装集

             //$("tr").slice(1, 3).css("color", "red");

             //获取tr中的1到3形成一个新的包装集设置颜色，原来的设置另外一个颜色

             //$("tr").css("color", "blue").slice(1, 3).css("color", "red");

             //从包装集的内部获取相应的元素，返回的值也是新包装集

             //$("table").find("tr#abc").css("color","blue");

             //is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td

             //window.alert($("table").is("td:contains('用户')"));

             //window.alert($("td").is("td:contains('用户')"));

             //获取tbody中的所有tr元素,返回的也是新包装集

             //$("tbody").children("tr").css("color","blue");

             //获取tbody中的等于3的tr子元素,返回的也是新包装集

             //$("tbody").children("tr:eq(3)").css("color", "blue");

             //找到下一个子元素，只是一个元素，返回新包装集

             //$("tr#abc").next().css("color","blue");

             //找到下一个组兄弟元素，所有元素，返回新包装集

             //$("tr#abc").nextAll().css("color", "blue");

             //parent仅仅只是返回上一级的div，返回新包装集

             //$("#s1").parent("div").css("color","blue");

             //返回所有满足条件的父类节点，返回新包装集

             //$("#s1").parents("div").css("color", "blue");

             //closest是从自己开始往上找，返回找到的第一个满足条件的节点，返回新包装集

             //$("#s1").closest("div").css("color", "blue");

             //返回第3个tr的所有兄弟节点，但不包含自己（第3个tr），返回新包装集

             //$("tr:eq(2)").siblings("tr").css("color", "blue");

             //返回第3个tr的所有兄弟节点，但不包含自己（第3个tr），判断兄弟节点中有没有tr id=abc元素，返回新包装集

             //window.alert($("tr:eq(2)").siblings("tr").is("tr#abc"));

         });

     </script>

 </head>

 <body>

     <div>

         abc

         <div id="d1">

             def

             <div>

                 123

                 <span id="s1">456</span>

             </div>

         </div>

     </div>

     <table width="700" border="1" align="center">

         <thead>

             <tr>

                 <td>用户标识</td>

                 <td>用户姓名</td>

                 <td>用户年龄</td>

                 <td>用户密码</td>

             </tr>

         </thead>

         <tbody>

             <tr id="abc">

                 <td>1</td>

                 <td>张三</td>

                 <td>23</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>李四</td>

                 <td>33</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>王五</td>

                 <td>13</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>赵六</td>

                 <td>45</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>朱七</td>

                 <td>21</td>

                 <td>abc123</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

jquery_wrap03_slice_find_is_children_next_nextAll_parent_parents_closest_siblings

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>包装集-链式编程-add,end,andSelf,find,filter</title>

     <script src="js/jquery-1.8.2.js"></script>

     <script type="text/javascript">

         $(function () {

             //将第三个tr之外的所有tr的color设置为blue，backgroundcolor设置为green

             //$("tr:eq(2)").siblings("tr").css("color", "blue").css("background-color", "green");

             //将第三个tr之外的所有tr的color设置为blue，backgroundcolor设置为green，在将第三个tr设置为backgroundcolor设置为red。使用end()方法返回上一个包装集

             //$("tr:eq(2)").siblings("tr").css("color", "blue").css("background-color", "green").end().css("background-color","red");

             //复制user2的table中的tbody内容，添加到user1中

             //$("#user2 tbody").clone().appendTo("#user1");

             //复制user2的table中的tbody内容，添加到user1中，同时给user1设置color=blue

             //$("#user2 tbody").clone().appendTo("#user1").css("color", "blue");

             //复制user2的table中的tbody内容，添加到user1中，同时又添加了偶数行的tr后，在设置color=blue

             //$("#user2 tbody").clone().appendTo("#user1").add("tr:even").css("color", "blue");

             //filter实在当前的包装集（user1）中进行过滤，它是找不到tr:even

             //$("#user2 tbody").clone().appendTo("#user1").filter("tr:even").css("color", "blue");

             //find实在当前的包装集（user1）的内部进行查找，所以它是能找到tr:even

             //$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue");

             //给user1的偶数行tr设置color=blue之后，再给原包装集user2设置color=blue，需要使用end()得到上一个包装集。使用两次end().end()就能找到user2的包装集了。

             //$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue").end().end().css("color", "blue");

             //上面这个例子如果只使用了一次end(),那么它会找到clone()之后的包装集

             //$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue").end().css("color", "blue");

             //andSelf()把当前所有的包装集合并在一起,设置color=blue

             //$("#user2 tbody").clone().appendTo("#user1").andSelf().find("tr:even").css("color", "blue");

         });

     </script>

 </head>

 <body>

     <table id="user1" width="700" border="1" align="center"></table>

     <table width="700" border="1" align="center" id="user2">

         <thead>

             <tr>

                 <td>用户标识</td>

                 <td>用户姓名</td>

                 <td>用户年龄</td>

                 <td>用户密码</td>

             </tr>

         </thead>

         <tbody>

             <tr id="abc">

                 <td>1</td>

                 <td>张三</td>

                 <td>23</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>李四</td>

                 <td>33</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>王五</td>

                 <td>13</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>赵六</td>

                 <td>45</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>朱七</td>

                 <td>21</td>

                 <td>abc123</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

jquery_wrap04_add_end_andSelf_find_filter

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>包装集-链式编程-find,filter,仅在当前包装集过滤,和在包装集内部的元素上进行查找的区别</title>

     <script src="js/jquery-1.8.2.js"></script>

     <script type="text/javascript">

         $(function () {

             //查询出了两个table包装集，一个为user1的table一个为user2的table，此时可以过滤得到users这个table

             //$("table").filter("table#user1").css("color", "blue");

             //如果想过滤tr的话，那是不行的，因为filter只能对当前包装集操作，而不能对当前包装集内部的元素进行操作。

             //$("table").filter("tr").css("color", "blue");

             //解决方法1是增加tr这个包装集到源包装集中

             //$("table").add("tr").filter("tr").css("color", "blue");

             //解决方法2是使用find方法在包装集内部的元素中进行查找

             $("table").find("tr").css("color", "blue");

         });

     </script>

 </head>

 <body>

     <table id="user1" width="700" border="1" align="center">

         <thead>

             <tr>

                 <td>用户标识</td>

                 <td>用户姓名</td>

                 <td>用户年龄</td>

                 <td>用户密码</td>

             </tr>

         </thead>

         <tbody>

             <tr id="abc">

                 <td>1</td>

                 <td>张三</td>

                 <td>23</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>李四</td>

                 <td>33</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>王五</td>

                 <td>13</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>赵六</td>

                 <td>45</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>朱七</td>

                 <td>21</td>

                 <td>abc123</td>

             </tr>

         </tbody>

     </table>

     <table width="700" border="1" align="center" id="user2">

         <thead>

             <tr>

                 <td>用户标识</td>

                 <td>用户姓名</td>

                 <td>用户年龄</td>

                 <td>用户密码</td>

             </tr>

         </thead>

         <tbody>

             <tr id="abc">

                 <td>1</td>

                 <td>张三</td>

                 <td>23</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>2</td>

                 <td>李四</td>

                 <td>33</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>3</td>

                 <td>王五</td>

                 <td>13</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>4</td>

                 <td>赵六</td>

                 <td>45</td>

                 <td>abc123</td>

             </tr>

             <tr>

                 <td>5</td>

                 <td>朱七</td>

                 <td>21</td>

                 <td>abc123</td>

             </tr>

         </tbody>

     </table>

 </body>

 </html>

jquery_wrap05_filter_wrap_find_wrapinnerelement

05-06 12:30
Powered by LMLPHP ©2024 包装集 0.091577