jQuery選擇器上

1、jQuery選擇器之基本一

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代碼:
$("#myDiv");
結果:
[<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");
結果:
[<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代碼:
$(".myClass");
結果:
[ <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、jQuery選擇器之層級

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代碼:
$("form input");
結果:
[ <input name="name" />, <input name="newsletter" /> ]

2.2、parent > child

在給定的父元素下匹配所有的子元素。返回值:Array<Element(s)>
參數
parent:任何有效的選擇器。--Selector
child:用以匹配元素的選擇器,並且它是第一個選擇器的子元素。--Selector
示例:匹配表單中所有的子級input元素。
HTML代碼同2.1中。
jQuery代碼:
$("form > input");
結果:
[ <input name="name"/> ]

2.3、prev + next

匹配所有緊接在prev元素後的next元素。返回值:Array<Element<(s)>
參數
prev:任何有效選擇器。--Selector
next:一個有效選擇器並緊跟着第一個選擇器。--Selector
示例:匹配所有跟在label後面的input元素。
HTML代碼同2.1中。
jQuery代碼:
$("label + input");
結果:
[ <input name="name" />, <input name="newsletter" /> ]

2.4、prev ~ siblings

匹配prev元素之後的所有siblings元素。
參數
prev:任何有效的選擇器。--Selector
siblings:一個選擇器,並且它作爲第一個選擇器的同輩。
示例:找到多有與表單同輩的input元素。
HTML代碼同2.1中。
jQuery代碼:
$("form ~ input");
結果:
[ <input name="none"/> ]

3、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").first();
結果:
[ <li>list item 1</li> ]

3.2、:last()

獲取最後個元素。
示例:獲取匹配的最後一個元素。
HTML代碼參加3.1中。
jQuery代碼:
$("li").last();
結果:
[ <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:eq(1)");
結果:
[ <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);
});




jQuery選擇器下http://blog.csdn.net/tianyafeng123xin/article/details/50563783
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章