jQuery選擇器大全

2021-06-19 18:15:55 字數 3107 閱讀 9389

jquery最強大的就是提供了乙個萬能的屬性選擇器。

2.1基本選擇器

選擇表示式

說明

舉例

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

$("#testdiv2")  獲取id為testdiv2的元素

.class

根據給定的類匹配元素(也就是取class的值)用.

$(".mydiv")    獲取class為mydiv的一組元素

element

根據給定的元素名匹配所有元素,直接寫上元素名例如(p,a,input,div等)

$("div")    獲取所有的div元素

selector1,selector2,selectorn

將每乙個選擇器匹配到的元素合併後一起返回,選擇器可以是id,class,element用,隔開

$("#testdiv2,p")

$("p,span,div.mydiv") 獲取所有的p,span和class為mydiv的元素

*選擇所有的元素

$("*")

2.2簡單選擇器

選擇表示式

說明

舉例

:first

匹配找到的第乙個元素

$("div:first")

:last

匹配找到的最後乙個元素

$("div:last")

:eq(index)

匹配乙個給定索引值的元素,當然要存在才可以找得到,索引從0開始

$("div:eq(1)")

:gt(index)

匹配所有大於給定索引值的元素

$("div:gt(0)")    查詢第1個以後的元素

:lt(index)

匹配所有小於給定索引值的元素

$("div:lt(2)")     查詢第一行和第二行的元素

:even

匹配所有索引值為偶數的元素,從 0 開始計數

$("div:even")

查詢第1,3,5個div

:odd

匹配所有索引值為奇數的元素,從 0 開始計數

$("div:odd")

查詢第2,4個div

:not(selector)

去除所有與給定選擇器匹配的元素

selector為表示式,可以是屬性裡面的乙個值

$("input:not(:checked)")

查詢所有未選中的input 元素[注 :checked為自定義篩選選擇器,後面會講到]

:header

匹配如 h1, h2, h3之類的標題元素

$(":header").css("background", "#eee");

新增樣式

:animated

匹配所有正在執行動畫效果的元素

暫無例子

3.3:內容選擇器

選擇表示式

說明

舉例

:contains(text)

匹配包含給定文字的元素,只要裡面出現即可

$("p:contains('段落')")

找帶有段落字樣的p元素

:empty

匹配所有不包含子元素或者文字的空元素

$("div:empty")

:has(selector)

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

$("div:has('p')")

:parent

匹配含有子元素或者文字的元素

$("div:parent")

4.4子元素選擇器

選擇器

說明

舉例

:first-child

匹配第乙個子元素

$("ul li:first-child")//在每個 ul 中查詢第乙個 li

:last-child

匹配最後乙個子元素

$("ul li:last-child")//在每個 ul 中查詢最後乙個 li

:nth-child(index/even/odd/equation)

匹配其父元素下的第n個子或奇偶元素

':eq(index)' 只匹配乙個元素,而這個將為每乙個父元素匹配子元素。:nth-child從1開始的,而:eq()是從0算起的!

可以使用:

nth-child(even)//偶數行

:nth-child(odd)//奇數行

:nth-child(3n)

:nth-child(2)//索引為2的

:nth-child(3n+1)

:nth-child(3n+2)

$("ul li:nth-child(2)")//在每個 ul 查詢第 2 個li

:nth-child(index/even/odd/equation)

匹配其父元素下的第n個子或奇偶元素

$("ul li:nth-child(2)")//在每個 ul 查詢第 2 個li

:only-child

如果某個元素是父元素中唯一的子元素,那將會被匹配

如果父元素中含有其他元素,那將不會被匹配。

$("ul li:only-child")//在 ul 中查詢是唯一子元素的 li

4.5:可見性選擇器

選擇器

說明

舉例

:hidden

匹配所有的不可見元素,input 元素的 type 屬性為 "hidden" 的話也會被匹配到

$("div:hidden")

:visible

匹配所有的可見元素

$("div:visible")//元素來匹配

$(".divh:visible")//根據class來匹配

JQuery選擇器大全

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

JQuery選擇器大全

jquery 的選擇器可謂之強大無比,這裡簡單地總結一下常用的元素查詢方法 myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用my...

jQuery選擇器大全

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