jQuery 的 selector 主要有三種, 其目的在於選擇 HTML 中的元素:
1. HTML Tag - 例如 $('p')
可以選取所有
元素
2. 元素 ID - 例如 $('#myId')
選取 ID 為 myId 的特定元素
3. CSS 類別 - 例如 $('.myClass')
選取所有套用 myClass 類別的元素
在 jQuery 中就只有這三種標示法。不過如果事情那麼簡單的話, 我也不用花工夫來寫這篇文章了。事實上 jQuery 在以上三種選擇器之外, 又另外提供複雜而又功能強大的組合標示語法, 配合它的隱含迴圈運算, 讓我們可以更精準的選擇到我們想要的各種 HTML 元素; 我把這些組合標示語法整理如下:
Basic Selector
| 語法 | 範例 | 說明 |
| * | $( ' * ' ) | All Selector - 選取所有文件中的元素 |
| .class | $( ' .myClass ' ) | Class Selector - 選取所有套用指定 CSS 類別的元素 |
| tag | $ ( ' div ' ) | Element Selector - 選取類型為指定 tag 的元素 |
| ID | $ ( ' #myId ' ) | ID Selector - 選取指定 ID 的元素 |
| a, b, c, ... | $ ( ' .myClass, div, #myId ' ) | Multiple Selector - 以逗點區隔以選取各元素的聯集 |
Hierarchy
| 語法 | 範例 | 說明 |
| a > b | $( ' table > th ' ) | Child Selector - 選取 a 的下一層的直屬子元素 b 的集合 |
| a b | $( ' table th ' ) | Descendant Selector - 選取 a 的子代元素 b 的集合 |
| a + b | $( ' body + table ' ) | Next Adjacent Selector - 選取緊跟著 a 元素的 b 元素; 如範例中是選取 body 之下的第一個 table |
| a ~ b | $( ' p ~ span ') | Next Siblings Selector - 選取 a 以下的所有 b 元素; 這個 b 元素必須符合 sibling 篩選條件 |
Basic Filter
| :first | $( ' ul li:first ' ) | First Selector - 選取篩選的集合中的第一個元素 |
| :last | $( ' ul li:last ' ) | Last Selector - 選取篩選的集合中的最後一個元素 |
| :not(a) | $( ' input:not(:checked) ' ) | Not Selector - 選取篩選的集合中不符合條件的所有元素 |
| :odd | $( ' ul li:odd ' ) | Odd Selector - 選取篩選的集合中所有排列順序為奇數的元素(注意: 由0起算) |
| :even | $( ' ul li:even ' ) | Even Selector - 選取篩選的集合中所有排列順序為偶數的元素(注意: 由0起算) |
| :eq(n) | $( ' ul li:eq(n) ' ) | eq Selector - 選取篩選的集合中從頭算起第幾個元素(注意: 由0起算) |
| :gt(n) | $( ' ul li:gt(n) ' ) | gt Selector - 選取篩選的集合中所有排列順序大於n的元素(注意: 由0起算) |
| :lt(n) | $( ' ul li:lt(n) ' ) | lt Selector - 選取篩選的集合中所有排列順序小於n的元素(注意: 由0起算) |
| :animated | $( ' ul:animated ' ) | Animated Selector - 選取篩選的集合中所有正在進行動畫處理過程中的元素 |
| :header | $( ' :header ' ) | Header Selector - 選取篩選的集合中所有標示為標題(如 h1, h2 等)的元素 |
Content Filter
| :has(a) | $( ' div:has(p) ' ) | Has Selector - 選取元素之子元素內包含至少一個符合篩選條件的元素; 在範例中, 找到所有內含 p 元素的 div 元素 |
| :contains(text) | $( ' :contains(hello) ' ) | Contains Selector - 選取內容文字中包含指定字串的元素 |
| :empty | $( ' :empty ' ) | Empty Selector - 選取無任何子元素(包括文字節點)的元素 |
| :parent | $( ' li:parent ' ) | Parent Selector - 選取指定元素(包括文字節點)的所有父節點元素 |
Visibility Filter
| :hidden | $( ' div:hidden ' ) | Hidden Selector 選取被隱藏而不可見 (設定 "visibility:hidden" 或 "display:none" 或 width/height 被設定為 0, 或者因父代元素被設定為隱藏而不可見等等) 的元素 |
| :visible | $( ' div:visible ' ) | Visible Selector 選取非隱藏的元素 (實際上是根據瀏覽器傳回的 offsetWidth 及 offsetHeight 的值是否大於 0 而決定) |
Form
| :input | $( ' :input ' ) | Input Selector - 選選取所有名為 input 的 tag, 包括 select, textarea 與 button 等 |
| :text | $( ' :text ' ) | Text Selector - 選取所有類型為 “text” 的元素 |
| :password | $( ' :password ' ) | Password Selector - 選取所有類型為“password”的元素 |
| :radio | $( ' :radio ' ) | Radio Selector - 選取所有類型為“radio”的元素 |
| :checkbox | $( ' :checkbox ' ) | Checkbox Selector - 選取所有類型為“checkbox”的元素 |
| :submit | $( ' :submit ' ) | Submit Selector - 選取所有類型為“submit”的元素 |
| :image | $( ' :image ' ) | Image Selector - 選取所有類型為“image”的元素 |
| :reset | $( ' :reset ' ) | Reset Selector - 選取所有類型為“reset”的元素 |
| :file | $( ' :file ' ) | File Selector - 選取所有類型為“file”的元素 |
| :button | $( ' :button ' ) | Button Selector - 選取所有類型為“button”的元素 |
| :enabled | $( ' :enabled ' ) | Enabled Selector - 選取所有被 enabled 的元素 |
| :disabled | $( ' :disabled ' ) | Disabled Selector - 選取所有被 disabled 的元素 |
| :selected | $( ' :selected ' ) | Selected Selector - 選取所有被 selected 的元素 |
| :checked | $( ' :checked ' ) | Checked Selector - 選取所有類型為 "radio" 或 "checkbox" 的元素 |
Child Filter
| :first-child | $( ' ul li:first-child ' ) | First-child Selector - 選取集合中的第一個子元素 |
| :last-child | $( ' ul li:last-child ' ) | Last-child Selector - 選取集合中的最後一個子元素 |
| :only-child | $( ' div p:only-child ' ) | Only-child Selector - 選取一個本身為其父元素之唯一子元素的元素 |
| :nth-child(n) | $( ' ul li:nth-child(n) ' ) | nth-child Selector - 選取指定元素的第 n 個子元素 (從1起算) |
| :nth-child(odd) | $( ' ul li:nth-child(odd) ' ) | 選取指定元素的所有奇數個子元素 (從1起算) |
| :nth-child(even) | $( ' ul li:nth-child(even) ' ) | 選取指定元素的所有偶數個子元素 (從1起算) |
| :nth-child(formula) | $( ' ul li:nth-child(3n) ' ) | 選取指定元素的每 n 個子元素 (從1起算); 在範例中是指定每三個子元素 |
Attribute
| [attribute] | $( ' [href] ' ) | Has Attribute Selector - 選取包含指定 attribute 的所有元素; 範例中會選取所有內含 href 這個 attribute 的元素 |
| [attribute=value] | $( ' [rel=external] ' ) | Attribute Equals Selector - 選取所有包含指定的 attribute 文字的元素; 範例中會選取所有 ref 這個 attribute 之文字為 "external" 的元素 |
| ['attribute!=value'] | $( ' [rel!=external] ' ) | Attribute Not Equal Selector - 與上一項目相反; 選取所有不包含指定的 attribute 文字的元素; 範例中會選取所有 ref 這個 attribute 之文字不是 "external" 的元素” |
| [attribute^=value] | $( ' [class^=open] ' ) | Attribute Starts With Selector - 選選取所有內含指定 attribute, 且其內容以指定文字起頭的元素; 範例中會選取所有 class 這個 attribute 是以 "open" 字樣起頭者 |
| [attribute$=value] | $( ' [id$=-wrapper] ' ) | Attribute Ends With Selector - 與上一項目相反; 選選取所有內含指定 attribute, 且其內容以指定文字結尾的元素; 範例中會選取所有 id 這個 attribute 是以 "-wrapper" 字樣結尾者 |
| [attribute*=value] | $( ' [class*=offer] ' ) | Attribute Contains With Selector - 選取所有內含指定 attribute, 且其內容包含有指定文字的元素; 範例中會選取所有 class 這個 attribute 內含 "offer" 字樣者 |
| [attribute~=value] | $( ' [class~=offer] ' ) | Attribute Contains Word Selector - 選取所有內含指定 attribute, 且其內容包含有指定英文字的元素(以空白或行首/末區隔); 範例中會選取所有 class 這個 attribute 內含 "offer" 字樣者; 可以取到 class="my offer", 但取不到 class="myoffer" |
| [a1=b1][a2=b2] | $( ' [class=noshow] [id=myId] ' ) | Multiple Attribute Selector - 選取符合多個篩選條件的交集的元素 |
* 註: 為了提高辨識度, 我在以上範例中都為引號前後加上了不必要的空白; 這不表示我們需要在程式中也這麼做
以上是我所做的總整理; 如果你有興趣, 也可以參考官網上的說明。
