轉自:http://www.cnblogs.com/mcgrady/archive/2011/11/08/2241670.html
jQuery選擇器共有四大類,分別爲基本選擇器,層次選擇器,過濾選擇器和表單選擇器。下邊就來分別總結一下。
1, 基本選擇器?
基本選擇器就是jQuery中最常用的選擇器,也是最簡單的選擇器,它通過元素標籤名,元素Id,Class來查找DOM元素。基本選擇器共有五種,總結如下:
選擇器 |
返回 |
示例 |
元素標籤選擇器 |
集合元素 |
$(“p”)選取所有的<p>元素。 |
Id選擇器 |
單個元素 |
$(“#test”)選取Id爲test的元素。 |
Class選擇器 |
集合元素 |
$(“.test”)選取所有class爲test的元素 |
通配符選擇器 |
集合元素 |
$(“*”)選取所有的元素。 |
羣組選擇器 |
集合元素 |
$(“div,span,p.myclass”)選取所有<div>,<span>,和擁有class爲myclass的<p>標籤的一組元素。 |
2, 層次選擇器?
適合於通過DOM元素之間的層次關係來獲取特定元素,例如後代元素,子元素,相 鄰元素和兄弟元素。
選擇器 |
返回 |
示例 |
後代元素選擇器 |
集合元素 |
$(“div span”)選取<div>裏的所有的<span>元素。 |
子元素選擇器 |
集合元素 |
$(“div>span”)選取<div>元素下元素名是<span>的子元素。 |
相鄰元素選擇器 |
集合元素 |
$(“.one+div”)選取class爲one的下一個<div>兄弟元素。 |
兄弟元素選擇器 |
集合元素 |
$(“#two~div”)選取Id爲two的元素後面的所有<div>兄弟元素。 |
注意:$(“prev~siblings”)選擇器與siblings()方法的區別。
$(“#prev~div”)選擇的是”#prev”元素後面的所有的同輩的div元素。而siblings()方法與 前後位置無關,只要是同輩節點就都能匹配。
3, 過濾選擇器?
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素,過濾規則與CSS 中的僞類選擇器語法相同,即選擇器都以一個冒號(:)開頭。按照不同的過濾規則,過濾選擇器可以分爲基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單 對象屬性過濾選擇器共六種選擇器。
這邊只總結基本過濾器,其它過濾器在實際的開發過程中需要的時候再查看就可以了。
選擇器 |
返回 |
示例 |
:first |
單個元素 |
$(“div:first”)選取所有<div>元素中第1個<div>元素。 |
:last |
單個元素 |
$(“div:last”)選取所有<div>元素中最後1個<div>元素。 |
not(selector) |
集合元素 |
$(“input:not(.myClass)”)選取class不是myClass的<input>元素。 |
:even |
集合元素 |
$(“input:even”)選取索引是偶數的<input>元素。 |
:odd |
集合元素 |
$(“input:odd”)選取索引是奇數的<input>元素。 |
:eq(index) |
單個元素 |
$(“input:eq(1)”)選取索引等於1的<input>元素。 |
:gt(index) |
集合元素 |
$(“input:gt(1)”)選取索引大於1的<input>元素。 |
:lt(index) |
集合元素 |
$(“input:lt(1)”)選取索引小於1的<input>元素。(不包括1) |
:header |
集合元素 |
$(“:header”)選取網頁中所有的<h1>,<h2>,<h3>... |
:animated |
集合元素 |
$(“div: animated”)選取正在執行動畫的<div>元素。 |
4, 表單選擇器?
利用表單選擇器我們可以極其方便地獲取表單的某個或某類型的元素。
選擇器 |
返回 |
示例 |
: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”)選取所有不可見元素。 |
以上就是jQuery選擇器的總結,希望大家都能理解並熟練運用它們,謝謝!