JQuery選擇器介紹

2021-05-27 20:33:55 字數 4107 閱讀 4107

在dom程式設計中我們只能使用有限的函式根據id或者tagname獲取dom物件.然而在jquery中則完全不同,jquery提供了異常強大的選擇器用來幫助我們獲取頁面上的物件, 並且將物件以jquery包裝集的形式返回。本章主要對常用的jquery選擇器進行乙個介紹及歸類。

jquery選擇器大體上可分為4類:基本選擇器、層次選擇器、過濾選擇器、表單選擇器。其中過濾選擇器可以分為:簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單物件屬性過濾選擇器。具體示例圖可見如下:

選擇器|-基本選擇器

|-層次選擇器

|-表單選擇器

|-過濾選擇器

|—簡單過濾選擇器

|-內容過濾選擇器

|-可見性過濾選擇器

|-屬性過濾選擇器

|-子元素過濾選擇器

|-表單物件屬性過濾選擇器

下面就分別就每種選擇器進行乙個簡要的介紹:

它是jquery中使用最頻繁的選擇器,它由元素id、class、元素名、多個選擇符組成,通過基本選擇器可以實現大多數頁面元素的查詢。

選擇器功能

返回值#id

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

單個元素

element

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

元素集合

.class

根據給定的類匹配元素

元素集合

匹配所有元素

元素集合

selector1, selector n

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

元素集合

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

選擇器功能

返回值ancestor  descendant

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

元素集合

parent > child

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

元素集合

prev + next

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

元素集合

prev ~sibling

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

元素集合

注:ancestor descent與parent > child所選擇的元素集合是不同的,前者的層次關係是祖先與後代,而後者是父子關係;另外,prev + next可以使用.next()代替,而prev ~siblings可以使用.nextall()代替。

表單選擇器專為表單量身打造,通過它可以在頁面中快速定位某表單物件,直接獲取表單物件的方法。

選擇器功能

返回值:input

獲取所有input、textarea、select

元素集合

:text

獲取所有單行文字框

元素集合

:password

獲取所有密碼框

元素集合

:radio

獲取所有單選按鈕

元素集合

:checkbox

獲取所有核取方塊

元素集合

:submit

獲取所有提交按鈕

元素集合

:image

獲取所有影象域

元素集合

:reset

獲取所有重置按鈕

元素集合

:button

獲取所有按鈕

元素集合

:file

獲取所有檔案域

元素集合

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

選擇器功能

返回值:first或first()

獲取第乙個元素

單個集合

:last或last()

獲取最後乙個元素

單個集合

:not(selector)

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

元素集合

:even

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

元素集合

:odd

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

元素集合

:eq(index)

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

單個集合

:gt(index)

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

元素集合

:lt(index)

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

元素集合

:header

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

元素集合

:animated

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

元素集合

根據元素中的文字內容或所包含的子元素特徵獲取元素,其內容可以模糊或絕對進行定位。

選擇器功能

返回值:contains(text)

獲取包含給定文字的元素

元素集合

:empty

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

元素集合

:has(selector)

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

元素集合

:parent

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

元素集合

根據元素是否可見的特徵獲取元素。

選擇器功能

返回值:hidden

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

元素集合

:visible

獲取所有可見的元素

元素集合

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

選擇器功能

返回值[attribute]

獲取包含給定屬性的元素

元素集合

[attribute=value]

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

元素集合

[attribute!=value]

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

元素集合

[attribute^=value]

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

元素集合

[attribute$=value]

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

元素集合

[attribute*=value]

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

元素集合

[selector1] [selectorn]

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

元素集合

子元素過濾選擇器能夠滿足指定到某行的需求,通過它可以輕鬆的獲取所有父元素中指定的某個元素。

選擇器功能

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

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

元素集合

:first-child

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

元素集合

:last-child

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

元素集合

:only-child

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

元素集合

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

選擇器功能

返回值:enabled

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

元素集合

:disabled

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

元素集合

:checked

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

元素集合

:selected

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

元素集合

上述只是簡單的對jquery中的選擇器進行了歸納及彙總。下面將結合乙個具體的例項(圖書類目)來介紹選擇器的使用。

1)、在頁面中建立乙個導航條,單擊標題上的「展開」鏈結,可以將圖書類目顯示出來,並將其上的方案變為「隱藏」,同時在右下角顯示簡化字樣。反之亦然。

功能實現:

隱藏

簡化

實現效果-初次開啟效果如下:

jquery 選擇器介紹

jquery 選擇器介紹 基本選擇器 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文...

Jquery選擇器介紹

jquery選擇器使得獲得頁面元素變得更加容易 更加靈活,從而大大減輕了開發人員的壓力。如同蓋樓一樣,沒有磚瓦,就蓋不起樓房。得不到元素談何其他各種操作呢?可見,jquery選擇器的重要性。當然想一下子掌握所有選擇器也是很困難的,這個得靠實踐和積累。現在我們正式進入jquery選擇器的學習。我們將j...

jquery概述及選擇器介紹

1.基本功能 2.特點 3.js與jq區別 傳統的方式頁面載入會存在覆蓋問題,載入比jq慢 整個頁面載入完畢 包括裡面的其它內容,比如 jq不存在覆蓋問題,載入的時候是順序執行,載入比js要快!當整個dom樹結構繪製完畢就會載入 b.覆蓋問題 jq 不存在覆蓋,載入時順序執行 js 存在覆蓋,載入時...