jQuery選擇器詳解

2022-07-04 07:27:09 字數 1670 閱讀 5941

根據所獲取頁面中元素的不同,可以將jquery選擇器分為4大類:基本選擇器、層次選擇器、過濾選擇器、表單選擇器。

其中,過濾選擇器有可以分為6種:簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器器、子元素過濾選擇器、表單物件屬性過濾選擇器。

1、基本選擇器

#id、* 、.class 、元素標籤 、selector 、selectorall

2、層次選擇器

後代、父子、相鄰、兄弟: parent 、child 、prev 、 next 、 siblings 、+ 、 > 、~ 、空格

3、過濾選擇器

根據某類過濾規則進行元素的匹配,書寫時都以冒號(:)開頭。

簡單::first 、 :last 、 :not(selector) 、 :even 、 :odd 、 :eq(index) 、 :gt(index)、:lt(index) 、

:header 獲取所有標題型別的元素、 :animated 獲取正在執行動畫效果的元素

內容::contains(text) 獲取包含給定文字的元素 、:empty 獲取所有不包含子元素或文字的元素 、 :has(selsctor) 獲取含有選擇器所匹配的元素的元素 、

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

可見性::hidden 獲取所有不可見的或者型別為hidden的元素 、 :visible 獲取所有可見的元素

屬性:[attribute] 、 [attribute=value] 、 [attribute!=value] 、[attribute^=value] 開頭 、[attribut$=value] 結尾 、

[attribute*=value]  包括 、 [selector1] [selector2] [selectorn] 獲取滿足多個條件的復合屬性的元素

子元素::nth-child(eq|even|odd|index)索引從1開始 、:first-child 、:last-child 、 :only-child 獲取每個父元素下的僅有乙個子元素

表單物件屬性::enabled 獲取表單中所有屬性為可用的元素 、:disabled 獲取表單中所有屬性為不可用的元素 、 :checked 獲取表單中所有被選中的元素 、

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

4、表單選擇器

:input 獲取所有的input、textarea、select

:text 獲取所有單行文字框  

:password 獲取所有密碼框

:radio 獲取所有單選按鈕

:checkbox 獲取所有核取方塊

:submit

:image 獲取所有影象域

:reset 獲取所有的重置按鈕

:button

:file 獲取所有檔案域

jquery權威指南 機械工業出版社 陶國榮 著

Jquery 選擇器 詳解

一 基本選擇器 1 div1 html hello world 1 根據id匹配元素 a 2 c1 html hello world 2 根據yclass匹配元素 b 3 span html hello world 3 根據元素名稱匹配 c 4 span,div.c1 html hello worl...

JQuery選擇器詳解

id class 復合選擇器 div p span 層級選擇器 div下的p元素中的span元素 div p 父子選擇器 div下的所有p元素 div p 相鄰元素選擇器 div後面的p元素 僅乙個p div p 兄弟選擇器 div後面的所有p元素 同級別 p last 類選擇器 加 過濾選擇器 第...

Jquery 選擇器 詳解

一 基本選擇器 1 div1 html hello world 1 根據id匹配元素 a 2 c1 html hello world 2 根據yclass匹配元素 b 3 span html hello world 3 根據元素名稱匹配 c 4 span,div.c1 html hello worl...