選擇器 Selectors
jQuery 的 selector 主要有三種, 其目的在於選擇 HTML 中的元素:
1. HTML Tag - 例如 $(\'p\')
可以選取所有 <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 -
選取符合多個篩選條件的交集的元素 |
* 註: 為了提高辨識度, 我在以上範例中都為引號前後加上了不必要的空白; 這不表示我們需要在程式中也這麼做
以上是我所做的總整理; 如果你有興趣, 也可以參考官網上的說明。
|
