jQuery常用選擇器總結

c-xuan發表於2014-03-29

這是看《鋒利的jquery》時,整理出來的一些東西,很多方法,需要大家親自實踐一下,才會理解得更加深刻,切莫眼高手低哦……

Jquery選擇器分類:基本選擇器,層次選擇器,過濾選擇器,表單選擇器

一、基本選擇器jquery中最常用的選擇器,也是最簡單的選擇器。通過元素id、class和標籤名等來查詢DOM元素。

-基本選擇器

選擇器

描述

返回

示例

#id

根據給定的id匹配一個元素

單個元素

$(“#test”)選取idtest的元素

.class

根據給定的類名匹配元素

集合元素

$(“.test”)選取所有classtest的元素

element

根據給定的的元素名匹配元素

集合元素

$(“p”) 選取所有的<p>元素

*

匹配所有元素

集合元素

$(“*”)選取所有元素

Selector1,Selector2, ……, SelectorN

將每一個選擇器匹配到的元素合併後一起返回

集合元素

$(“div,span,p.myClass”)選取所有<div>,<span>和擁有classmyClass<p>標籤的一組元素

二、層次選擇器:通過DOM元素之間的層次關係獲取特定元素,如後代元素、子元素、相鄰元素、兄弟元素等。層次選擇器是一個很好的選擇

-層次選擇器

選擇器

描述

返回

示例

$(“ancestor  descendant”)

選取ancestor元素裡所有descendant(後代)元素

集合元素

$(“div span”)選取<div>裡所有的<span>元素

$(“parent>child”)

選取父元素下的子元素

集合元素

$(“div>span”)選取<div>下元素名為<span>的子元素

$(‘prev+next')

選取緊接在prev元素後的next元素

集合元素

$(‘.one+div') 選取classone的下一個<div>元素(相鄰元素)

$(‘prev~siblings')

選取prev元素之後的所有元素

集合元素

$(‘.one+div') 選取classone的元素後面所有<div>兄弟元素

 

注意:

$(‘prev+next')選擇器與next()方法的等價關係

$(‘.one+div')    等價於     $(“.one”).next(“div”)

$(‘prev~siblings')選擇器與nextAll()方法的等價關係

$(‘.one~div')     等價於    $(“.one”).nextAll(“div”)

 

三、過濾選擇器:主要是通過特定的過濾選擇器規則來篩選出所需的DOM元素,過濾規則與css中偽類選擇器語法相同,即選擇器都以一個冒號(:)開頭。

按照不同的過濾規則,過濾選擇器分為:基本過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單物件屬性座率選擇器

 

1-基本過濾選擇器

 

選擇器

描述

返回

示例

:first

選取第一個元素

單個元素

$(“div:first”)選取所有<div>元素中第一個<div>元素

:last

選取最後一個元素

單個元素

$(“div:last”)選取所有<div>元素中最後一個<div>元素

:not(selector)

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

集合元素

$(“input:not(.myClass)”)選取class為不是myClass<input>元素

:even

選取索引是偶數的所有元素,索引從0開始

集合元素

$(“input:even”) 選取索引是偶數的<input>元素

:odd

選取索引是奇數的所有元素,索引從0開始

集合元素

$(“input:odd”) 選取索引是奇數的<input>元素

:eq(index)

選取索引等於index的元素(index0開始)

單個元素

$(“input:eq(1)”選取索引為1<input>元素

:gt(index)

選取索引大於index的元素(index0開始)

集合元素

$(“input:gt(1)”) 選取索引大於1<input>元素(注:大於1,而不包括1

:lt(index)

選取索引小於index的元素(index0開始)

集合元素

$(“input:gt(1)”) 選取索引小於1<input>元素(注:小於1,而不包括1

:header

選取所有的標題元素,例如h1h2h3等待

集合元素

$(“:header”)選取網頁中所有的<h1><h2><h3>……

:animated

選取當前正在執行動畫的所有元素

集合元素

$(“div:animated”)選取正在執行動畫的<div>元素

 

2-內容過濾選擇器

 

選擇器

描述

返回

示例

:contains(text)

選取含有文字內容為”text”的元素

集合元素

$(“div:contains(‘')”)選取含有文字“我”的<div>元素

:empty

選取不包含子元素或者文字的空元素

集合元素

$(“div:empty”)選取不包含子元素(包括文字元素)的<div>空元素

:has(selector)

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

集合元素

$(“div:has(p)”) 選取含有<p>元素的<div>元素

:parent

選取含有子元素或者文字元素

集合元素

$(“div:parent”) 選取擁有子元素(包括文字元素)的<div>元素

 

3-可見性過濾選擇器

 

選擇器

描述

返回

示例

:hidden

選取所有不可見的元素

集合元素

$(“:hidden”)選取所有不可見的元素。包括<input type=”hidden”><div style=”disply:none;><div style=”visibility:hidden;”>等元素。如果只想選取<input>元素,可以使用$(“input:hidden”)

:visible

選取不包含子元素或者文字的空元素

集合元素

$(“div:visible”)選取所有可見的<div>元素

 

4-屬性過濾選擇器

 

選擇器

描述

返回

示例

[attribute]

選取擁有此屬性的元素

集合元素

$(“div[id]”)選取擁有屬性id的元素

[attribute=value]

選取屬性的值為value的元素

集合元素

$(“div[title=test]”)選取屬性title”test”<div>元素

[attribute!=value]

選取屬性的值不等於value的元素

集合元素

$(“div[title!=test]”)選取屬性title不等於”test”<div>元素(注意:沒有屬性的title<div>元素也會被選取)

[attribute^=value]

選取屬性的值以value開始的元素

集合元素

$(“div[title^=test]”)選取屬性title”test”開始的<div>元素

[attribute$=value]

選取屬性的值以value結束的元素

集合元素

$(“div[title$=test]”)選取屬性title”test”結束的<div>元素

[attribute*=value]

選取屬性值含有value的元素

集合元素

$(“div[title*=test]”)選取屬性title含有”test”<div>元素

[selector1][selector2][selectorN]

用屬性選擇器合併成一個複合屬性選擇器,滿足多個條件。每個選擇一次,縮小一次範圍

集合元素

$(“div[id][title$='tets']”)選取擁有屬性id,並且屬性title”test”結束的<div>元素

5-子元素過濾選擇器

 

選擇器

描述

返回

示例

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

選取每個父元素下的第index個子元素或者奇偶元素(index1算起)

集合元素

:eq(index)只匹配一個元素,而:nth-child將為每一個父元素匹配子元素,並且:nth-child(index)index是從1開始的,而:eq(index)是從0算起

:first-child

選取每個父元素的第一個子元素

集合元素

:first只返回單個元素,而:first-child選擇符將為每個父元素匹配第一個子元素

:last-child

選取每個父元素的最後一個子元素

集合元素

:last只返回單個元素,而:last-child選擇符將為每個父元素匹配最後一個子元素

:only-child

如果某個元素是它父元素中唯一的子元素,那麼將會被匹配。如果父元素中含有其他元素,則不會被匹配

集合元素

 

:nth-child()選擇器詳細功能

1:nth-child(even)能選取每個父元素下的索引值是偶數的元素。

2:nth-child(odd) 能選取每個父元素下的索引值是奇數的元素。

3:nth-child(2)能選取每個父元素下的索引值等於2的元素

4:nth-child(3n)能選取每個父元素下的索引值是3的倍數的元素,(n0開始)。

5:nth-child(3n+1)能選取每個父元素的索引值是(3n+1)的元素。(n0開始)

6-表單物件屬性過濾選擇器

 

選擇器

描述

返回

示例

:enabled

選取所有可用元素

集合元素

$(“#form1:enabled”) ;選取id”form1”的表單內的所有可用元素

:disabled

選取所有不可用元素

集合元素

$(“#form1:disabled”) ;選取id”form1”的表單內的所有不可用元素

:checked

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

集合元素

$(“input:checked”);選取所有被選中的<input>元素

:selected

選取所有被選中的選項元素(下拉選單)

集合元素

$(“select:selected”);選取所有被選中的選項元素

四、表單選擇器

-表單物件屬性過濾示例

 

選擇器

描述

返回

示例

:input

選取所有可用元素

集合元素

$(“:input”) 選取所有<input><textarea><select><button>元素

:text

選取所有不可用元素

集合元素

$(“:text”) 選取所有的單行文字

:password

選取所有的密碼框

集合元素

$(“: password”)選取所有的密碼框

:radio

選取所有的單選框

集合元素

$(“:radio”)選取所有的單選框

:checkbox

選取所有的多選框

集合元素

$(“:checkbox”)選取所有的多選框

:submit

選取所有的提交按鈕

集合元素

$(“:submit”)選取所有的提交按鈕

:image

選取所有的影象按鈕

集合元素

$(“:image”)選取所有的影象按鈕

:reset

選取所有的重置按鈕

集合元素

$(“:reset”)選取所有的重置按鈕

:button

選取所有的按鈕

集合元素

$(“:button”)選取所有按鈕

:file

選取所有的上傳域

集合元素

$(:file)選取所有的上傳域

:hidden

選取所有不可見元素

集合元素

$(“:hidden”)選取所有不可見元素


原文連結

http://www.jb51.net/article/30291.htm

相關文章