[jQuery]選擇器

1. 基本選擇器

基本選擇器是jQuery中最常用的選擇器,也是最簡單的選擇器,它通過元素id、class和標籤名等來查找DOM元素。如下表:

選擇器描述返回示例
#id根據給定的id匹配一個元素。單個元素$("#myID")
.class根據給定的類名匹配元素。集合元素$(".myClass")
element根據給定的元素名匹配元素。集合元素$("div")
*匹配所有元素。集合元素$("*")
selector1,...,selectorN將每一個選擇器匹配到的元素合併。集合元素$("div,#myID,p.myClass")


2. 層次選擇器

如果想通過DOM元素之間的層次關係來獲取特定元素,例如後代元素、子元素、相鄰元素和兄弟元素等,可以使用層次選擇器。如下表:

選擇器描述返回示例
$("ancestor descendant")選取ancestor元素裏的所有descendant後代元素。集合元素$("div span")
$("parent > child")選取parent元素下的child子元素。集合元素$("div > span")
$("prev + next")選取緊接在prev元素後的next元素。集合元素$(".myClass + div")
$("prev ~ siblings")選取prev元素之後的所有siblings元素。集合元素$(".myClass ~ div")


3. 過濾選擇器

過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素,都以一個冒號":"開頭。按照不同的過濾規則,可以分爲基本過濾、內容過濾、可見性過濾、子元素過濾和表單對象屬性過濾。

基本過濾選擇器如下表:

選擇器描述返回示例
:first選取第一個元素。單個元素$("div:first")
:last選取最後一個元素。單個元素$("div:last")
:not(selector)去除所有與給定選擇器匹配的元素。集合元素$("input:not(.myClass)")
:even選取索引是偶數的所有元素。集合元素$("input:even")
:odd選取索引是奇數的所有元素。集合元素$("input:odd")
:eq(index)選取索引等於index的元素。
單個元素$("input:eq(1)")
:gt(index)選取索引大於index的元素。集合元素$("input:gt(1)")
:lt(index)選取索引小於index的元素。集合元素$("input:lt(1)")
:header選取所有的標題元素。集合元素$(":header")
:animated選取當前正在執行動畫的所有元素。集合元素$("div:animated")

內容過濾選擇器的過濾規則體現在它所包含的子元素或文本內容上,如下表:

選擇器描述返回示例
:contains(text)選取含有文本內容爲"text"的元素。
集合元素$("div:contains('me')")
:empty選取不包含子元素或者文本的空元素。集合元素$("div:empty")
:has(selector)選取含有選擇器所匹配的元素的元素。集合元素$("div:has(p)")
:parent選取含有子元素或者文本的元素。集合元素$("div:parent")

可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素,如下表:

選擇器描述返回示例
:hidden選取所有不可見的元素。集合元素$("div:hidden")
:visible選取所有可見的元素。集合元素$("div:visible")

屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素,如下表:

選擇器描述返回示例
[attribute]選取擁有此屬性的元素。集合元素$("div[id]")
[attribute=value]選取屬性的值爲value的元素。集合元素$("div[id=myID]")
[attribute!=value]選取屬性的值不等於value的元素。集合元素$("div[class!=myClass]")
[attribute^=value]
選取屬性的值以value開始的元素。集合元素$("div[title]^=test")
[attribute$=value]選取屬性的值以value結束的元素。集合元素$("div[title]$=test")
[attribute*=value]選取屬性的值含有value的元素。集合元素$("div[title]*=test")
[selector1][selectorN]用屬性選擇器合併成一個複合屬性選擇器。集合元素$("div[id][title$=test]")

子元素過濾選擇器相對複雜,如下表:

選擇器描述返回示例
:nth-child
選取每個父元素下的第index個子元素或奇偶元素。集合元素$(ul:nth-child(1))
:first-child選取每個父元素的第一個子元素。集合元素$(ul li:first-child)
:last-child選取每個父元素的最後一個子元素。集合元素$(ul li:first-child)
:only-child選取每個父元素唯一的一個子元素。集合元素$(ul li:only-child)

表單對象屬性選擇器主要是對所選擇的表單元素進行過濾,如下表:

選擇器描述返回示例
:enabled選取所有可用元素。集合元素$("#myform :enabled")
:disabled選取所有不可用元素。集合元素$("#myform :disabled")
:checked選取所有被選中的元。素集合元素$("input:checked")
:selected選擇所有被選中的選項元素。集合元素$("select :selected")


4. 表單選擇器

表單選擇器能夠極其方便地獲取到表單的某個或某類型的元素,如下表:

選擇器描述返回示例
:input選取所有的<input>、<textarea>、<select>和<button>元素。集合元素$(":input")
:text選取所有的單行文本框。集合元素$(":text")
:password選取所有的密碼框。集合元素$(":password")
:radio選取所有的單選框。集合元素$(":radio")
:checkbox選取所有的多選框。集合元素$(":checkbox")
:submit選取所有的提交按鈕。集合元素$(":submit")
:image選取所有的圖像按鈕。集合元素$(":image")
:reset選取所有的重置按鈕。集合元素$(":reset")
:button選取所有的按鈕。集合元素$(":button")
:file選取所有的上傳域。集合元素$(":file")
:hidden選取所有不可見元素。集合元素$(":hidden")



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章