1.1、#id
根據給定的ID匹配一個元素。
如果選擇器中包含特殊字符,可以用兩個斜槓(\\)轉義。
參數:
id:用於搜索的,通過元素的id屬性中給定的值。--String
示例:查找ID爲"myDiv"的元素。
HTML代碼:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"<div>
jQuery代碼:
[<div id="myDiv">id="myDiv"<div>]
1.2、element
根據給定的元素名匹配所有元素。返回值:Array<Element(s)>
參數:
element:一個用於搜索的元素。指向DOM節點的標籤名。
示例:查找一個DIV元素。
HTML代碼:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery代碼:
[<div>DIV1</div>, <div>DIV2</div>]
1.3、.class
根據給定的類匹配元素。返回值:Array<Element(s)>
參數:
class:一個用以搜索的類。一個元素可以有多個類,只要有一個符合就能被匹配到。
示例:查找所有類是“myClass”的元素。
HTML代碼:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery代碼:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
1.4、*
匹配所有元素。返回值:Array<Element(s)>
多用於結合上下文來搜索。
示例:找到每個元素。
HTML代碼:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
Jquery代碼:
[<div>DIV</div>, <span>SPAN</span>, <p>P</p>]
1.5、selector1, selector2, selectorN
將每一個選擇器匹配到的元素合併後一起返回。返回值:Array<Element(s)>
你可以指定任意多個選擇器,並將匹配到的元素合併到一個結果內。
參數:
selector1:一個有效的選擇器。--Selector
selector2:另一個有效的選擇器。--Selector
selectorN:(可選)任意多個有效的選擇器。--Selector
示例:找到匹配任意一個類的元素。
HTML代碼:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
jQuery代碼:
$("div, span, p.myClass");
結果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
2.1、ancestor descendant
在給定的祖先元素下匹配所有的後代元素。返回值:Array<Element(s)>
參數:
ancestor:任何有效的選擇器。--Selector
descendant:用以匹配元素的選擇器,並且它是第一個選擇器的後代元素。--Selector
示例:找到表單中所有的input元素。
HTML代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery代碼:
[ <input name="name" />, <input name="newsletter" /> ]
2.2、parent > child
在給定的父元素下匹配所有的子元素。返回值:Array<Element(s)>
參數:
parent:任何有效的選擇器。--Selector
child:用以匹配元素的選擇器,並且它是第一個選擇器的子元素。--Selector
示例:匹配表單中所有的子級input元素。
HTML代碼同2.1中。
jQuery代碼:
[ <input name="name"/> ]
2.3、prev + next
匹配所有緊接在prev元素後的next元素。返回值:Array<Element<(s)>
參數:
prev:任何有效選擇器。--Selector
next:一個有效選擇器並緊跟着第一個選擇器。--Selector
示例:匹配所有跟在label後面的input元素。
HTML代碼同2.1中。
jQuery代碼:
[ <input name="name" />, <input name="newsletter" /> ]
2.4、prev ~ siblings
匹配prev元素之後的所有siblings元素。
參數:
prev:任何有效的選擇器。--Selector
siblings:一個選擇器,並且它作爲第一個選擇器的同輩。
示例:找到多有與表單同輩的input元素。
HTML代碼同2.1中。
jQuery代碼:
3.1、:first()
獲取第一個元素。返回值:JQuery
示例:獲取匹配的第一元素。
HTML代碼:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery代碼:
[ <li>list item 1</li> ]
3.2、:last()
獲取最後個元素。
示例:獲取匹配的最後一個元素。
HTML代碼參加3.1中。
jQuery代碼:
[ <li>list item 5</li> ]
3.3、:not
去除所有與給定選擇器匹配的元素。返回值:Array<Element(s)>
在jQuery 1.3中,已經支持複雜選擇器了(例如:not(div a)和:not(div, a))。
參數:selector:用於篩選的選擇器。
示例:查找所有未選中的input元素。
HTML代碼:
<input name="apple"/>
<input name="flower" checked="checked"/>
jQuery代碼:
$("input:not(:checked)");
結果:
[ <input name="apple"/> ]
3.4、:even
匹配所有索引值爲偶數的元素,從0開始計數。返回值:Array<Element(s)>
示例:查找表格的1、3、5...行(即索引值0、2、4...)
HTML代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery代碼:
$("tr:even");
結果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
3.5、:odd
匹配所有索引值爲奇數的元素,從0開始計數。
示例參見:even示例。
3.6、:eq
匹配一個給定索引值得元素。返回值:Array<Element(s)>
參數:
index:從0開始計數。--Number
示例:查詢第二行。
HTML代碼:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery代碼:
結果:
[ <tr><td>Value 1</td></tr> ]
3.7、:gt
匹配所有大於給定索引值的元素。
參數:
index:從0開始計數。--Number
示例:查找第二第三行,即索引值是1和2,也就是比0大。
HTML代碼參見上。
jQuery代碼:
$("tr:gt(0)");
結果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
3.8、:lt
匹配所有小於給定索引值的元素。
參數:
index:從0開始計數。--Number
示例參見上。
3.9、:header
匹配如h1, h2, h3之類的表題元素。
示例:給界面中所有表題加上背景色。
HTML代碼:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jQuery代碼:
$(":header").css("background", "#EEE");
結果:
[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
4.0、:animated
匹配所有正在執行動畫效果的元素。返回值:Array<Element(s)>
示例:只有對不住執行動畫效果到的元素執行一個動畫特效。
HTML代碼:
<button id="run">Run</button><div></iv>
jQuery代碼:
$("#run").click(function(){
$("div:not(:animated)").animate({left:"+=20"}, 1000);
});