系統學習 jQuery (三) 選擇器

2021-08-03 03:13:29 字數 1856 閱讀 8115

jquery 操作 dom 的邏輯是先找到想操作的 dom 元素,然後進行相應操作。實際中我們一般是先通過 jquery 選擇器構造包含想要操作的 dom 元素的 jquery 物件,再通過 jquery 物件方法對乙個或一組 dom 物件進行操作。全程使用鏈式操作完成方便清晰。

為了準確地選擇要操作的 dom 元素,jquery 提供了類似 css 的豐富的選擇器,且這些選擇器可以按照一定規則組合以得到最大的靈活性。通過向 jquery 函式傳遞選擇器字串來選擇特定的 dom 元素即 $(select)。

#id 選擇特定 id 的元素

tag 選擇特定標籤的元素

.class 選擇特定 class 的元素

* 選擇所有元素

select1, select2, selectn 選擇多個選擇器匹配的元素

ancestor descendant 選擇 ancestor 匹配的元素的後代中匹配 descendant 的元素

parent > child 選擇 select1 匹配的元素的孩子中匹配 select2 的元素

prev + next 匹配緊接在 prev 之後的 next 兄弟元素

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

:first 獲取匹配的第乙個元素

:not(selector) 選擇不匹配 selector 的元素

:even 匹配編號為偶數的元素

:odd 匹配編號為奇數的元素

:eq(index) 匹配特定編號的元素

:gt(index) 匹配編號大於特定值的元素

:lt(index) 匹配編號小於特定值的元素

:contains(text) 匹配包含給定文字的元素

:hidden 匹配不可見或 type 為 hidden 的元素

:visible 匹配可見的元素

[attr] 匹配包含給定屬性的元素

[attr = value] 匹配給定屬性是某個特定值的元素

[attr != value] 匹配給定屬性不存在或不等於特定值的元素

[attr ^= value] 匹配給定屬性是以某些值開始的元素

[attr $= value] 匹配給定屬性是以某些值結束的元素

[attr *= value] 匹配給定屬性包含某些值的元素

要了解全部 jquery 選擇器請檢視 jquery api

除了通過選擇器構造包含指定 dom 元素的 jquery 物件之外,jquery 物件自身也提供了許多篩選函式來幫助我們近一步找到想要的元素。

eq(index) 選擇集合中的第 index 個元素

first() 選擇集合中第乙個元素

last() 選擇集合中最後乙個元素

hasclass(class) 選擇含有特定 class 的元素

filter(select) 選擇與 select 匹配的元素

is(select) 判斷是否與 select 匹配,只要有乙個元素匹配就返回 true

has(select) 選擇包含與 select 匹配的後代的元素

map(cb) 對 dom 集合進行 map 操作以構造乙個新陣列

not(select) 選擇不與 select 匹配的元素

children() 選擇集合中所有元素的子元素

parent() 選擇元素集合中所有元素的父元素

next() 選擇元素的下乙個兄弟元素

find(select) 在匹配的元素上再次應用選擇器進行選擇

要了解全部 jquery 選擇器請檢視 jquery api

hello7

hell2

hell3

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

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

jQuery選擇器(三)

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

三 jQuery選擇器

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...