<jQuery> <选择器> 四. 子代选择器和后代选择器 

 1 <!DOCTYPE html>
 2 <html lang="cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="father">
 9         <div class="red">1</div>
10         <div>2
11             <p>21</p>
12             <p>22</p>
13             <p>23</p>
14             <p>21</p>
15             <p>22</p>
16             <p>23</p>
17         </div>
18         <div class="green">3</div>
19         <p>4</p>
20         <p id="green">5</p>
21         <p>6</p>
22 </div>
23 </body>
24 <script src="jquery-2.1.1.min.js"></script>
25 <script>
26     /*
27     * $("s1s2")     交集选择器
28     * $("s1, s2")   并集选择器
29     * $("s1 > s2")  子代选择器
30     * $("s1 s2)     后代选择器
31     * */
32 
33     // 后代选择器
34     $("#father p").css("backgroundColor", "pink");
35 
36     // 子代选择器
37     $("#father>p").css("backgroundColor", "blue");
38 
39     // 交集选择器
40     $("div.red").css("backgroundColor", "red");
41 
42     // 并集选择器
43     $(".green, #green").css("backgroundColor", "green");
44 
45     // 过滤选择器, even下标为基数的标签
46     $("div>div>p:even").css("backgroundColor", "cyan");
47 
48     // 过滤选择器, eq等于下标为多少的标签
49     $("div>div>p:eq(2)").css("backgroundColor", "orange");
50 
51 </script>
52 </html>

 

posted @ 2017-12-15 16:58  云淡风轻我爱编程  阅读(8997)  评论(0)    收藏  举报