JQuery--关系选择器

 

 

 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .color{
  8             background-color: pink;
  9         }
 10         .bdcolor{
 11             border: 1px solid #f00;
 12         }
 13     </style>
 14     <script src="lib/jquery-1.12.2.js"></script>
 15     <script>
 16         $(function () {
 17 
 18 
 19         /**
 20          *  父 parent()
 21          *      祖先parents()
 22          *  子 children()
 23          *      后代  find()
 24          *  兄弟  siblings()
 25          *
 26          *  后面的一个兄弟
 27          *  .next()
 28          *  后面的所有兄弟
 29          *  .nextAll()
 30          *
 31          *  前面的兄弟
 32          *  .prev()
 33          *  前面的所有的兄弟
 34          *  .prevAll()
 35          *  
 36          * */
 37 
 38 //        $('.item').parent().addClass('bdcolor');
 39 //        $('.father').children().addClass('bdcolor');
 40 //
 41 //        // 同样效果的两行代码
 42 //        $('.father').children('.item').addClass('bdcolor');
 43 //        $('.father > .item').addClass('bdcolor');
 44 //
 45 //        //只选中兄弟不选择自己
 46 //        $('.item').sibling().addClass('bdcolor');
 47 //
 48 //        $('.item').next().addClass('bdcolor');
 49 //        $('.item').nextAll().addClass('bdcolor');
 50 
 51 
 52 //        $('.item').prev().addClass('bdcolor');
 53 //        $('.item').prevAll().addClass('bdcolor');
 54 
 55 
 56 //        子代： .children()
 57 //        后代:  .find()
 58           $('.content').find('.son').addClass('bdcolor');
 59           $('.content .son2').addClass('color');
 60           
 61 //        父级：.parent()
 62 //        祖先: .parents()
 63           $('.son').parents('.content').addClass('bdcolor');
 64         });
 65     </script>
 66 </head>
 67 <body>
 68 <div class="content">
 69     <ul class="father">
 70         <li>0001</li>
 71         <li>0002</li>
 72         <li class="item">0003</li>
 73         <li>0004</li>
 74         <li>0005
 75             <ul class="son">
 76                 <li>儿子001</li>
 77                 <li>儿子002</li>
 78                 <li>儿子003</li>
 79             </ul>
 80             <ul class="son2">
 81                 <li>儿子001</li>
 82                 <li>儿子002</li>
 83                 <li>儿子003</li>
 84             </ul>
 85         </li>
 86         <li>0006</li>
 87         <li>0007</li>
 88         <li>0008</li>
 89         <li>0009</li>
 90         <li>0010</li>
 91         <li>0011</li>
 92         <li>0012</li>
 93         <li>0013</li>
 94         <li>0014</li>
 95         <li>0015</li>
 96         <li>0016</li>
 97         <li>0017</li>
 98         <li>0018</li>
 99         <li>0019</li>
100         <li>0020</li>
101     </ul>
102 </div>
103 </body>
104 </html>

 

posted @ 2017-11-02 21:25  QinXiao.Shou  阅读(838)  评论(0)    收藏  举报