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>