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>
