鋒利的jquery 選擇器

1、基本選擇器

$('#id') ,

$('.class') ,

$('element')

注：$('*').css("background","#bbffaa")     表示 改變所有元素

的背景色

2、層次選擇器

$("div span")   --- 選取裡的所有的元素

$("div>span")  --- 選取元素下，元素名為的子元素

$(".one + div") --- 選取class為one的 下乙個元素  <==> $(".one").next("div")

$("#two ~ div")---選取id為two的後面

所有同輩

元素    <==> $("#two").nextall("div")

注：$("#two").siblings

("div")  選取id為two的所有同輩

元素(沒有前後限定)

3、過濾選擇器 （以：開頭）

1)基本過濾選擇器

：first     ---- 例 $("div:first")   選取所有元素中的第乙個元素

：last     ---- 例 $("div:last")   選取所有元素中的第後乙個元素

：not(selector)   ----例$("input:not(.myclass)") 選取class不是myclass的所有元素

：even  選取索引為偶數的所有元素(索引從0開始)  例$("input:even") 選取索引為偶數的元素

：odd 

選取索引為奇數的所有元素(索引從0開始)

：eq(index) 選取索引等於index的元素(index 從0開始)

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

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

：header 選取所有標題元素 如：h1,h2,h3 等。  例$(":header") 選取網頁中所有標題元素 如：h1,h2,h3 .等

：animated 選取當前正在執行動畫的所有元素。例$("div:animated") 選取正在執行動畫的元素

2)內容過濾選擇器

：contains(text)  選取文字內容包含text的元素。 例$("div:contains('我')")選取文字包含「我」的元素

：empty  選取不包含子元素或文字的空元素。 例$("div:empty")選取不包含子元素(包含文字元素)的元素

：has(selector) 選取含有選擇器所匹配的元素的元素。 例$("div:has(p)")選取含有元素的元素

：parent  

選取含有子元素或者文字的元素。例$("div:parent")  選取擁有子元素(包含文字元素)的元素

3)可見性過濾選擇器

：hidden選取所有不可見的元素

$(":hidden")  選取所有不可見元素，包括;

和等元素。

$("input:hidden").show(3000) 選取所有不可見的元素,讓它顯示3000毫秒

：visible選取所有可見的元素。 例$("div:visible") 選取所有可見的元素

4)屬性過濾選擇器 （[..]）

[attribute]  選取擁有此屬性的元素。 例$("div[id]") 選取擁有id屬性的元素

[attribute=value] 選取屬性值為value的元素。 例$("div[title=test]") 選取屬性title為test的元素

[attribute!=value]選取屬性值不等於value的元素。

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

[attribute^

=value] 選取屬性值以value開頭的元素。

[attribute$

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

[attribute*

=value] 選取屬性值含有value的元素。

5)子元素過濾選擇器

：first-child   選取父元素的第乙個子元素

：last-child   選取父元素的最後乙個子元素

：only-child  如果某元素是它父元素的唯一子元素，那麼它將會匹配。如果還有其他子元素，則不匹配。

：nth-child(even ) 選取每個父元素下的索引值為偶數的子元素。

：nth-child(odd ) 選取每個父元素下的索引值為奇數的子元素。

：nth-child(2 ) 選取每個父元素下的索引值為2 的子元素。

：nth-child(3n ) 選取每個父元素下的索引值為3的倍數 的子元素。(n從0開始)

：nth-child(3n+1 ) 選取每個父元素下的索引值為（3n+1） 的子元素。(n從0開始)

注意：

：nth-child(index)  index 是從1開始 ；

：eq(index) index 是從0開始 ； 同理，：first和：first-child，：last和：last-child 類似。

6)表單屬性過濾選擇器

：enabled  選取所有可用元素。

：disabled 選取所有不可用元素。

：checked  選取所有被選中的元素(單選框，核取方塊)。

：selected 選取所有被選中的選項元素(下拉列表)。

例： $("#from1 input:enabled ").val("hello...");  改變表單內可用

元素的值。

$("#from1 input:disabled ").val("hello...");  改變表單內不可用

元素的值。

$("input :checked ").length ;  獲取多選框選中的個數

$("select :selected ").text();  獲取下拉列表選中的內容。

4、表單選擇器

：input  選取所有,..元素

：text   選取所有單行文字框

：password  選取所有的密碼框

：radio  選取所有的單選框

：checkbox 選取所有的多選框

：submit  選取所有的提交按鈕

：image  選取所有的影象按鈕

：reset  選取所有的重置按鈕

：button 選取所有的按鈕

：file  選取所有的上傳域

：hidden 選取所有不可見元素

在選擇器中可以使用「\\」 對特殊符號進行轉義；例如 . /# 等等

區別：

中間多乙個空格

----   表示選取隱藏的class為test的元素。

**-

JQuery 選擇器（鋒利的Jquery

prev div 選擇 id 為prev 後面的所有同輩元素 prev nextall div 同上 prev siblings div 選擇 id 為prev 所有同輩元素 prev div 選擇 id 為prev 後乙個同輩元素，仍然返回集合元素 parent child 相當於 parent ...

鋒利的jquery 選擇器

2011 3 23 jquery 選擇器 1 基本選擇器 id class element 注 css background bbffaa 表示 改變所有元素 的背景色 2 層次選擇器 div span 選取裡的所有的元素 div span 選取元素下，元素名為的子元素 one div 選取clas...

《鋒利的jQuery》 層次選擇器

如css 一樣，jquery可通過dom元素之間的關係來選擇特定的元素，如後代元素 子元素 相鄰元素和同輩元素等。css選擇器參考 座標 網頁底部 層次選擇器 選擇器描述返回 示例 ancestor descendant 選取ancestor元素裡的所有descendant 後代 元素，後代 子代，...