亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JQuery選擇器特輯 詳細小結(jié)

 更新時間:2012年05月14日 02:11:02   作者:  
Jquery選擇器分類:基本選擇器,層次選擇器,過濾選擇器,表單選擇器

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

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

一、基本選擇器jquery中最常用的選擇器,也是最簡單的選擇器。通過元素id、class和標(biāo)簽名等來查找DOM元素。

-基本選擇器

選擇器

描述

返回

示例

#id

根據(jù)給定的id匹配一個元素

單個元素

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

.class

根據(jù)給定的類名匹配元素

集合元素

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

element

根據(jù)給定的的元素名匹配元素

集合元素

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

*

匹配所有元素

集合元素

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

Selector1,Selector2, ……, SelectorN

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

集合元素

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

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

-層次選擇器

選擇器

描述

返回

示例

$(“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()方法的等價關(guān)系

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

$(‘prev~siblings')選擇器與nextAll()方法的等價關(guān)系

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

 

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

按照不同的過濾規(guī)則,過濾選擇器分為:基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性座率選擇器

 

1-基本過濾選擇器

 

選擇器

描述

返回

示例

:first

選取第一個元素

單個元素

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

:last

選取最后一個元素

單個元素

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

:not(selector)

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

集合元素

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

:even

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

集合元素

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

:odd

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

集合元素

$(“input:odd”) 選取索引是奇數(shù)的<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

選取所有的標(biāo)題元素,例如h1,h2h3等待

集合元素

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

:animated

選取當(dāng)前正在執(zhí)行動畫的所有元素

集合元素

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

 

2-內(nèi)容過濾選擇器

 

選擇器

描述

返回

示例

:contains(text)

選取含有文本內(nèi)容為”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>元素也會被選?。?/P>

[attribute^=value]

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

集合元素

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

[attribute$=value]

選取屬性的值以value結(jié)束的元素

集合元素

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

[attribute*=value]

選取屬性值含有value的元素

集合元素

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

[selector1][selector2][selectorN]

用屬性選擇器合并成一個復(fù)合屬性選擇器,滿足多個條件。每個選擇一次,縮小一次范圍

集合元素

$(“div[id][title$='tets']”)選取擁有屬性id,并且屬性title”test”結(jié)束的<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)能選取每個父元素下的索引值是偶數(shù)的元素。

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

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

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

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

6-表單對象屬性過濾選擇器

 

選擇器

描述

返回

示例

:enabled

選取所有可用元素

集合元素

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

:disabled

選取所有不可用元素

集合元素

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

:checked

選取所有被選中的元素(單選框,復(fù)選框)

集合元素

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

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

相關(guān)文章

最新評論