選擇器允許您對元素組或單個元素進行操作。
jQuery 選擇器
在前面的章節中，我們展示了一些有關如何選取 HTML 元素的實例。
關鍵點是學習 jQuery 選擇器是如何准確地選取您希望應用效果的元素。
jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內容對 HTML 元素進行選擇。
選擇器允許您對 HTML 元素組或單個元素進行操作。
在 HTML DOM 術語中：
選擇器允許您對 DOM 元素組或單個 DOM 節點進行操作。
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色：
實例
$("p").css("background-color","red");
更多的選擇器實例
| 語法 | 描述 |
|---|---|
| $(this) | 當前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每個 <ul> 的第一個 <li> 元素 |
| $("[href$='.jpg']") | 所有帶有以 ".jpg" 結尾的屬性值的 href 屬性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
jQuery 語法實例
- $(this).hide()
- 演示 jQuery hide() 函數，隱藏當前的 HTML 元素。
- $("#test").hide()
- 演示 jQuery hide() 函數，隱藏 id="test" 的元素。
- $("p").hide()
- 演示 jQuery hide() 函數，隱藏所有 <p> 元素。
- $(".test").hide()
- 演示 jQuery hide() 函數，隱藏所有 class="test" 的元素。
-
jQuery 語法
jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
示例
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。
文檔就緒函數
您也許已經注意到在我們的實例中的所有 jQuery 函數位於一個 document ready 函數中：
$(document).ready(function(){ --- jQuery functions go here ---- });這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：
- 試圖隱藏一個不存在的元素
- 獲得未完全加載的圖像的大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style/hdw.css"/> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('a').click(function(){ alert("點擊我哈哈"); }); $('input:text').click(function(){ alert("這是一個文本框"); }); $('input:checkbox').click(function(){ alert("checkbox"); }); $('.hdw').click(function(){ alert("hdw"); }); $('#div').click(function(){ alert("div"); }); }); </script> </head> <body> <a href="#">點擊彈出</a> <input type="text"/> <input type="text" /> <input type="text" /> <input type="text" /> <input type="text" /> <input type="checkbox" /> <div class="hdw" style="width:100px; height:100px; background:#ccc; border:1px solid #000;"></div> <div id="div" style="width:100px; height:100px; background:#ccc;"></div> <div style="width:100px; height:100px; background:#ccc;border:1px solid #000;"></div> <div style="width:100px; height:100px; background:#ccc;"></div> <div style="width:100px; height:100px; background:#ccc;border:1px solid #000;"></div> </body> </html>