進階選擇器：

1. 群組選擇器 ? ? $("span,em,#box") ? 獲取多個選擇器的DOM對象

<div id="d1">div</div><div>div</div><div>div</div><p class="c1">p</p><p class="c1">p</p><p>p</p><strong>strong</strong><strong>strong</strong><strong>strong</strong> div,p,strong{color:red; }#d1,.c1,strong{color:red; } $("div,p,strong").css("color", "red");$("#d1,.c1,strong").css("color", "red");

?

2. 后代選擇器 ? ? ?$("ul li a") ? ? 獲取追溯的多個DOM對象

<ul><li><a href="###">首頁</a></li><li><a href="###">首頁</a></li><li><em>首頁</em></li><li><strong>首頁</strong></li></ul><a href="###">首頁</a><a href="###">首頁</a><p>首頁</p><p>首頁</p><span>首頁</span><span>首頁</span> ul li a{color:green; } $("ul li a").css("color", "green");

?

3. 通配器選擇器 ? ?$("*") ? ?獲取所有元素標簽的DOM對象

*{color:orange; }ul li *{color:green; } alert($("*").size()); //通配符選擇器alert($("*")[5].nodeName);$("*").css("color", "blue"); //在全局范圍使用*，會極大的消耗資源，所以不建議在全局使用$("ul li *").css("color", "red"); //統配選擇器應用在局部的環境內

?

4.限定選擇器?

5.多class選擇器

<div class="c1 c2">div</div><p class="c1">p</p><div class="c2">div</div><p class="c1">p</p> div.c1{color:red;.c1.c2{color:green; $("div.c2").css("color", "red"); //限定選擇器$(".c1.c2").css("color", "blue");//多class選擇器

?

6. 在構造選擇器時，有一個通用的優化原則：只主球必要的確定性

$("div$box p ul li a#link") //可以，選擇器越復雜，那么字符串解析就越慢$("#link");//單個ID不需要字符串解析，就可以獲取到

?

轉載于:https://www.cnblogs.com/xiao9426926/p/6639517.html

總結

以上是生活随笔為你收集整理的jQuery_2_常规选择器-进阶选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。