1、#id 根據給定的ID匹配一個元素,如果選擇器中包含特殊字元,可以用雙斜桿(\\) 轉義 如: 查找ID 為 myDiv[bar] 的元素 HTML 代碼: jQuery 代碼: 結果: 2、element 根據給定元素名匹配所有元素 如: 查找一個 DIV 元素。 HTML 代碼: jQuer ...
1、#id
根據給定的ID匹配一個元素,如果選擇器中包含特殊字元,可以用雙斜桿(\\) 轉義
如:
查找ID 為 myDiv[bar] 的元素
HTML 代碼:
<div id="notMe">
<p>id="notMe"</p>
</div>
<div id="myDiv[bar]">
id="myDiv[bar]"
</div>
jQuery 代碼:
$("#myDiv\\[bar\\]");
結果:
[ <div id="myDiv[bar]">id="myDiv[bar]"</div> ]
2、element
根據給定元素名匹配所有元素
如:
查找一個 DIV 元素。
HTML 代碼:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
jQuery 代碼:
$("div");
結果:
[ <div>DIV1</div>, <div>DIV2</div> ]
3、 .class
根據類名進行匹配元素,一個用以搜索的類。一個元素可以有多個類,只要有一個符合就能被匹配到。(多個類 jquery代碼為:$(".class1.class2.class3"),且順序可以為亂序 )
如:
查找所有類是 "myClass" 的元素.
HTML 代碼:
<div class="notMe myClass1">div class="notMe"</div>
<div class="myClass a1 a3">div class="myClass"</div>
<span class="myClass a2 a4">span class="myClass"</span>
jQuery 代碼:
$(".myClass");
結果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
4、*
匹配所有元素,多用於結合上下文來搜索
如:
找到每一個元素
HTML 代碼:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代碼:
$("*")
結果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
5、selector1,selector2,selectorN
將每一個選擇器匹配到的元素合併後一起返回(你可以指定任意多個選擇器,並將匹配到的元素合併到一個結果內)
如:
找到匹配任意一個類的元素。
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> ]
6、ancestor descendant
在給定的祖先元素下匹配 所有(包括子元素的子元素) 的後代元素
參數:ancestor 任何有效選擇器;descendant 用以匹配元素的選擇器,並且它是第一個選擇器的後代元素
如:
找到表單中所有的input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input id="inp1" name="none" />
jQuery 代碼:
$("#inp1,form *")
結果:
[ <label>Name:</label>,<input name="name" />, <fieldset>, <label>Newsletter:</label>,<input name="newsletter" />,<input id="inp1" name="none" /> ]
7、parent > child
在給定的父元素下匹配所有的子元素(第一層級子元素,並且自身滿足匹配結果,也會返回)
如:
匹配表單中所有當前表單的子元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input id="inp1" name="none" />
jQuery 代碼:
$("#inp1,form > input")
結果:
[ <input name="name" />,<input id="inp1" name="none" /> ]
8、prev + next
匹配所有緊跟在 prev 之後的 next 元素
參數:prev 任何選擇器;next 一個有效選擇器並且緊接著第一個選擇器
如:
匹配所有跟在lable後面的input和p元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
<label>Newsletter2:</label>
<p>p:</p>
<input name="newsletter2" />
</form>
<input id="inp1" name="none" />
jQuery 代碼:
$("label + input,p")
結果:
[ <input name="name" />,<input name="newsletter" />,<p>p:</p> ]
9、prev ~ siblings
匹配prev元素之後的所有siblings 元素
參數:prev 任何有效選擇器; siblings 一個選擇器,並且它作為第一個選擇器的同級
如:
找到所有與表單下所有label子集同輩的 input元素、p元素
HTML 代碼:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
<label>Newsletter2:</label>
<p>p:</p>
<input name="newsletter2" />
</form>
<input id="inp1" name="none" />
jQuery 代碼:
$("form label ~ input,p")
結果:
[ <input name="name" />, <input name="newsletter" />, <p>p:</p>,<input name="newsletter2" />,<p>p:</p> ]
10、prev:first
獲取prev選擇器下的第一個元素
參數:prev 任何有效選擇器
如:
獲取form下所有label子元素後跟p的第一個p元素
$("form label + p:first")
11、prev:last
獲取prev選擇器下的最後一個元素
參數:prev 任何有效選擇器
如:
獲取form下所有label子元素後跟input的最後一個input元素
$("form label + input:last")
12、prev:not(selector1,selector2,selectorN)
去除所有prev選擇器下的 給定選擇器selector1,selector2,selectorN 的元素(在jquery1.3 之後才支持)
如:
查找所有form元素下所有子元素後跟input元素的input元素,並且input 元素class 屬性不包含 .a1.a2
$("form label + input:not(.a2.a1)")
13、prev:even
匹配prev選擇器下所有索引值為 偶數 的元素,從 0 開始計數
如:
查找表格的1/3/5...行(即索引值為0,2,4...)
$("table tr:even")
14、prev:odd
匹配prev選擇器下所有索引值為 奇數 的元素,從 0 開始計數
如:查找表格的2/4/6...行(即索引值為1,3,5...)
$("table tr:odd")
15、prev:eq(index)
匹配prev選擇器下給定index索引值的元素
如:
查找table的第三行
$("table tr:eq(2)")
16、prev:gt(index)
匹配prev選擇器下 大於 給定 index 索引值的元素
如:
查找table下第二行以後的行
$("table tr:gt(1)");
17、prev:lt(index)
匹配prev選擇器下 小於 給定 index 索引值的元素
如:
查找table下第1行、第二行
$("table tr:lt(2)")
18、prev:header
匹配prev選擇器下所有如h1/h2/h3/h4...子類的標題元素
如:
匹配form下所有標題元素
$("form *:header")
19、prev:animated
匹配prev選擇器下所有正在執行動畫效果的元素
如:
只有對不在執行動畫效果的元素執行一個動畫特效
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
20、:focus
觸發每一個匹配元素的focus事件(這將觸發所有綁定的focus函數,註意:某些對象不支持focus方法)
如:
當頁面載入後將 id 為 'login' 的元素設置焦點:
$("#login:focus");
21、prev:contains(text)
匹配prev選擇器下所有 包含 給定文本的元素
如:查找所有包含“A”文本的div元素
$("div:contains('A')")
22、prev:empty
匹配prev選擇器下所有 不包含子元素或者文本 的空元素
23、prev:has(selector1,selector2,selectorN)
匹配prev選擇器下所有含有selector1||selector||selectorN的元素的元素
如:
匹配所有子元素包含class為 .a1或.a3 的fieldset元素
HTML 代碼:
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" class="a1 a2" />
<h3>h3:</h3>
</fieldset>
<fieldset>
<label class="a3">Newsletter:</label>
</fieldset>
jQuery 代碼:
$("fieldset:has(.a1,.a3)")
結果:
[
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" class="a1 a2" />
<h3>h3:</h3>
</fieldset>,
<fieldset>
<label class="a3">Newsletter:</label>
</fieldset>
]
24、prev:parent
匹配prev選擇器下所有包含子元素或文本的元素(存在子元素或文本的元素)
25、prev:hidden
匹配prev選擇器下所有不可見元素(display:none),或者type為hidden的元素(<input type='hidden' />)
26、prev:visible
匹配prev選擇器下所有可見元素
27、prev[attribute]
匹配prev選擇器下所有包含給定屬性的元素。註意,在jQuery 1.3中,前導的@符號已經被廢除!如果想要相容最新版本,只需要簡單去掉@符號即可。
28、prev[attribute = 'value']
匹配prev選擇器下所有包含給定的屬性是某個特定值的元素
29、prev[attribute! = 'value']
匹配prev選擇器下所有不包含給定屬性,或者屬性不等於特定值的元素 ( 此選擇器等價於:not([attr=value]);要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]) )
30、prev[attribute ^= 'value']
匹配prev選擇器下給定的屬性是以某些值開始的元素
如:
匹配所有id以mydiv 開頭的div
$("div[id ^= 'mydiv']")
31、prev[attribute $= 'value']
匹配prev選擇器下給定的屬性是以某些值結束的元素
如:
匹配所有id以mydiv 結束的div
$("div[id $= 'mydiv']")
32、prev[attribute *= 'value']
匹配prev選擇器下給定屬性是包含某些值的元素
如:
匹配所有id包含div 的div
$("div[id *= 'div']")
33、[selector1][selector2][selectorN]
覆核屬性選擇器,需要同時滿足多個條件時使用。
如:
$("input[id][name$='man']")
34、prev:nth-child(index)
匹配prev選擇器下所有元素的子元素的第N個子或奇偶元素
':eq(index)' 只匹配一個元素,而這個將為每一個父元素匹配子元素。:nth-child從 1 開始的,而:eq()是從0算起的!可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
參數:index 要匹配元素的序號,從1開始
如:
在每個 ul 查找第 2 個li
HTML 代碼:
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
jQuery 代碼:
$("ul li:nth-child(2)")
結果:
[ <li>Karl</li>, <li>Tane</li> ]
35、prev:first-child
匹配prev選擇器下的所有元素的第一個子元素
36、prev:last-child
匹配prev選擇器下的所有元素的最後一個子元素
37、prev:only-child
匹配prev選擇器下中某個只有唯一一個子元素的元素。如果含有其他元素,將不會被匹配
38、prev:input
匹配prev選擇器下所有的input、textarea、select和button元素
39、prev:text
匹配prev選擇器下所有 單行文本框<input type='text' />
40、prev:password
匹配prev選擇器下所有 密碼框<input type='password' />
41、prev:radio
匹配prev選擇器下所有 單選按鈕<input type='radio' />
42、prev:checkbox
匹配prev選擇器下所有 覆選按鈕<input type='checkbox' />
43、prev:submit
匹配prev選擇器下所有 提交按鈕<input type='submit' />
44、prev:image
匹配prev選擇器下所有 圖片域<input type='image' />
45、prev:reset
匹配prev選擇器下所有 重置按鈕<input type='reset' />
46、prev:button
匹配prev選擇器下所有 按鈕<input type='buttton' />、<button></button>
47、prev:file
匹配prev選擇器下所有 文件域<input type='file' />
48、prev:enabled
匹配prev選擇器下所有 可用元素(disabled)
49、prev:disabled
匹配prev選擇器下所有 不可用元素
50、prev:checked
匹配prev選擇器下所有選擇的被選中元素(覆選框、單選框等,不包括 select中的option)
51、prev:selected
匹配prev選擇器下所有選中的option元素