測試jQuery模板 簡單選擇器 元素選擇器 獲取所有 p 元素並設置字體顏色為紅色 ID選擇器 ID在頁面只允許出現一次 將 id 為 xiu 元素設置字體顏色為紅色 class選擇器 class 可以多次出現 獲取所有 class 為 xiu 元素並設置字體顏色為紅色 進價選擇器 群組選擇器 同 ...
jQuery選擇器
測試jQuery模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 引用線上jQuery文件 --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <title>jQuery 選擇器</title> </head> <body> <!-- 將下麵測試代碼放在 body 裡面 --> </body> </html>
簡單選擇器
- 元素選擇器
獲取所有 p 元素並設置字體顏色為紅色
<p>讓努力成為一種習慣</p> <script> $("p").css("color","red") </script>
- ID選擇器
ID在頁面只允許出現一次
將 id 為 xiu 元素設置字體顏色為紅色
<p id="xiu">讓努力成為一種習慣</p> <script> $("#xiu").css("color","red") </script>
- class選擇器
class 可以多次出現
獲取所有 class 為 xiu 元素並設置字體顏色為紅色
<p class="xiu">讓努力成為一種習慣</p> <script> $(".xiu").css("color","red") </script>
進價選擇器
- 群組選擇器
同時選擇兩個或以上叫群組選擇器,每個元素用逗號隔開
將 id 為 xiu,id為 kang 的元素設置字體顏色為紅色
<p id="xiu">讓努力成為一種習慣</p> <p id="kang">讓努力成為一種習慣</p> <script> $("#xiu,#kang").css("color","red") </script>
- 後代選擇器
選擇元素的後代元素
將 ul 標簽裡面的 a 標簽設置字體顏色為紅色
<ul> <li> <a href="#">超鏈接</a> </li> </ul> <script> $("ul a").css("color","red") </script>
- 通配選擇器
選擇所有元素,一般用的並不多,這種方法效率低,影響性能,建議少用
將所有元素設置字體顏色為紅色
<p id="xiu">讓努力成為一種習慣</p> <p id="kang">讓努力成為一種習慣</p> <script> $("*").css("color","red") </script>
層次選擇器
- 後代選擇器
選擇元素的後代元素
將 ul 標簽裡面的 a 標簽設置字體顏色為紅色
<ul> <li> <a href="#">超鏈接</a> </li> </ul> <script> $("ul a").css("color","red") </script>
jQuery為後代選擇器提供了一個等價find()方法
將 ul 標簽裡面的 a 標簽設置字體顏色為紅色
<ul> <li> <a href="#">超鏈接</a> </li> </ul> <script> $("ul").find("a").css("color","red") </script>
- 子選擇器
選擇元素的子元素
將 li 標簽的子元素 a 標簽設置字體顏色為紅色
<ul> <li> <a href="#">超鏈接</a> </li> </ul> <script> $("li > a").css("color","red") </script>
jQuery為子選擇器提供了一個等價children()方法
將 li 標簽的子元素 a 標簽設置字體顏色為紅色
<ul> <li> <a href="#">超鏈接</a> </li> </ul> <script> $("li").children("a").css("color","red") </script>
- next選擇器
選擇下一個同級節點
選擇 id 為 xiu 的第一個同級節點 id 為 kang 的元素設置字體顏色為紅色
<p id="xiu">讓努力成為一種習慣</p> <p id="kang">讓努力成為一種習慣</p> <script> $("#xiu+#kang").css("color","red") </script>
jQuery為next選擇器提供了一個等價next()方法
選擇 id 為 xiu 後面第一個同級節點 id 為 kang 的元素設置字體顏色為紅色
<p id="xiu">讓努力成為一種習慣</p> <p id="kang">讓努力成為一種習慣</p> <script> $("#xiu").next("#kang").css("color","red") </script>
- nextAll選擇器
選擇後面所有同級節點
選擇 class 為 xiu 後面所有同級節點 class 為 kang 的元素設置字體顏色為紅色
<p class="xiu">讓努力成為一種習慣</p> <p class="kang">讓努力成為一種習慣</p> <p class="kang">讓努力成為一種習慣</p> <script> $(".xiu ~ .kang").css("color","red") </script>
jQuery為nextAll選擇器提供了一個等價nextAll()方法
選擇 class 為 xiu 後面所有同級節點 class 為 kang 的元素設置字體顏色為紅色
<p class="xiu">讓努力成為一種習慣</p> <p class="kang">讓努力成為一種習慣</p> <p class="kang">讓努力成為一種習慣</p> <script> $(".xiu").nextAll(".kang").css("color","red") </script>
屬性選擇器
獲取屬性為 href 的 DOM 對象並設置字體顏色為紅色
<a href="#">超鏈接</a> <script> $("a[href]").css("color","red") </script>
獲取屬性為 href 且屬性值為 # 的 DOM 對象並設置字體顏色為紅色
<a href="#">超鏈接</a> <script> $("a[href=#]").css("color","red") </script>
獲取屬性為 href 且屬性值開頭為 abc 的 DOM 對象並設置字體顏色為紅色
<a href="abcdef">超鏈接</a> <script> $("a[href ^= abc]").css("color","red") </script>
獲取屬性為 href 且屬性值開頭為 abc(連接符'-'前面的) 的 DOM 對象並設置字體顏色為紅色
<a href="abc-def">超鏈接</a>
<script>
$("a[href |= abc]").css("color","red")
</script>
獲取屬性為 href 且屬性值結尾為 def 的 DOM 對象並設置字體顏色為紅色
<a href="abcdef">超鏈接</a> <script> $("a[href $= def]").css("color","red") </script>
獲取屬性為 href 且屬性值不是 xx 的 DOM 對象並設置字體顏色為紅色
<a href="#">超鏈接</a> <script> $("a[href != xx]").css("color","red") </script>
獲取屬性為 href 且屬性值為 # 的 DOM 對象並設置字體顏色為紅色
<a href="#">超鏈接</a> <script> $("a[href ~= #]").css("color","red") </script>
獲取屬性為 href 且屬性值包含 xx 的 DOM 對象並設置字體顏色為紅色
<a href="abxxcd">超鏈接</a> <script> $("a[href *= xx]").css("color","red") </script>
獲取屬性為 href 和屬性為 title 且值為 xx 的 DOM 對象並設置字體顏色為紅色
<a href="#" title="xx">超鏈接</a> <script> $("a[href][title=xx]").css("color","red") </script>
基本過濾器
選擇第一個 p 元素並設置字體顏色為紅色
<p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:first").css("color","red") </script>
選擇最後一個 p 元素並設置字體顏色為紅色
<p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:last").css("color","red") </script>
選擇第3個 p 元素並設置字體顏色為紅色(選擇索引從0開始)
<p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:eq(2)").css("color","red") </script>
選擇索引小於3的所有 p 元素並設置字體顏色為紅色(選擇索引從0開始)
<p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:lt(3)").css("color","red") </script>
選擇索引大於0的所有 p 元素並設置字體顏色為紅色(選擇索引從0開始)
<p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:gt(0)").css("color","red") </script>
選擇 class 不是 xiu 的 p 元素並設置字體顏色為紅色
<p class="xiu">讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:not(.xiu)").css("color","red") </script>
選擇索引為偶數的 p 元素並設置字體顏色為紅色
<p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:even").css("color","red") </script>
選擇索引為奇數的 p 元素並設置字體顏色為紅色
<p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <p>讓努力成為一種習慣</p> <script> $("p:odd").css("color","red") </script>
選擇所有標題元素(h1~h6)
<h1>讓努力成為一種習慣</h1> <h3>讓努力成為一種習慣</h3> <h5>讓努力成為一種習慣</h5> <script> $(":header").css("color","red") </script>
將正在執行的動畫背景元素設置為藍色
<div class="xiu" style="width : 100px;height : 100px;background : red"></div> <script> $(".xiu").hide(10000); $(":animated").css("