jQuery選擇器繼承了CSS和Path語法的部分語法,允許通過標籤名、屬性名或內容對DOM元素進行快速、準確的選擇,而不必擔心瀏覽器的兼容性,通過jQuery選擇器對頁面元素的精準定位,才能完成對元素屬性和行爲的處理。
2.1 選擇器的優勢
代碼更簡單
完善的檢測機制,在jQuery選擇器定位頁面元素時,無需考慮所定位的元素在頁面中是否存在,即使該元素不存在,瀏覽器也不提示出錯信息,極大低方便了代碼的執行效率。(此爲優勢,不太苟同)
2.2 jQuery選擇器的類型
根據所獲取頁面中元素的不同,可以將jQuery選擇器分爲四大類:基本選擇器、層次選擇器、過濾選擇器、表單選擇器。其中,在過濾選擇器中又可分爲:簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器。
2.2.1 基本選擇器
基本選擇器是jQuery中使用最頻繁的選擇器,它由元素ID、Class、元素名、多個選擇符組成,通過基本選擇器可以實現大多數頁面元素的查找。
選擇器 | 功能描述 | 返回值 |
#id | 根據給定的ID匹配一個元素 | 單個元素 |
element | 根據給定的元素名匹配所有元素 | 元素集合 |
.class | 根據給定的類匹配元素 | 元素集合 |
* | 匹配所有元素 | 元素集合 |
selector1,selectorN | 將每一個選擇器匹配到的元素合併後一起返回 | 元素集合 |
2.2.2層次選擇器
層次選擇器通過DOM元素間的層次關係獲取元素,其主要的層次關係包括後代、父子、相鄰、兄弟關係,通過其中某類關係可以方便快捷地定位元素。
選擇器 | 功能描述 | 返回值 |
ancestor descendant | 根據祖先元素匹配所有的後代元素 | 元素集合 |
parent > child | 根據父元素匹配所有的子元素 | 元素集合 |
prev + next | 匹配所有緊接在prev元素後的相鄰元素 | 元素集合 |
prev ~ siblings | 匹配prev元素之後的所有兄弟元素 | 元素集合 |
2.2.3簡單過濾選擇器
過濾選擇器根據某類過濾規則進行元素的匹配,書寫時都以冒號(:)開頭;簡單過濾選擇器是過濾選擇器中使用最廣泛的一種。
選擇器 | 功能描述 | 返回值 |
first()或: first | 獲取第一個元素 | 單個元素 |
last()或: last | 獲取最後一個元素 | 單個元素 |
:not(selector) | 獲取除給定選擇器外的所有元素 | 元素集合 |
:even | 獲取所有索引值爲偶數的元素,索引號從0開始 | 元素集合 |
:odd | 獲取所有索引值爲奇數的元素,索引號從0開始 | 元素集合 |
:eq(index) | 獲取指定索引值的元素,索引號從0開始 | 單個元素 |
:gt(index) | 獲取所有大於給定索引值的元素,索引號從0開始 | 元素集合 |
:lt(index) | 獲取所有小於給定索引值的元素,索引號從0開始 | 元素集合 |
:header | 獲取所有標題類型的元素,如h1、h2…… | 元素集合 |
:animated | 獲取正在執行動畫效果的元素 | 元素集合 |
2.2.4內容過濾選擇器
內容過濾選擇器根據元素中的文字內容或所包含的子元素特徵獲取元素,其文字內容可以模糊或絕對匹配進行元素定位。
選擇器 | 功能描述 | 返回值 |
:contains(text) | 獲取包含給定文本的元素 | 元素集合 |
:empty | 獲取所有不包含子元素或者文本的空元素 | 元素集合 |
:has(selector) | 獲取含有選擇器所匹配的元素 | 元素集合 |
:parent | 獲取含有子元素或者文本的元素 | 元素集合 |
2.2.5 可見性過濾選擇器
可見性過濾選擇器根據元素是否可見的特徵獲取元素
選擇器 | 功能描述 | 返回值 |
:hidden | 獲取所有不可見元素,或者type爲hidden的元素 | 元素集合 |
:visible | 獲取所有的可見元素 | 元素集合 |
2.2.6 屬性過濾選擇器
屬性過濾選擇器根據元素的某個屬性獲取元素,如ID號或匹配屬性值的內容,並以“[”號開始、以“]”號結束。
選擇器 | 功能描述 | 返回值 |
[attribute] | 獲取包含給定屬性的元素 | 元素集合 |
[attribute=value] | 獲取等於給定的屬性是某個特定值的元素 | 元素集合 |
[attribute!=value] | 獲取不等於給定的屬性是某個特定值的元素 | 元素集合 |
[attribute^=value] | 獲取給定的屬性是以某些值開始的元素 | 元素集合 |
[attribute$=value] | 獲取給定的屬性是以某些值結尾的元素 | 元素集合 |
[attribute*=value] | 獲取給定的屬性是以包含某些值的元素 | 元素集合 |
[selector1][selector2][selectorN] | 獲取滿足多個條件的複合屬性的元素 | 元素集合 |
2.2.7 子元素過濾選擇器
在頁面開發過程中,常常遇到突出指定某行的需求。雖然使用基本過濾選擇器“:eq(index)”可實現單個表格的顯示,但不能滿足大量數據和多個表格的選擇需求。爲了實現這樣的功能,jQuery中可以通過子元素過濾選擇器輕鬆獲取所有父元素中指定的某個元素。
選擇器 | 功能描述 | 返回值 |
:nth-child(eq|even|odd|index) | 獲取每個父元素下的特定位置元素,索引號從1開始 | 元素集合 |
:first-child | 獲取每個父元素下的第一個子元素 | 元素集合 |
:last-child | 獲取每個父元素下的最後一個子元素 | 元素集合 |
:only-child | 獲取每個父元素下的僅有一個子元素 | 元素集合 |
2.2.8 表單對象屬性過濾選擇器
表單對象屬性過濾選擇器通過表單中的某對象屬性特徵獲取該類元素,如enabled、disabled、checked、selected屬性。
選擇器 | 功能描述 | 返回值 |
:enabled | 獲取表單中所有屬性爲可用的元素 | 元素集合 |
:disabled | 獲取表單中所有屬性爲不可用的元素 | 元素集合 |
:checked | 獲取表單中所有被選中的元素 | 元素集合 |
:selected | 獲取表單中所有被選中option的元素 | 元素集合 |
2.2.9 表單選擇器
無論是提交還是傳遞數據,表單在頁面中的作用是顯而易見的。通過表單進行數據的提交或處理,在前端頁面開發中佔據重要地位。因此,爲了使用戶能更加方便地、高效地使用表單,在jQuery選擇器中引入表單選擇器,該選擇器專爲表單量身打造,通過它可以在頁面中快速定位某表單對象。
選擇器 | 功能描述 | 返回值 |
:input | 獲取所有 input、textarea、select | 元素集合 |
:text | 獲取所有單行文本框 | 元素集合 |
:password | 獲取所有密碼框 | 元素集合 |
:radio | 獲取所有單選按鈕 | 元素集合 |
:checkbox | 獲取所有複選框 | 元素集合 |
:submit | 獲取所有提交按鈕 | 元素集合 |
:image | 獲取所有圖像域 | 元素集合 |
:reset | 獲取所有重置按鈕 | 元素集合 |
:button | 獲取所有按鈕 | 元素集合 |
:file | 獲取所有文件域 | 元素集合 |
在看完第二章,對於怎麼獲取元素,終於可以用了超級武器。