彙總jQuery的61種選擇器及示例

1. #id : 根據給定的ID匹配一個元素

<p id="myId">這是第一個p標籤</p>
<p id="not">這是第二個p標籤</p>
<script type="text/javascript">
    $(function(){
        $("#myId").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

2. element : 根據給定的元素標籤名匹配所有元素

<div>這是div標籤1</div>
<div>這是div標籤2</div>
<p>這是p標籤</p>
<script type="text/javascript">
    $(function(){
        $("div").css("color","red");
    });
</script>

結果：

這是div標籤1

這是div標籤2

這是p標籤

3. .class : 根據給定的css類名匹配元素

<p class="myClass">這是第一個p標籤</p>
<p class="not">這是第二個p標籤</p>
<script type="text/javascript">
    $(function(){
        $(".myClass").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

4. * : 匹配所有元素，多用於結合上下文來搜尋

<p>這是p標籤</p>
<div>這是div標籤</div>
<script type="text/javascript">
    $(function(){
        $("*").css("color","red");
    });
</script>

結果：

這是p標籤

這是div標籤

5. 多選擇器selector1,selector2,selectorN : 指定任意多個選擇器，並將匹配到的元素合併到一個結果內

<p class="myP">這是第一個p標籤</p>
<p class="not">這是第二個p標籤</p>
<div id="myDiv">這是第一個div標籤</div>
<div id="not">這是第二個div標籤</div>
<script type="text/javascript">
    $(function(){
        $("p.myP,div#myDiv").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

這是第一個div標籤

這是第二個div標籤

6. ancestor descendant : 在給定的祖先元素下匹配所有的後代元素

<div>
    <span>這是第一個span標籤</span>
    <p>
        <span>這是第二個span標籤</span>
    </p>
</div>
<script type="text/javascript">
    $(function(){
        $("div span").css("color","red");
    });
</script>

結果：

這是第一個span標籤

這是第二個span標籤

7. parent > child : 在給定的父元素下匹配所有的子元素

<div>
    <span>這是第一個span標籤</span>
    <p>
        <span>這是第二個span標籤</span>
    </p>
</div>
<script type="text/javascript">
    $(function(){
        $("div > span").css("color","red");
    });
</script>

結果：

這是第一個span標籤

這是第二個span標籤

8. prev + next : 匹配所有緊接在 prev 元素後的 next 元素

<div></div>
<p>這是第一個p標籤</p>
<p>這是第二個p標籤</p>
<script type="text/javascript">
    $(function(){
        $("div + p").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

9. prev ~ siblings : 匹配 prev 元素之後的所有 siblings 同輩元素

<p>這是第一個p標籤</p>
<div>
    <p>這是第二個p標籤</p>
</div>
<p>這是第三個p標籤</p>
<script type="text/javascript">
    $(function(){
        $("div ~ p").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

這是第三個p標籤

10. :first : 獲取第一個元素

<div>
    <p>這是第一個p標籤</p>
    <p>這是第二個p標籤</p>
    <p>這是第三個p標籤</p>
</div>
<script type="text/javascript">
    $(function(){
        $("p:first").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

這是第三個p標籤

11. :not(selector) : 去除所有與給定選擇器匹配的元素

<p class="del">這是第一個p標籤</p>
<p class="del">這是第二個p標籤</p>
<p>這是第三個p標籤</p>
<script type="text/javascript">
    $(function(){
        $("p:not(.del)").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

這是第三個p標籤

12.:even : 匹配所有索引值為偶數的元素，從 0 開始計數

<p>這是索引值為0的p標籤</p>
<p>這是索引值為1的p標籤</p>
<p>這是索引值為2的p標籤</p>
<p>這是索引值為3的p標籤</p>
<script type="text/javascript">
    $(function(){
        $("p:even").css("color","red");
    });
</script>

結果：

這是索引值為0的p標籤

這是索引值為1的p標籤

這是索引值為2的p標籤

這是索引值為3的p標籤

13. :odd : 匹配所有索引值為奇數的元素，從 0 開始計數

<p>這是索引值為0的p標籤</p>
<p>這是索引值為1的p標籤</p>
<p>這是索引值為2的p標籤</p>
<p>這是索引值為3的p標籤</p>
<script type="text/javascript">
    $(function(){
        $("p:odd").css("color","red");
    });
</script>

結果：

這是索引值為0的p標籤

這是索引值為1的p標籤

這是索引值為2的p標籤

這是索引值為3的p標籤

14. :eq(index) : 匹配一個給定索引值的元素

<p>這是索引值為0的p標籤</p>
<p>這是索引值為1的p標籤</p>
<p>這是索引值為2的p標籤</p>
<script type="text/javascript">
    $(function(){
        $("p:eq(1)").css("color","red");
    });
</script>

結果：

這是索引值為0的p標籤

這是索引值為1的p標籤

這是索引值為2的p標籤

15. :gt(index) : 匹配所有大於給定索引值的元素

<p>這是索引值為0的p標籤</p>
<p>這是索引值為1的p標籤</p>
<p>這是索引值為2的p標籤</p>
<script type="text/javascript">
    $(function(){
        $("p:gt(1)").css("color","red");
    });
</script>

結果：

這是索引值為0的p標籤

這是索引值為1的p標籤

這是索引值為2的p標籤

16. :lang(language) : 選擇指定語言的所有元素

<div lang="not">這是lang="not"的div標籤</div>
<div lang="en">這是lang="en"的div標籤</div>
<div lang="en-us">這是lang="en-us"的div標籤</div>
<script type="text/javascript">
    $(function(){
        $("div:lang(en)").css("color","red");
    });
</script>

結果：

這是lang=”not”的div標籤

這是lang=”en”的div標籤

這是lang=”en-us”的div標籤

17. :last() : 獲取最後個元素

<div>
    <p>這是第一個p標籤</p>
    <p>這是第二個p標籤</p>
    <p>這是第三個p標籤</p>
</div>
<script type="text/javascript">
    $(function(){
        $("p:last").css("color","red");
    });
</script>

結果：

這是第一個p標籤

這是第二個p標籤

這是第三個p標籤

18. :lt(index) : 匹配所有小於給定索引值的元素

<p>這是索引值為0的p標籤</p>
<p>這是索引值為1的p標籤</p>
<p>這是索引值為2的p標籤</p>
<script type="text/javascript">
    $(function(){
        $("p:lt(1)").css("color","red");
    });
</script>

結果：

這是索引值為0的p標籤

這是索引值為1的p標籤

這是索引值為2的p標籤

19. :header : 匹配如 h1, h2, h3之類的標題元素

<p>這是p標籤</p>
<h3>這是h3標籤</h3>
<h4>這是h4標籤</h4>
<script type="text/javascript">
    $(function(){
        $(":header").css("color","red");
    });
</script>

結果：

這是p標籤

這是h3標籤

這是h4標籤

20. :animated : 匹配所有正在執行動畫效果的元素

<!--對不在執行動畫的元素執行一個動畫-->
<button id="run">Run</button>
<div style="width:100px;height:100px;border:1px solid #f00;position:absolute;"></div>
<script type="text/javascript">
$(function(){
    $("#run").click(function(){
        $("div:not(:animated)").animate({left:100+"px"},1000);
    });
});

由於此處無法插入js程式碼，請自行復制程式碼檢視效果

21. :focus : 匹配當前獲取焦點的元素

<input type="text" />
<script type="text/javascript">
$(function(){
    $("input").focus();     //讓input自動獲取焦點
    $("input:focus").css("background","red");
});

結果：

22. :root : 選擇該文件的根元素，在HTML中，文件的根元素，和$(“:root”)選擇的元素一樣，永遠是<html>元素

<script type="text/javascript">
    $(":root").css("background-color","yellow");
</script>

 

23. :target : 選擇由文件URI的格式化識別碼表示的目標元素

例如，給定的URI http://example.com/#foo， $( “p:target” )，將選擇<p id=”foo”>元素。

 

24. :contains(text) : 匹配包含給定文字的元素

<div>boys</div>
<div>girls</div>
<div>boys and girls</div>
<script type="text/javascript">
    $(function(){
        $("div:contains('boys')").css("color","red");
    });
</script>

結果：

boys

girls

boys and girls

 

25. :empty : 匹配所有不包含子元素或者文字的空元素

<p>這是有內容的p標籤</p>
<p></p>
<p>這是有內容的p標籤</p>
<p></p>
<script type="text/javascript">
    $(function(){
        $("p:empty").css({"width":30,"height":30,"background":"red"});
    });
</script>

結果：

這是有內容的p標籤

這是有內容的p標籤

26. :has(selector) : 匹配含有選擇器所匹配的元素的元素

<div>這是包含p元素的div標籤
    <p>這是div標籤中的p標籤</p>
</div>
<div>這是沒有p元素的div標籤</div>
<script type="text/javascript">
    $(function(){
        $("div:has(p)").css("color","red");
    });
</script>

　　結果：

　　這是包含p元素的div標籤

　　這是div標籤中的p標籤

　　這是沒有p元素的div標籤

27. :parent : 匹配含有子元素或者文字的元素

<div>
    <p>這是div標籤中的p標籤</p>
</div>
<div>這是有內容的div標籤</div>
<div></div>
<script type="text/javascript">
    $(function(){
        $("div:parent").css("color","red");
    });
</script>

結果：

這是div標籤中的p標籤

這是有內容的div標籤

28. :hidden : 匹配所有不可見元素，或者type為hidden的元素

<div style="display: none;">這是隱藏的div標籤</div>
<div>這是顯示的div標籤</div>
<script type="text/javascript">
    $(function(){
       $("div:hidden").css("color","red");
　　　　console.log($("div:hidden"));    //結果：獲取到隱藏的div
    });
</script>

結果：

29. :visible : 匹配所有的可見元素

<div style="display: none;">這是隱藏的div標籤</div>
<div>這是顯示的div標籤</div>
<script type="text/javascript">
    $(function(){
        $("div:visible").css("color","red");
        console.log($("div:visible"));        //結果：獲取到顯示的div
    });
</script>

結果：

30. [attribute] : 匹配包含給定屬性的元素

<div class="myDiv">這是有類名的div標籤</div>
<div>這是沒類名的div標籤</div>
<script type="text/javascript">
    $(function(){
        $("div[class]").css("color","red");
    });
</script>