jquery 常用選擇器

層次選擇器：

$(『div p』);//選取div下的所有的p元素

$(『div>p』).css(『border』,』1px solid red』);//只選取div下的直接子元素

//相鄰的元素(′

divp

).cs

s(′b

orde

r′,′

1pxs

olid

red′

);與 (『div』).nextall(『p』)等價;//表示div後面的

所有p兄弟元素

$(『div ~ *』).css(『border』,』1px solid red』);//表示div後面的所有兄弟元素(′

div+

p′).

css(

′bor

der′

,′1p

xsol

idre

d′);

與 (『div』).next(『p』)等價//這種寫法表示div後

只找緊挨著的第乙個兄弟元素，並且該元素是p。

獲得兄弟元素的方法：

next(); //當前元素之後的緊鄰著的第乙個兄弟元素（下乙個）

nextall();//當前元素之後的所有兄弟元素

prev();//當前元素之前的緊鄰著的兄弟元素（上乙個）

prevall();//當前元素之前的所有兄弟元素

siblings();//當前元素的所有兄弟元素

基本過濾選擇器：(′

p:fi

rst′

)與(『p』).first()是等價的。獲取所有p元素中的第乙個p元素(′

p:la

st′)

與 (『p』).last()

$(『p:eq(2)』)在所有的p元素中找到索引為2的元素

$(『p:even』)選取所有奇數的p標籤

$(『p:odd』)選取所有偶數的p標籤

$(『p:not(.tst)』).css();選取所有的不應用.tst這種樣式的p元素not後面寫乙個選擇器名稱

$(『p:gt(1)』)選取所有索引值大於1的p元素

$(『p:lt(3)』)選取所有索引值小於3的p元素。

$(『:header』)選取頁面上所有的h1-h6的元素。（如果這樣寫的話，中間絕對不能有空格。）

屬性過濾選擇器：

$(「div[id]」)選取有id屬性的

$(「div[title=test]」)選取title屬性為「test」的

，jquery中沒有對getelementsbyname

進行封裝，用(「

inpu

t[na

me=a

bc]」

) (「div[title!=test]」)選取title屬性不為「test」的

還可以選擇開頭【name^=值】、結束【 name$=值】、包含【 name*=值】等，條件還可以復合。【[屬性1=a][屬性2=b]…】（*）

表單物件屬性選擇器（過濾器）：

(「#form1 :enabled」)選取id為form1的表單內所有啟用的元素

(「#form1 :disabled」)選取id為form1的表單內所有禁用的元素

$(「input:checked」)選取所有選中的元素（radio、checkbox）,這個中間不能加空格.

$(「select :selected」)選取所有選中的選項元素（下拉列表）

表單濾選擇器：

(『#form1:enabled』);//這個表示能夠啟用的且id為form1的標籤

(『#form1 :enabled』)；//這個表示能夠啟用的且id為form1下的所有啟用的元素。

$(『input:checked』)(『

inpu

t:di

sabl

ed′)

(『select:selected』) (「

:inp

ut")

選取所有

put>

、xtar

ea>

、lect

和tton

>元素

。和(「input」)不一樣， (「

inpu

t」)只

獲得(「:text」)選取所有單行文字框，等價於 ("

inpu

t[ty

pe=t

ext]

"), (『input[type=text]』),(『

:tex

t′);

(「:password」)選取所有密碼框。

內容過濾選擇器：

:contains(text):過濾出包含給定文字的元素。：empty包含沒有子元素的或者是內容為空的元素。：has(selecttor)

:parent 獲得有子元素的元素。

可見性過濾器：

:hidden

選取所有不可見元素包括:(如果直接寫:hidden則會包含head\title\script\style….) 1.表單元素type=「hidden」 2.設定css的display:none 3.高度和寬度明確設定為0的元素。 4.父元素時隱藏的，所以子元素也是隱藏的 visibility: hidden 與opacity為0不算，因為還佔位所以不認為是hidden.(與之前版本

jquery不太一樣，1.3.2之前)

:visible

選取所有可見元素

子元素過濾選擇器：

first-child 與first的區別：first只能選取第乙個，而first-child,則能選取每個子元素的第乙個元素。

last-child：

only-child:匹配當前父元素中只有乙個子元素的元素。

nth-child:對比eq()來理解，eq()值匹配乙個，nth-child()為每個父元素都要匹配乙個子元素。

nth-child(index),index從1開始

nth-child(even)

nth-child(odd)

nth-child(3n),選取3的倍數的元素

nth-child(3n+1)滿足3的倍數+1的元素

注意：

1.通過jquery選擇器選擇的物件本身就是乙個jquery物件，選擇器具有隱式迭代     的作用，例如： 
$('p').click(function());
是為所有的p都注釋了click事件。

2.無論選擇器選擇了幾個元素返回的乙個元素都是乙個集合物件，如果沒有找到相應的元素，則這個集合物件的length值為0，如果選擇到了元素，這個length的元素就是選擇的元素的索引值。所以也根據這個屬性來判斷元素是否存在。例如：

iif($('#div').length>0)//判斷元素是否存在

3.在事件中this還是表示當前觸發事件的元素的物件，但是這裡的this是dom物件而不是jquery物件。如果需要執行jquery中的方法或屬性時，應該把this轉換為jquery物件

轉換方式為：$(this);

jquery 常用選擇器

jquery 常用選擇器

jQuery常用選擇器

JQuery常用選擇器

jquery 常用選擇器

jquery 常用選擇器

jQuery常用選擇器

JQuery常用選擇器

相關推薦