jQuery Selector 選取網頁中元素的各種方式

1. 簡單選取器

先來看最常用也是最簡單的選取方式，基本上就和 CSS 的語法是一樣的：
注意：底下的描述都先省略的 $()，你在使用的時候要記得加上 $()，而且括號中若是文字字串要記得加上雙引號，例如 $("p")。

• *：選取任何元素。
• HTML標籤名稱：選擇指定標籤的 HTML 元素，例如 $("p") 會選擇網頁中所有的 <p>。
• .CSS類別名稱：選擇指定類別的 HTML 元素，注意有個點。例如 $(".myClassName") 會選擇網頁中所有擁有 myClassName 類別的元素。你也可以再加上 HTML 標籤名稱，也就是將兩種選取器組合在一起，例如 $("div.myClassName") 會選擇所有 <div class="myClassName"> 的 div 元素，而沒有這個類別名稱的 div 就不會被選取。
• #ID名稱：選擇指定 ID 的 HTML 元素，注意是個井字號。例如 $("#myid") 會選擇網頁中 id 名稱叫做 myid 的元素。同樣的可以在井字號前面加上 HTML 標籤名稱，例如 $("div#myid")。但這樣的寫法式沒必要的，基本上同一頁裡面 id 名稱是不會重複的，也最好不要重複，所以應該只會選取出一個元素。
• 選取器1,選取器2,選取器N：將多個選取器集合在一起，中間用逗號分隔，和CSS類似。會一次選擇出符合這些選取器的所有元素，只要符合其中某一個就會被選出。

2. 層級選取器

兩個（或以上）元素組合的選取方式，也是 CSS 選取方式的一種：

• 第一個元素 第二個元素：兩個元素中間空一格。例如 $("div li") 會選取出包含在 div 底下的所有 li 元素，不管中間相隔幾層都沒關係。若是 li 的任何一個外層都沒 div 的話就不會被選取，也就是說 li 必須是 div 的子孫。
• 第一個元素 > 第二個元素：比剛剛多個大於符號。例如 $("ol > li") 會選取出所有 li，而且這些 li 的 "父親" 必須是 ol，若中間還相隔了幾層就不算了！第二個元素必須是第一個元素的孩子（而不是孫子或曾孫...）。
• 第一個元素 + 第二個元素：兩個元素在同一層（是兄弟關係），而且第二個元素必須緊連著第一個元素。例如大哥和二哥可以，二哥和三哥可以，大哥和三哥就選取不到了。你可以在互動式的 jQuery 選取方式測試頁面中輸入 h1 + div 來測試看看就知道效果了。
• 第一個元素 ~ 第二個元素：兩個元素在同一層（是兄弟關係），但不需要緊連著。一樣你可以在測試頁面中輸入 h1 ~ div 來測試看看。

也可以用三個或更多元素來做層級的選取，例如：$("ol > li span + a")。這些規則看起來好像有點小複雜，不過若你熟悉 CSS 的語法就知道和 CSS 的選取方式是相同的。

3. 子元素選取器

如果想選擇子元素，除了剛剛所說的方式，還有更方便作法，和 CSS 語法也是十分類似的：

• :first-child：選取指定元素，而且它是它父元素的第一個孩子，不管它的父元素叫什麼。例如 $("li:first-child") 會選取第一個 li。
• :last-child：選取指定元素，而且它是它父元素的最後一個孩子，不管它的父元素叫什麼。例如 $("li:last-child") 會選取最後一個 li。
• :only-child：選取指定元素，而且它必須是父元素唯一的一個孩子，不管它的父元素叫什麼。
• :nth-child(數字)：選取指定元素，而它是父元素的第 n 個孩子，n 就是那個數字。例如 $("li:nth-child(5)")。

4. 定位篩選選取器

如果要根據編號或排列的順序來選取特定位置上面的元素，或是過濾掉特定的元素，可以使用這些選取器：

• :first：符合的第一個元素，例如 $("tr:first") 會選取表格的第一行。
• :last：符合的最後一個元素，例如 $("tr:first") 會選取表格的最後一行。
• :not：過濾掉所有符合指定選擇器的元素，例如 $("input:not(:checked)") 會選取所有未勾選的 input 元素。
• :even：索引值為偶數的元素，從 0 開始計算。例如 $("tr:even") 會選取表格的第 1, 3, 5 ... 行（索引值是 0, 2, 4）。
• :odd：索引值為奇數的元素，從 0 開始計算。例如 $("tr:odd") 會選取表格的第 2, 4, 6 ... 行。
• :eq：索引值與指定的值相等的元素，例如 $("tr:eq(0)") 會選取表格的第 1 行。
• :gt：索引值大於指定值的元素，例如 $("tr:gt(0)") 會選取表格的第 2 行和其以後的行。
• :lt：索引值小於指定值的元素。
• :header：選取如 h1, h2, h3... 標題元素。
• :animated：選取所有正在執行動畫效果的元素。

5. 內容篩選選取器

根據元素內的文字內容，或是子元素來做篩選的選取方式。

• :contains：元素內是否有包含指定的文字，例如 $("h2:contains('選取器')") 會選出標題文字內含有 "選取器" 這幾個字的 h2 元素。
• :has：元素內是否有包含指定的元素，例如 $("p:has(span)") 會選出內容中包含 span 元素的 p 元素。
• :empty：選取指定元素，而且它必須沒有任何子元素，也沒有內容文字，即文字節點 (text node) 也不能有。
• :parent：選取有子元素或內容文字，是其他元素父親的元素，即內容不是空的，和 :empty 剛好相反。例如 $("li:parent")，只會選出內容不是空的 <li>。

6. 顯示性選取器

根據元素是顯示或隱藏來選取。

• :hidden：選出看不見、或類型為 hidden 的所有指定元素，例如 $("div:hidden")。
• :visible：選出看得見的所有指定元素，例如 $("p:visible")。

7. 屬性選取器

還可以根據元素中是否有某個屬性來做選取，都會使用中括號作為區分：

• [屬性名稱]：含有指定屬性名稱的元素，例如 $("p[class]") 會選取有 class 這個屬性的所有 <p>。
• [屬性名稱=屬性值]：含有指定屬性名稱的元素，而且屬性值必須和指定的值完全相等，例如 $("p[class=theClassName]")。
• [屬性名稱!=屬性值]：不含有指定屬性名稱，或是屬性值不等於指定值的元素。

若要選取含有指定的屬性名稱，但值不相等時，可以使用 [屬性名稱]:not[屬性名稱=屬性值]。

• [屬性名稱^=屬性值]：含有指定屬性名稱的元素，而且那個屬性值的 "開頭" 必須是指定的值，例如 $("p[class^=the]")。
• [屬性名稱$=屬性值]：含有指定屬性名稱的元素，而且那個屬性值的 "結尾" 必須是指定的值，例如 $("p[@class$=Name]")。
• [屬性名稱*=屬性值]：含有指定屬性名稱的元素，而且那個屬性值的任何部分必須 "包含" 指定的值，例如 $("p[@class*=ass]")。
• [屬性選取器1][屬性選取器2][屬性選取器N]：組合選取器，可以在需要同時滿足多個條件時使用。

8. 表單選取器

這些是 jQuery 自訂虛擬類別選擇器，可以用來選取各種表單 ui 元素。

• :input：選取所有 <input> 元素。
• :text：選取所有單行文字欄位。
• :password：選取所有密碼欄位。
• :radio：選取所有圓鈕。
• :checkbox：選取所有核取方塊。
• :submit：選取所有送出表單按鈕。
• :image：選取所有 <input type="image"> 的元素。
• :reset：選取所有重設表單按鈕。
• :button：選取所有按鈕。
• :file：選取所有檔案選擇欄位。
• :hidden：選取所有隱藏欄位。

9. 表單狀態選取器

根據表單元素的屬性，是否勾選或啟用來做選取。

• :enabled：選取指定表單 ui 元素，而且它不是 disabled 失效的。
• :disabled：選取指定表單 ui 元素，而且它不是 enabled 啟用的。
• :checked：選取指定表單 ui 元素，而且它已經被選擇，例如圓鈕和核取方塊。
• :selected：選取指定表單 ui 元素，而且它已經被選擇，例如下拉選單中的一個或多個選項。

資料來源:網路城市學習筆記。取自http://stan0926.blogspot.tw/