1 <script src="JS/jquery-1.12.4.min.js"></script>
2 <script>
3 $(function(){
4 var $div1 = $('#div1');
5 $div1.prev().css({
6 // 获取当前元素的上一个同级别的元素
7 'color':'red'
8 });
9 $div1.prevAll().css({
10 // 获取当前元素上面的所有同级别元素
11 'font-size' : '20px'
12 });
13 $div1.next().css({
14 // 获取当前元素的下一个同级别元素
15 'color':'blue'
16 });
17 $div1.nextAll().css({
18 // 获取当前元素下面的所有同级别元素
19 'font-size':'20px'
20 });
21 });
22 $(function(){
23 var $div3 = $('#div3');
24 $div3.parent().css({
25 // 获取当前元素的父元素
26 'background':'red'
27 });
28 $div3.parent().parent().css({
29 // 获取当前元素的爷爷元素
30 'background':'blue'
31 });
32 $div3.children().css({
33 // 获取当前元素的所有孩子元素
34 'background':'yellow'
35 });
36 $div3.siblings().css({
37 // 获取当前元素的所有兄弟元素
38 'background':'pink'
39 });
40 // $div3.find('.spn1').css({
41 // // 在当前元素内查找class名为spn1的元素
42 // 'font-size':30
43 // });
44 $div3.find('#spn1').css({
45 // 在当前元素内查找class名为spn1的元素
46 'font-size':99
47 });
48 });
49 </script>
50
51
52 <body>
53 <h1>h1</h1>
54 <h2>h2</h2>
55 <h3>h3</h3>
56 <div id="div1"></div>
57 <h4>h4</h4>
58 <h5>h5</h5>
59 <h6>h6</h6>
60
61 <div>祖
62 <div >父
63 <div>子兄弟1</div>
64
65 <div id="div3" style="background: brown;">子
66 <div>孙</div>
67 <div>
68 <div>
69 <span id="spn1" class="spn1">gfgjkkhdsfhgvjskadugjvkoiuvjhfdsyiufhdsjou</span>
70 </div>
71 </div>
72
73
74 </div>
75 <div>子兄弟2</div>
76 <div>子兄弟3</div>
77
78
79 </div>
80 </div>
81 </body>