jquery中選擇器分為哪三種

2022-05-24 22:00:34

jquery的三種選擇器:1、基本選擇器,由元素ID、元素名、類名、多個選擇符組成;2、層次選擇器,通過DOM元素間的層次關係獲取元素;3、過濾選擇器,按照過濾規則的不同,該選擇器還可分為簡單過濾、內容過濾、可見過濾、屬性過濾、表單過濾等。

本教學操作環境:windows7系統、jquery1.10.2版本、Dell G3電腦。

1、基本選擇器

它由元素ID、元素名、多個選擇符組成,通過基本選擇器可以實現大多數頁面元素的查詢

選擇器功能描述
#id根據給定的ID匹配一個元素
element根據給定的元素名匹配所有元素
.class根據給定的類匹配元素
*匹配所有元素
selector1,selectorN將每一個選擇器匹配到元素合併後一起返回

2、層次選擇器

層次選擇器通過DOM元素間的層次關係獲取元素,其主要的層次關係包括後代、父子、相鄰、兄弟關係,通過其中某類關係可以方便快捷地定位元素。

選擇器功能描述
ancestor descendant根據祖先元素匹配所有的後代元素
parent>child根據父元素匹配所有的子元素
prev +next匹配所有緊接在prev元素後的相鄰元素
pre~siblings匹配pre元素之後的所有兄弟元素

3、過濾選擇器

過濾?肯定是要新增過濾條件的。通過「:」新增過濾條件,比如「$(「div:first」)」返回div元素集合的第一個div元素,first是過濾條件。
按照不同的過濾規則,過濾選擇器中又可分為:簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單物件屬性過濾選擇器等。

1)簡單過濾選擇器

過濾選擇器根據某類過濾規則進行元素的匹配,書寫時都以冒號(:)開頭;簡單過濾選擇器是過濾選擇器中過濾選擇中使用最廣泛的一種

選擇器功能描述
first()或 :first獲取第一個元素
last()或 :last獲取最後一個元素
:not(selector)獲取除給定選擇器外的所有元素
:even獲取所有索引值為偶數的元素,索引號從0開始
:odd獲取所有索引值為奇數的元素,索引號從0開始
:eq(index)獲取指定索引值的元素,索引號從0開始
:gt(index)獲取所有大於給定索引值的元素,索引號從0開始
:lt(index)獲取所有小於給定索引值的元素,索引號從0開始
:header獲取所有標題型別的元素,如h1、h2… 元素集合
:animated獲取正在執行動畫效果的元素

2)內容過濾選擇器

內容過濾選擇器根據元素中的文字內容或所包含的子元素特徵獲取元素,其文字內容可以絕對模糊或絕對匹配進行元素定位

選擇器功能描述
:contains(text)獲取包含給定文字的元素
:empty獲取所有不包含子元素或者文字的空元素
:has(selector)獲取含有選擇器所匹配的元素
:parent獲取含有子元素或者文字的元素

3)可見性過濾器

可見性過濾選擇器根據元素是否可見的特徵獲取元素

選擇器功能描述
:hidden獲取所有不可見元素,或者type為hidden的元素
:visble獲取所有的可見元素

4)屬性過濾器

屬性過濾器根據元素的某個屬性獲取元素,如ID號或匹配屬性值的內容,並以「[」號開始、一"]"號結束

選擇器功能描述
[attribute]獲取包含給定屬性的元素
[attribute=value]獲取等於給定的屬性是某個特定值的元素
[attribute!=value]獲取不等於給定的屬性是某個特定值的元素
[attribute^=value]獲取給定的屬性是以某些值開始的元素
[attribute$=value]獲取給定的屬性是以某些值結束的元素
[attribute*=value]獲取給定的屬性是以包含某些值的元素
[selector1][selector2][selectorN]獲取滿足多個條件的符合屬性的元素

5)子元素過濾器

在頁面開發過程中,嚐嚐遇到突出指定某行的需求。雖然使用基本過濾選擇器「:eq(index)"可實現單個表格的顯示,但不能滿足大量資料和多個表格的選擇需求。為了實現這樣的功能,jQuery中可以通過子元素過濾選擇器輕鬆獲取所有父元素中的某個元素。

選擇器功能描述
:nth-child(eq/even/odd/index)獲取每個父元素下的特定位置元素,索引號從1開始
:first-child獲取每個父元素下的第一子元素
:last-child獲取每個父元素下的最後一個子元素
:only-child獲取每個父元素下的僅有一個子元素

6)表單物件屬性過慮器

表單物件屬性過濾選擇器通過表單中的某物件屬性特徵獲取該元素,如enabled、disabled、checked、selected屬性。

選擇器功能描述
:enabled獲取表單中所有屬性為可用的元素
:disabled獲取表單中素有屬性為不可用的元素
:checked獲取表單中所有被選中的元素
:selected獲取表單中所有被選中option的元素

7)表單過慮器

在jQuery選擇器中引入表單選擇器,該選擇器專為表單量身打造,通過它可以在頁面中快速定位某表單物件。

選擇器功能描述
:input獲取所有input、textarea、select
:text獲取所有單行文字方塊
:password獲取所有密碼框
:radio獲取所有無線電鈕
:checkbox獲取核取方塊
:submit獲取所有提交按鈕
:image獲取所有影象域
:reset獲取所有重置按鈕
:button獲取所有按鈕
:file獲取所有檔案域

【推薦學習:、】

以上就是jquery中選擇器分為哪三種的詳細內容,更多請關注TW511.COM其它相關文章!