jQuery 選擇器的型別(學習筆記)

2021-06-22 01:16:32 字數 4112 閱讀 3373

根據所獲取頁面中元素的不同,可以將jquery選擇器分為四大類:基本選擇器、層次選擇器、過濾選擇器、表單選擇器。其中在過濾選擇器中又可分為:簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單物件屬性過濾選擇器。

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

選擇器功能描述

返回值#id

根據給定的id匹配乙個元素

單個元素

element

根據給定的元素名匹配所有元素

元素集合

.class

根據給定的類匹配元素

元素集合

*

匹配所有元素

元素集合

selector1,selectorn

將每乙個選擇器匹配到元素合併後一起返回

元素集合

示例:

idclass

span

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

選擇器功能描述

返回值ancestor descendant

根據祖先元素匹配所有的後代元素

元素集合

parent>child 

根據父元素匹配所有的子元素

元素集合

prev +next 

匹配所有緊接在prev元素後的相鄰元素  

元素集合

pre~siblings 

匹配pre元素之後的所有兄弟元素

元素集合

示例:

idclass

span

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

選擇器功能描述

返回值first()或 :first

獲取第乙個元素

單個元素

last()或 :last

獲取最後乙個元素

單個元素

:not(selector)

獲取除給定選擇器外的所有元素

元素集合

:even

獲取所有索引值為偶數的元素,索引號從0開始

元素集合

:odd

獲取所有索引值為奇數的元素,索引號從0開始

元素集合

:eq(index)

獲取指定索引值的元素,索引號從0開始

單個元素

:gt(index)

獲取所有大於給定索引值的元素,索引號從0開始

元素集合

:lt(index)

獲取所有小於給定索引值的元素,索引號從0開始

元素集合

:header

獲取所有標題型別的元素,如h1、h2...... 元素集合

元素集合

:animated

獲取正在執行動畫效果的元素

元素集合

示例:

span move

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

選擇器功能描述

返回值:contains(text)

獲取包含給定文字的元素

元素集合

:empty

獲取所有不包含子元素或者文字的空元素

元素集合

:has(selector)

獲取含有選擇器所匹配的元素

元素集合

:parent

獲取含有子元素或者文字的元素

元素集合

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

選擇器功能描述

返回值:hidden

獲取所有不可見元素,或者type為hidden的元素

元素集合

:visble

獲取所有的可見元素

元素集合

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

選擇器功能描述

返回值[attribute]

獲取包含給定屬性的元素

元素集合

[attribute=value]

獲取等於給定的屬性是某個特定值的元素

元素集合

[attribute!=value]

獲取不等於給定的屬性是某個特定值的元素

元素集合

[attribute^=value]

獲取給定的屬性是以某些值開始的元素

元素集合

attribute$=value]

]獲取給定的屬性是以某些值結束的元素

元素集合

[attribute*=value]

獲取給定的屬性是以包含某些值的元素

元素集合

[selector1][selector2][selectorn]

獲取滿足多個條件的符合屬性的元素

元素集合

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

選擇器選擇器

返回值:nth-child(eq|even|odd|index)

獲取每個父元素下的特定位置元素,索引號從1開始

元素集合

:first-child

獲取每個父元素下的第一子元素

元素集合

:last-child

獲取每個父元素下的最後乙個子元素

元素集合

:only-child

獲取每個父元素下的僅有乙個子元素

元素集合

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

選擇器功能描述

返回值:enabled

獲取表單中所有屬性為可用的元素

元素集合

:disabled

獲取表單中素有屬性為不可用的元素

元素集合

:checked

獲取表單中所有被選中的元素

元素集合

:selected

獲取表單中所有被選中option的元素

元素集合

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

選擇器功能描述

返回值:input

獲取所有input、textarea、select

元素集合

:text

獲取所有單行文字框

元素集合

:password

獲取所有密碼框

元素集合

:radio

獲取所有單選按鈕

元素集合

:checkbox

獲取核取方塊

元素集合

:submit

獲取所有提交按鈕

元素集合

:image

獲取所有影象域

元素集合

:reset

獲取所有重置按鈕

元素集合

:button

獲取所有按鈕

元素集合

:file

獲取所有檔案域

元素集合

jQuery選擇器型別

jquery選擇器應該是學習jquery的最基本的知識了,下面介紹一下各個型別的選擇器的怎麼寫。1 基本選擇器 這是最常用的選擇器 id 根基給定的id匹配乙個元素 class 根據類名匹配元素 element 直接寫出標籤名,根據給定的元素名匹配元素 萬用字元 selector1,selector...

jQuery學習 選擇器

首先了解一下css選擇器,css即層疊樣式表他將網頁結構和表現樣式完全分離出來,利用css選擇器可以輕鬆在不改變html結構的前提下改變樣式。他是利用獲取目標元素後施加樣式,有三種方式 行間樣式表 內部樣式表 外部樣式表。選擇器語法 描述示例 標籤選擇器 e以標籤作為選擇符 tdid選擇器 id以文...

jquery選擇器學習

學習方式,照著列表乙個個敲一遍,記個大概,知道有這麼個選擇器.之後使用的時候查查w3c,就會用了 p 取得p標籤 p1 取得id為p1的元素 p1 取得class p1的元素 href 選擇屬性帶有href的元素 href 選擇href 的元素 href 選擇href 的元素 選擇所有href屬性以...