2012年5月7日

[JQuery] 選擇器 Selectors



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 -

選取符合多個篩選條件的交集的元素


* 註: 為了提高辨識度, 我在以上範例中都為引號前後加上了不必要的空白; 這不表示我們需要在程式中也這麼做

以上是我所做的總整理; 如果你有興趣, 也可以參考官網上的說明