jQuery 的 selector 主要有三種, 其目的在於選擇 HTML 中的元素:
1. HTML Tag - 例如 $('p')
可以選取所有
元素
2. 元素 ID - 例如 $('#myId')
選取 ID 為 myId 的特定元素
3. CSS 類別 - 例如 $('.myClass')
選取所有套用 myClass 類別的元素
在 jQuery 中就只有這三種標示法。不過如果事情那麼簡單的話, 我也不用花工夫來寫這篇文章了。事實上 jQuery
在以上三種選擇器之外, 又另外提供複雜而又功能強大的組合標示語法, 配合它的隱含迴圈運算, 讓我們可以更精準的選擇到我們想要的各種 HTML
元素; 我把這些組合標示語法整理如下:
Basic Selector
Hierarchy
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
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 -
選取符合多個篩選條件的交集的元素 |
* 註: 為了提高辨識度, 我在以上範例中都為引號前後加上了不必要的空白; 這不表示我們需要在程式中也這麼做
以上是我所做的總整理; 如果你有興趣, 也可以參考
官網上的說明。
