DIV CSS 佈局教程網

jq選擇器大全
編輯:JQuery常見問題     
一、基本選擇器

選擇器 描 述 返回 示例
#id 根據給定id匹配一個元素 單個元素 $("#test") 選取id為test的元素
.class 根據給定類名匹配一個元素 集合元素 $(".test") 選取class為test的元素
element 根據給定元素名匹配一個元素 集合元素 $("p") 選取p元素
selector1,selector2...selectorN 將每一個選擇器匹配到元素合成後一起返回 集合元素 $("div , span ,p , myClass")選取所在div span 和擁有class為myClass的標簽的一組元素
* 匹配所有元素 集合元素 $("*") 選取所在的元素




二、層次選擇器

選擇器 描 述 返回 示例
$("ancestor descendant") 選取ancestor元素裡的所有descendant(後代)元素 集合元素 $("div span")選取div裡面的所有span元素
$("parent > child") 選取parent元素下的child(子)元素。 集合元素 $("div > span")選取div元素下的元素名是span的子元素
$("prev + next") 選取緊接在prev元素後的next元素 集合元素 $(.one + div)選取class為one的下一個div元素
$("prev~siblings") 選取 prev 元素之後的所有siblings元素 集合元素 $("#one~div")選取id為two的元素後面的所有div兄弟元素


可以用next()方法來代替$("prev + next")

$(".one+div") <==> $(".one").next("div");



可用nextAll()代替$("prev~siblings")

$("#prev~div") <==> $("#prev").nextAll("div");



siblings()方法與前後位置無關,只要是同輩節點就能匹配。



三、過濾選擇器

1、基本過濾選擇器

選擇器 描 述 返回 示例
:first 選取第1個元素 單個元素 $("div:first")
:last 選取最後一個元素 單個元素 $("div:last")
:not(selector) 去除所有與給定選擇器匹配的元素 集合元素 $("input:not(.myClass)")
:even 選取索引是偶數的所有元素,索引從0開始 集合元素 $("ul li:even")
:odd 選取索引是奇數的所有元素,索引從1開始 集合元素 $("ul li:odd")
:eq(index) 選取索引等於index的元素,index從0開始 單個元素 $("ul:eq(3)")
:gt(index) 選取索引大於index的元素,index從0開始,不包括index 集合元素 $("ul li:gt(3)")
:lt(index) 選取索引小於index的元素,index從0開始,不包括index 集合元素 $("ul li:lt(3)")
:header 選取所有標題元素,如:h1 h2 h3... 集合元素 $(":header")
:animated 選取當前正在執行動畫的所有元素 集合元素 $("div:animated")




2、內容過濾選擇器

選擇器 描述 返回 示例
:contains(text) 選取含有文本內容text的元素 集合元素 $("div:contains('我')")
:empty 選取不包含子元素或文本的空元素 集合元素 $("div:empty")
:has(selector) 選取含有選擇器所匹配元素的元素 集合元素 $("div:has(p)")
:parent 選取含有子元素或文本的元素 集合元素 $("div:parent")




3、可見性過濾選擇器

選擇器 描述 返回 示例
:hidden 選取所有不可見元素 集合元素 $(":hidden")
:visible 選取所有可見元素 集合元素 $("div:visible")


$(":hidden")==》選取所有不可見元素。包括:<input type="hidden"/> 、 <div style="display:none;"> 、<div style="visibility=hidden">等元素。



4、屬性過濾選擇器

選擇器 描述 返回 示例
[attribute] 選取擁有此屬性的元素 集合元素 $("div[id]")
[attribute = value] 選取屬性值為value的元素 集合元素 $("div[title=test]")
[attribute != value] 選取屬性值不等於value的元素 集合元素 $("div[titil!=test]")
[attribute ^= value] 選取屬性值以value開始的元素 集合元素 $("div[titil^=test]")
[attribute $= value] 選取屬性值以value結束的元素 集合元素 $("div[titil$=test]")
[attribute *= value] 選取屬性值含有value值的元素 集合元素 $("div[titil*=test]")
[selector][selector2][selectorN]
用屬性選擇器合並成一個復合屬性選擇器,滿足多個條件。

集合元素
$("div[id][title=test]")

選取擁有屬性id , 並且屬性title 等於test的div元素



5、子元素過濾選擇器

選擇器 描述 返回 示例
:nth-child(index/even/odd)
選取每個父元素下的第index個子元素或奇偶元素

index從1開始

集合元素 $("ul li:nth-child(3)")
:first-child 選取每個父元素的第1個子元素 集合元素 $("ul li:first-child")
:last-child 選取第個父元素下的最後一個子元素 集合元素 $("ul li:last-child")
:only-child
如果某個元素是它父元素中惟一的子元素,那麼將會

被匹配。如果父元素中含有其它元素,剛不會匹配

集合元素 $("div:only-child")
:nth-child(even) =>選取每個父元素下的偶子元素

:nth-child(odd) =>選取每個父元素下的奇子元素

:nth-child(3n) =>選取每個父元素下的索引值是3倍數的元素(n從0開始)



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

選擇器 描述 返回值 示例
:enabled 選取所有可用元素 集合元素 $("#form1:enabled")
:disabled 選取所有不可用元素 集合元素 $("#form1:disabled")
:checked
選取所有被選中的元素

(單選框、復選框)

集合元素 $("input:checked")
:selected
選取所有被選中的選項元素

(下拉列表)

集合元素 $("select:selected")


四、表單選擇器

選擇器 描述 返回 示例
:input 選取所有input 、textarea 、select 、button元素 集合元素 $(":input")
:text 選取所有的單行文本框 集合元素 $(":text")
:password 選取所有的密碼框 集合元素 $(":password")
:radio 選取所有的單選框 集合元素 $(":radio")
:checkbox 選取所有的多選框 集合元素 $(":checkbox")
:submit 選取所有的提交按鈕 集合元素 $(":submit")
:image 選取所有的圖像按鈕 集合元素 $(":image")
:reset 選取所有的重置按鈕 集合元素 $(":reset")
:button 選取所有的按鈕 集合元素 $(":button")
:file 選取所有的上傳域 集合元素 $(":file")
:hidden 選取所有的不可見元素 集合元素 $(":hidden")

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved