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>