|
jQuery選擇器共有四大類，分別為基本選擇器，層次選擇器，過濾選擇器和表單選擇器。下邊就來分別總結一下。
1， 基本選擇器？
基本選擇器就是jQuery中最常用的選擇器，也是最簡單的選擇器，它通過元素標簽名，元素Id，Class來查找DOM元素?；具x擇器共有五種，總結如下：
選擇器
|
返回
|
示例
|
元素標簽選擇器
|
集合元素
|
$(“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()方法的區(qū)別。
$(“#prev~div”)選擇的是”#prev”元素后面的所有的同輩的div元素。而siblings()方法與 前后位置無關，只要是同輩節(jié)點就都能匹配。
3， 過濾選擇器？
過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的DOM元素，過濾規(guī)則與CSS 中的偽類選擇器語法相同，即選擇器都以一個冒號(:)開頭。按照不同的過濾規(guī)則，過濾選擇器可以分為基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單 對象屬性過濾選擇器共六種選擇器。
這邊只總結基本過濾器，其它過濾器在實際的開發(fā)過程中需要的時候再查看就可以了。
選擇器
|
返回
|
示例
|
:first
|
單個元素
|
$(“div:first”)選取所有<div>元素中第1個<div>元素。
|
:last
|
單個元素
|
$(“div:last”)選取所有<div>元素中最后1個<div>元素。
|
not(selector)
|
集合元素
|
$(“input:not(.myClass)”)選取class不是myClass的<input>元素。
|
:even
|
集合元素
|
$(“input:even”)選取索引是偶數(shù)的<input>元素。
|
:odd
|
集合元素
|
$(“input:odd”)選取索引是奇數(shù)的<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”)選取網(wǎng)頁中所有的<h1>,<h2>,<h3>...
|
:animated
|
集合元素
|
$(“div: animated”)選取正在執(zhí)行動畫的<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選擇器的總結，希望大家都能理解并熟練運用它們，謝謝！
|
