The Write Less , Do More ! jQuery選擇器 1. #id : 根據給定的ID匹配一個元素 結果: 這是第一個p標簽 這是第二個p標簽 2. element : 根據給定的元素標簽名匹配所有元素 結果: 這是div標簽1 這是div標簽2 這是p標簽 3. .class ...
The Write Less , Do More !
jQuery選擇器
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">