1. 程式人生 > >jQuery中的一些選擇器

jQuery中的一些選擇器

① CSS選擇器
選擇器 語法 示例
標籤選擇器 D{CSS} td{font-size:14px;}
ID選擇器 #ID{CSS} #header{font-size:14px;}
類選擇器 D.calssName{Css} .dream{font-size:14px;}
群組選擇器 E1,E2,E3{CSS} td,p,div,a{margin:0px;}
後代選擇器 E F{Css} #Link a{color:red;}
萬用字元選擇符 *{CSS} *{font-size:14px;}

②jQuery基本選擇器
選擇器 jQuery 返回
標籤選擇器 Element $("tagName") 集合元素
ID選擇器 #id $("#ID") 單個元素
類選擇器 .class $(".demo") 集合元素
群組選擇器 selector,2 $("div,span,p,myclass") 集合元素
萬用字元選擇符 $("*") 集合元素

③層次選擇器
選擇器 jQuery
$("ancestor descemdant") $("div span")選取div中所有的span(集合元素)
$("parent>child") $("div>span")選取所有div元素下名為span的子元素(集合元素)
$("prev+next") $(".one+div")選取class為.one的下一個div元素(集合元素)
$("prev^sibling") $("#two-div")選取id為two的元素後面所有的div兄弟元素(集合元素)

④基本過濾選擇器
過濾器 jQuery
:first $("div:first")選取所有<div>元素中的第一個<div>元素(單個元素)
:last $("div:last")選取所有<div>元素中的最後一個<div>元素(單個元素)
:not(selector) $("input:not(.myClass)")選取class不是myClass的<input>元素(集合元素)
:even $("input:even")選取索引是偶數的<input>元素(索引從0開始)(集合元素)
:odd $("input:odd")選取索引是奇數的<input>元素(索引從0開始)(集合元素)
:eq(index) $("input:eq(1)")選取索引等於1的<input>元素(單個元素)
:gt(index) $("input:gt(1)")選取索引大於1的<input>元素(集合元素)
:It(index) $("input:It(4)")選取索引小於4的<input>元素(集合元素)
:header $(":header")選取所有標題元素<h1><h2><h3>(集合元素)
:animated $("div:animated")選取正在執行動畫的<div>元素(集合元素)

⑤內容過濾選擇器
過濾器 jQuery
:contains(text) $("div:contains(我)")選取含有文字"我"的<div>元素(集合元素)
:empty $("div:empty")選取不包含子元素(文字元素)的<div>空元素(集合元素)
:has(selector) $("div:has(p)")選取含有<p>元素的<div>元素(集合元素)
:parent $("div:parent")選取擁有子元素(包括文字元素)的<div>元素(集合元素)

⑥屬性過濾選擇器
過濾器 jQuery
[attribute] $("div[id]")選取所有擁有id屬性的元素(集合元素)
[attribute=value] #("div[title=test]")選取元素屬性title值為test的<div>元素(集合元素)
[attribute!=value] $("div[title!=test]")選取元素屬性title值不為test的<div>元素(集合元素)
[attribute^=value] $("div^=test")選取屬性title值為test開頭的div元素(集合元素)
[attribute$=value] $("div$=test")選取屬性title值為test結尾的div元素(集合元素)
[attribute*=value] $("div*=test")選取屬性title值中包含test的div元素(集合元素)
[selector][selector2][selectorN] $("div[id][title$="test"]")選取擁有id屬性,且title屬性值以test結尾的所有div元素

⑦子元素過濾選擇器
過濾器 jQuer
:nth-child(index/even/odd/equation) :eq(index)只匹配一個元素,而:nth-child將為每一個父元素匹配子元素,並且:nth-child(index)下標從1開始,而:eq(index)是從0開始
:nth-child(even) 選取每個父元素下的索引值是偶數的元素
:nth-child(odd) 選取每個父元素下的索引值是奇數的元素
:nth-child(3n)選取每個父元素下的索引值是3的倍數的元素

:first-child :frist只返回單個元素,而:first-child選擇符將為每一父元素匹配第一個子元素。
例如$(“ul li:first-child”);選取每個<ul>中的第一個<li>元素
注意
$(“ul li :first-child”);選取每個<ul>中的每一個<li>元素中的第一個子元素

:last-child :last只返回單個元素而:last-child選擇器將為每個父元素匹配最後一個子元素
例如$(“ul li:last-child”);選擇每個<ul>中最後一個<li>元素

:only-child $("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素。

⑧表單物件屬性過濾選擇器
選擇器 jQuery
:emabled $("#form1:enabled")選取id為form1的表單內所有可用的元素(集合元素)
:disabled $("#form1:disabled")選取id為form2的表單內所有不可用的元素(集合元素)
:checked $("input:checked")選取所有被選中的<input>元素(集合元素)
:selected $("select:selected")選取所有被選中的選項元素 下拉列表(集合元素)

⑨表單選擇器
過濾器 jQuery
: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")選取所有不可見元素