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>