JQuery選擇器

 一、最基本的選擇器

$('p')　　  ：元素選擇器，使用 CSS 選擇器來選取 HTML 元素。

$(".test")   ：.class 選擇器  能夠經過指定的 class 查找元素。

$("#test") ：#id 選擇器經過 HTML 元素的 id 屬性選取指定的元素。

$("[href]") ：屬性選擇器，選取全部帶有 href 屬性的元素。好比$("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。$("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。$("[href$='.jpg']")選取全部 href 值以 ".jpg" 結尾的元素。

 

二、jQuery支持的css3基本選擇器

語法	描述
$("*")	選取全部元素
$(this)	選取當前 HTML 元素
$("p.intro")	選取 class 爲 intro 的 <p> 元素
$("p:first")	選取第一個 <p> 元素
$("ul li:first")	選取第一個 <ul> 元素的第一個 <li> 元素
$("ul li:first-child")	選取每一個 <ul> 元素的第一個 <li> 元素
$("[href]")	選取帶有 href 屬性的元素
$("a[target='_blank']")	選取全部 target 屬性值等於 "_blank" 的 <a> 元素
$("a[target!='_blank']")	選取全部 target 屬性值不等於 "_blank" 的 <a> 元素
$(":button")	選取全部 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")	選取偶數位置的 <tr> 元素
$("tr:odd")	選取奇數位置的 <tr> 元素

 

選擇器	說明
*、E、E F、E。C、E#I等CSS1選擇器	通配符、標記選擇器，後代選擇器，交集選擇器，ID選擇器等CSS1中的選擇器
E>F	子選擇器，只選中第一代
E+F	全部名稱爲F的標記，而且該標記緊接着前面的E標記，下一個兄弟元素
E~F	全部名稱爲F的標記，若是F和E是兄弟關係，而且F位於E後面（不須要緊跟E）
E：has(F)	全部名稱爲E的標記，而且該標記包含F標記
E[A]	全部名稱爲E的標記，而且具備屬性A
E[A=V]	全部名稱爲E的標記，而且屬性A的值等於V
E[A^=V]	全部名稱爲E的標記，而且屬性A的值以V開頭
E[A$=V]	全部名稱爲E的標記，而且屬性A的值以V結尾
E[A*=V]	全部名稱爲E的標記，而且屬性A的值包含V

 

三、css3基本選擇器中可細分出層次選擇器

經過DOM元素之間的層次關係來獲取特定元素，例如後代元素，子元素，相鄰元素和同輩元素等。

$("ancestor descendant")：選取ancestor元素裏的全部descendant元素。

例:$("div span")選取<div>裏的全部的<span>元素。

$("parent>child")選取parent元素下的child元素，與$("ancestor descendant")的區別是$("ancestor descendant")選取的是後代元素。

例:$("div >span")選取<div>下元素名是<span>的子元素。

$("prev+next")選取緊接在prev元素後面的next元素。

例：$(".one+div")選取class爲one的下一個<div>同輩元素。

$("prev~siblings")選取prev元素以後的全部siblings元素。

例：$("#two~div")選取id爲two的元素後面全部<div>同輩元素。

注意：

jquery中next()來代替$("prev+next")選擇器。

jquery中nextAll()來代替$("prev~siblings")選擇器。

$("prev~siblings")和jquery中siblings()的區別：

$("prev~siblings")只能選中"prev"後面的同輩<div>元素。

siblings()與先後位置無關，只有是同輩節點就都能匹配。

CSS位置選擇器

目的：基於元素的位置選擇元素，又不侷限於此。

語法：jQuery的位置選擇器借鑑了css中僞類的語法，即選擇器以冒號（：）開始，能夠看作是CSS爲類的一種擴展。

jQuery支持的CSS3位置選擇器

選擇器	說明
:first	第一個元素，例如div p:first選中頁面中全部p元素的第一個，且該p元素是div的子元素
:last	最後一個元素，例如div p:last選中頁面中全部p元素的最後一個，且該p元素是div的子元素
:first-child	第一個子元素，例如ul:first-child選中全部的ul元素，且該ul元素是其父元素的第一個子元素
:last-child	最後一個子元素，例如ul:last-child選中全部的ul元素，且該ul元素是其父元素的最後一個子元素
:only-child	全部沒有兄弟的子元素，例如p:only-child選中全部的p元素，若是該p元素是其父元素的惟一子元素
:nth-child(n)	第n個子元素，例如li:nth-child(3)選中全部li元素，且該li元素是其父元素的第3個子元素（從1開始計數）
:nth-child(odd|even)	全部的奇數號或偶數號的子元素
:nth-child(nX+Y)	利用公式來計算子元素的位置，例如:nth-child(5n+1)選中第5n+1個子元素（n從0開始計數，即1,6,11,...）
:odd或:even	對於整個頁面而言，選中奇數或偶數號元素，例如p:even爲頁面中全部排在偶數位的p元素（從0開始計算）
:eq(n)	頁面中第n個元素，例如p:eq(4)爲頁面中第5個p元素
:gt(n)	頁面中第n個元素以後的全部元素（不包括第n個元素）
:lt(n)	頁面中第n個元素以前的全部元素（不包括第n個元素）

 

過濾選擇器（自定義選擇器）

目的：處理更復雜的選擇，是jQuery自定義的，不是CSS3中的選擇器。

語法：jQuery的過濾選擇器借鑑了css中僞類的語法，即選擇器以冒號（：）開始。

　　　　jQuery經常使用的過濾選擇器

選擇器	說明
:animated	全部處於動畫中的元素
:button	全部按鈕，包括input[type=button]、input[type=submit]、input[type=reset]和<button>標記
:checkbox	全部複選框，等同於input[type=checkbox]
:checked	選擇被選中的複選框或單選框
:contains(characters)	選擇全部包含了文本"characters"的元素
:disabled	頁面中被禁用了的元素
:enabled	頁面中沒有被禁用的元素
:file	表單中的文件上傳元素，等同於input[type=file]
:header	選中全部標題元素，例如<h1>~<h6>
:hidden	匹配全部的不可見元素，例如設置爲display:none的元素或input元素的type屬性爲「hidden」的元素
:image	表單中的圖片按鈕，等同於input[type=image]
:input	表單輸入元素，包括<input>、<select>、<textarea>、<button>
:not(filter)	反向選擇
:parent	選擇全部擁有子元素(包括文本)的元素，即除空元素外的全部元素
:password	表單中的密碼域，等同於input[type=password]
:radio	表單中的單選按鈕，等同於input[type=radio]
:reset	表單中的重置按鈕，等同於input[type=radio]和button[type=reset]
:selected	下拉菜單中的被選中項
:submit	表單中的提交按鈕，包括input[type=submit]和button[type=submit]
:text	表單中的文本域，等同於input[type=text]
:visible	頁面中的全部可見元素

 

jQuery 選擇器

選擇器	實例	選取
.class.class	$(".intro.demo")	全部 class="intro" 且 class="demo" 的元素
:first	$("p:first")	第一個 <p> 元素
:last	$("p:last")	最後一個 <p> 元素
:even	$("tr:even")	全部偶數 <tr> 元素
:odd	$("tr:odd")	全部奇數 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四個元素（index 從 0 開始）
:gt(no)	$("ul li:gt(3)")	列出 index 大於 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小於 3 的元素
:not(selector)	$("input:not(:empty)")	全部不爲空的 input 元素
:header	$(":header")	全部標題元素 <h1> - <h6>
:animated		全部動畫元素
:contains(text)	$(":contains('W3School')")	包含指定字符串的全部元素
:empty	$(":empty")	無子（元素）節點的全部元素
:hidden	$("p:hidden")	全部隱藏的 <p> 元素
:visible	$("table:visible")	全部可見的表格
s1,s2,s3	$("th,td,.intro")	全部帶有匹配選擇的元素
[attribute]	$("[href]")	全部帶有 href 屬性的元素
[attribute=value]	$("[href='#']")	全部 href 屬性的值等於 "#" 的元素
[attribute!=value]	$("[href!='#']")	全部 href 屬性的值不等於 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	全部 href 屬性的值包含以 ".jpg" 結尾的元素
:input	$(":input")	全部 <input> 元素
:text	$(":text")	全部 type="text" 的 <input> 元素
:password	$(":password")	全部 type="password" 的 <input> 元素
:radio	$(":radio")	全部 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	全部 type="checkbox" 的 <input> 元素
:submit	$(":submit")	全部 type="submit" 的 <input> 元素
:reset	$(":reset")	全部 type="reset" 的 <input> 元素
:button	$(":button")	全部 type="button" 的 <input> 元素
:image	$(":image")	全部 type="image" 的 <input> 元素
:file	$(":file")	全部 type="file" 的 <input> 元素
:enabled	$(":enabled")	全部激活的 input 元素
:disabled	$(":disabled")	全部禁用的 input 元素
:selected	$(":selected")	全部被選取的 input 元素
:checked	$(":checked")	全部被選中的 input 元素

 

 

 

 

以上資料來自於：

http://www.javashuo.com/article/p-avexwrnl-h.html

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

http://www.runoob.com/jquery/jquery-selectors.html