JQuery 選擇器的操作

Home / Javascript / JQuery / JQuery 選擇器的操作

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 之下的第一個 tablea ~ 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 –

 

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

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

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

4414 全部 2 今日

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*