JQuery之选择集转移

JQuery之选择集转移方法如下图:

所谓选择集,就是通过$()方法获取到的所有标签的集合。

 代码实现:

 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>
该花的钱要花,该吃的饭要吃。
原文地址:https://www.cnblogs.com/chao666/p/12018380.html