jQuery的61種選擇器及示例
彙總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>