jQuery中的基本選擇器「簡單記住」

本教程操作環境：windows7系統、jquery1.10.0版本。

1.基本選擇器

 #id       $（"#test").css("background","#bbffaa")//選取id為test的元素
 element   $("p") ;//選取所有的<p>元素
  *        $("*");//選取所有元素
 .class  $(".test");//選取類名為test的元素
  selector1,selector2   $("div,p.myClass,span");//組合選擇

2.層次選擇器

$("div span")//選取<div>里所有<span>元素（所有后代元素）
$("div>span")//選取<div>元素下元素名為<span>的子元素（只限于子元素）
$(".one+div")//選取class 為one的下一個<div>同輩元素
等價于$(".one").next("div")
$("#two~div")//選取id為two的元素后面的所有<div>同輩元素
等價于$("#two").nextAll("div")

3.過濾選擇器（以“：”開頭）
1.基本過濾

:first  選取個元素:  $("div:first")  選區所有<div>元素中個<div>元素:last   選取最后一個元素  $("div:last"):not(selector) 去除所有給定選擇器匹配的元素           $("input:not(.myClass)") 選取class不是myClass的<input>元素:even 選取索引數是偶數的元素 索引從0開始 $("div:even"):odd 選取索引數是奇數的元素 索引從0開始 $("div:odd"):eq(index)選取索引數等于index的元素  $("div:eq(2)"):gt(index)選取索引數大于index的元素  $("div:gt(2)"):lt(index)選取索引數小于index的元素   $("div:lt(2)"):header   選取所有標題元素<h1>..<h6> $(":header"):animated  選取所有當前正在執行動畫的的所有元素 $("div:animated")選取正在執行動畫的<div>元素:focus 選取當前獲得焦點的元素 $(":focus")

2.內容過濾

:contains(text)選取含有文本內容為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="display:none"> 和<div style="visibility:hidden">等 如果只想選取<input>元素，可以使用 $("input:hidden"):visible 選取所有可見元素  $(div:visible) 選取所有可見的<div>元素

例如 顯示隱藏的<div>元素 $(div:hidden).show(3000)

4.屬性過濾（Jquery中的單引號和雙引號沒有區別，如果一個字符串，外面用單引號里面的雙引號就字符串了，反之，如果外面是雙引號里面的單引號就是字體串,雙引號不能組合雙引號使用 ，單引號亦然，但是平時要盡量使用單引號）

[attribute] 選取擁有此屬性的元素 $("div[id]")選取擁有屬性id的元素[attribute=value] 選取屬性值為value的元素 $("div[title=test]") 選取屬性title為“test”的<div>元素[attribute!=value] 選取屬性的值不等于value的元素 $("div[title!=test]")[attribute^=value] 選取屬性的值以value開始的元素 $("div[title^=te]")選取屬性title的值以te開始的div元素[attribute$=value] 選取屬性的值以value結束的元素 $("div[title$=est]")選取屬性title的值以est結束的div元素[attribute*=value] 選取屬性的值含有value的元素 $("div[title*=es]")選取屬性title的值含有es的div元素[attribute|=value] 選取屬性等于給定字符串或以該字符串為前綴（該字符串后跟一個連字符"-"）的元素 $('div[title|="en"]')[attribute~=value] 選取屬性用空格分隔的值中包含一個給定值的元素 $('div[title~="uk"]')[attribute1][attribute2][attributeN] 用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件。每選擇一次，縮小一次范圍 $("div[id][title$='test']")

5.子元素過濾

:nth-child(index/evenn/odd/equation) 選取每個父元素下得第index個子元素或者奇偶元素（index從1算起） 解析：:eq(index)只匹配一個元素，而:nth-child將為每一個父元素匹配子元素，并且:nth-child(index)的index是從1開始的，而:eq(index)是從0開始的:first-child 選取每個父元素的個子元素  集合元素 解析：:first只返回單個元素，而:first-child選擇符將為每個父元素匹配個子元素。例如$("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>元素

6.表單對象屬性過濾

:enabled 選取所有可用元素 $("#form1:enabled") 選取id為form1的表單內所有可用元素:disabled 選取所有不可用元素 $("#form1:disabled"):checked 選取所有被選中的元素（單選框，復選框）$("input:checked")選取所有被選中的<input>元素:selected 選取所有被選中的選項元素（下拉列表）$("select option:selected") 選取所有被選中的選項元素

4.表單選擇器

:input 
 :text 
 :password 
 :radio 
 :checkbox 
 :submit 
 :image 
 :reset 
 :button 
 :file 
 :hidden

選擇器的注意事項

\\為轉義字符

$(".test :hidden") 帶空格表示選取class為test里的隱藏元素$(".test:hidden")不帶空格表示選取隱藏的class為test的元素

以上就是jquery常用選擇器有哪些的詳細內容，更多請關注html中文網其它相關文章！