jQuery 選擇器 (Selector)

選擇器的主要功能有二: 一是透過選擇器來選取DOM中的元素、另一為可藉由它來建立/修改新的元素

 

jQuery in Action 書中所提供的 Selectors Lab範例是一個用來驗證您只否真的了解各式選擇器用法的好工具(可由 http://www.manning.com/bibeault/ 中下載 Soruce Code，此範例在 Chapter2/lab.selectors.html)

 

1.基本選擇器

選擇器	說明	回傳值
element	依指定的元素名稱選擇該類型所有元素	同類型元素集合
#id	依指定ID選擇該元素	單一元素
.class	依指定的類別名稱撰擇所有該類別所有元素	同類別元素集合
*	所有元素	所有元素
s1, s2, s3	多組選擇器所選擇之所有元素	元素集合

 

2.關係選擇器

選擇器	說明
E F	由包含在 E 底下的 F 元素，不必直接為父子關係(後代元素)
E>F	父元素為 E 的 F 元素
E+F	緊接在 E 元素後方的 F 元素
E~F	緊接在 E 元素前方的 F 元素
E:has(F)	元素名為F，且後代元素有E的所有元素
E.C	元素名為E且類別為C的所有元素
E#I	元素名為E且ID為I的元素

 

3.過濾選擇器

:first	第一個元素
:last	最後一個元素
:first-child	第一個子元素
:last-child	最後一個子元素
:only-child	為唯一的子元素
:nth-child	第n個子元素
:nth-child(even | odd)	第奇/偶數個子元素
:nth-child(Xn+Y)	第Xn+Y個子元素
:even	第偶數個元素
:odd	第奇數個元素
:eq(n)	第n個符合元素
:gt(n)	第n個之後(不包含)元素
:lt(n)	第n個之前(不包含)元素
:header	h1、h2、h3之類的標題元素
:animated	正在執行動畫的元素
:contains	包含有指定文字的元素
:empty	不包含子元素或文字的空元素
:parent	含有子元素或文字的元素
:hidden	所有不可見元素
:visible	所有可見元素

 

4.屬性選擇器

選擇器	說明
E[A]	元素名為E且有屬性A的元素
E[A=V]	元素名為E且有屬性A等於V屬性值的元素
E[A^=V]	元素名為E且有屬性A含有以V開頭屬性值的元素
E[A$=V]	元素名為E且有屬性A含有以V結束屬性值的元素
E[A*=V]	元素名為E且有屬性A含有V屬性值的元素

 

5.表單選擇器

選擇器	說明
:input	所有input、textarea、select和button等
:text	所有單行文字方塊
:password	所有密碼文字
:radio	單選項
:checkbox	多選項
:submit	傳送按鈕
:image	影象檔案
:reset	重置按鈕
:button	所有按鈕
:file	所有檔案
:enabled	所有可用元素
:disabled	所有不同用元素
:checked	所有已勾選元素(多選)
:selected	所有已點選之元素(單選)

 

:not 反選過瀘器，如: 若要選取非核取方塊(多選)元素可以用 input:not(:checkbox)。

 

P.S. 幾個Selector 操作網頁 http://codylindley.com/jqueryselectors/ 、 http://www.w3schools.com/jquery/trysel.asp 、 http://www.w3schools.com/jquery/trysel.asp