JQuery選擇器特輯 詳細小結

NO IMAGE

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

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

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

表-基本選擇器

選擇器

描述

返回

示例

#id

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

單個元素

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

.class

根據給定的類名匹配元素

集合元素

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

element

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

集合元素

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

*

匹配所有元素

集合元素

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

Selector1,Selector2, ……, SelectorN

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

集合元素

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

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

表-層次選擇器

選擇器

描述

返回

示例

$(“ancestor  descendant”)

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

集合元素

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

$(“parent>child”)

選取父元素下的子元素

集合元素

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

$(‘prev next’)

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

集合元素

$(‘.one div’) 選取class為one的下一個<div>元素(相鄰元素)

$(‘prev~siblings’)

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

集合元素

$(‘.one div’) 選取class為one的元素後面所有<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的元素(index從0開始)

單個元素

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

:gt(index)

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

集合元素

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

:lt(index)

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

集合元素

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

:header

選取所有的標題元素,例如h1,h2,h3等待

集合元素

$(“: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個子元素或者奇偶元素(index從1算起)

集合元素

: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的倍數的元素,(n從0開始)。

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

表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”)選取所有不可見元素

紫陌言:吾生也有涯而知也無涯……

您可能感興趣的文章:

jQuery Selector選擇器小結jQuery的強大選擇器小結jQuery選擇器全面總結