三 jQuery選擇器

2021-08-20 22:49:51 字數 2989 閱讀 2028

1、層次選擇器(4)

$(「p div」):        選取p元素下的所有div

$(「p>div」):      選取p元素

下的div子元素

$(「p+div」):      選取p元素的一下個

同胞div元素 

等價於$(「p」).next(「div」);

$(「p~div」):      選取p元素後面所有

同胞div元素 ,

等價於$(「p」).nextall(「div」);(後面的同輩)

對比$(「p」).siblings();獲取所有同輩(所有的同輩)

查詢同時包含red和green的節點

var a = $('.red.green'); // 注意沒有空格!

// 符合條件的節點:

// ...

// ...

2、基本過濾選擇器(9)

:first

選取第乙個元素

:last

選取最後乙個元素 

:not(selector)

去除所有與selector匹配的元素

:even

索引為偶數的所有元素

:odd

索引為奇數的所有元素

:eq(index)

索引為index的元素

:gt(index)

索引大於index的元素(不包括index)

:lt(index)

索引小於index的元素(不包括index)

:header

所有標題元素(h1、h2、h3……)

:animated

正在執行動畫的所有元素

:focus

當前獲取焦點的元素

3、內容過濾選擇器(4)

:contains(text)

含有文字內容為「text」的元素

:empty

不包含子元素或文字的空元素

:parent

含有子元素或文字的元素

:has(selector)

含有選擇器元素的元素($(「div:has(p)」):選取含有p元素的div元素)

4、可見性過濾選擇器(2)

:visible

所有可見的元素

:hidden

所有隱藏的元素

5、屬性過濾選擇器(9)

[attr]

擁有此屬性的元素

[attr=value]

屬性值為value的元素

[attr!=value]

屬性值不為value的元素

[attr^=value]

屬性值以value開頭的元素

[attr$=value]

屬性值以value為結尾的元素

[attr*=value]

屬性值含有value的元素

[attr|=value]

屬性值等於value或以該value為字首(為字首時,後面跟-)的元素

[attr~=value]

屬性用空格分隔的值中包含value的元素

[attr] [attr2] [attrn]

復合屬性

當屬性的值包含空格等特殊字元時,需要用雙引號括起來。

var a = $('[items="a b"]'); // 找出<??? items="a b">
6、子元素過濾選擇器(4)

:ntn-child(index/even/odd/equation)    選取每個父元素下的第index個子元素或者奇偶元素(index從1開始)

even:        選取每個父元素下的索引值時偶數的子元素

odd:     選取每個父元素下的索引值時技術的子元素

index:    選取每個父元素下索引值為index的元素 

3n:        選取每個父元素下索引值是3的倍數的元素(n從1開始)

3n+1:    選取每個父元素下的索引值是3n+1的元素  

:first-child                                                選取每個父元素的第乙個子元素

:last-child                                                 選取每個父元素的最後乙個子元素

:only-child                                                如果某個子元素時它父元素的唯一子元素,則匹配。父元素含有其他元素,不匹配(父元素可以含有純文字)

7、表單物件屬性過濾選擇器(4)

:enabled            選取所有可用元素(基本用在input type="text")

:disabled            選取所有不可用元素(基本用在input type="text")

:checked            選取所有被選中的元素(單選框,核取方塊)

:selected            選取所有被選中的選項元素(下拉列表)

8、表單選取器(11)

:input                  選取所有的、、、元素

:text                    選取所有的單行文字框

:password           選取所有的密碼框

:radio                   選取所有的單選框

:checkbox            選取所有的核取方塊

:submit                選取所有的提交按鈕

:image                  選取所有的影象按鈕

:reset                    選取所有的重置按鈕

:button                選取所有的按鈕

:file                       選取所有的上傳域

:hidden                選取所有不可見元素

jQuery選擇器(三)

子元素過濾選擇器 l nth child 選擇器詳解如下 1 nth child even odd 能選取每個父元素下的索引值為偶 奇 數的元素 2 nth child 2 能選取每個父元素下的索引值為2 的元素 3 nth child 3n 能選取每個父元素下的索引值是3 的倍數的元素 3 nth...

Jquery選擇器(三)

過濾選擇器 4 屬性過濾器 查詢所有含有 id 屬性的 div 元素 document ready function test1 test2 查詢所有name是qin的input並選中 document ready function 查詢所有name不是qin的input並選中 document r...

jQuery學習筆記(三) jQuery選擇器2

4 內容過濾選擇器 內容過濾選擇器根據元素中的文字內容或所包含的子元素特徵獲取元素,其文字內容可以模糊或絕對匹配進行元素定位,其詳細說明如下表所示 內容過濾選擇器語法 選擇器功能返回值 contains text 獲取包含給定文字的元素 元素集合 empty 獲取所有不包含子元素或者文字的空元素 元...