首頁 >web前端 >前端問答 >jquery中選擇器分為哪三種

jquery中選擇器分為哪三種

青灯夜游
青灯夜游原創
2022-05-24 19:25:394828瀏覽

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

jquery中選擇器分為哪三種

本教學操作環境: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視頻教學
取得所有影像域
取得所有重設按鈕

web前端影片

以上是jquery中選擇器分為哪三種的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn