jQuery選擇器簡析


1.基本選擇器:
1>#id =>id選擇器
2>element =>標籤選擇器
3>.class =>類選擇器
4>* =>選擇所有元素
5>selector1,selector2 =>多條件選擇器(例如:$("div,span,.myclass")表示選擇了所有的div標籤,span標籤以及類樣式爲myclass的元素)

 

2.層次選擇器:
1>selector1 selector2 =>獲取selector1下的所有selector2(例如:$("div span"),表示獲得div標籤下的所有span標籤(包括後代span))
2>selector1 > selector2 =>獲取selector1下的符合selector2的所有直接子元素(不包括後代元素)。($("div > span"))
3>selector1 + next =>匹配所有緊接在selector1後面的相鄰元素。等同於$(selector1).next();
4>selector1 ~ siblings =>匹配selector1後面的所有兄弟元素。等同於$(selector1).nextAll();
5>$(selector1).siblings() =>獲取匹配selector1的所有兄弟元素。

 

3.表單選擇器:
1>:input獲得所有input、textarea、select標籤
2>:text獲得所有單行文本框
3>:password獲得所有密碼框
4>:radio獲得所有單選按鈕
5>:checkbox獲得所有複選框
6>:submit獲得所有的提交按鈕
7>:image獲得所有的圖片域(<input type="image"/>)
8>:reset獲得所有的重置按鈕
9>:button獲得所有的button
10>:file獲得所有的文件域(<input type="file"/>)


jQuery過濾器:【選擇器與過濾器之間無需空格】
1>:first =>在已匹配的元素中獲取第一個元素。等同於first()方法。
2>:last =>在已匹配的元素中獲取最後一個元素。等同於last()方法。
3>:not(selector1) =>在已匹配的元素中,過濾掉符合selector1的元素。
4>:even =>在已匹配的元素中獲取所有索引爲基數的元素。
5>:odd =>在已匹配的元素中獲取所有索引爲偶數的元素。
6>:eq(index) =>在已匹配的元素中獲取指定索引的元素。索引從0開始。
7>:gt(index) =>在已匹配的元素中獲取索引大於index的元素。索引從0開始。
8>:lt(index) =>在已匹配的元素中獲取索引小於index的元素。索引從0開始。
9>:header =>獲取所有標題類型元素。例如:h1、h2、h3......
10>:animated =>獲取正在執行動畫效果的元素。(*)
11>:contains('text') =>獲取包含指定文本的元素
12>:empty =>獲取所有不包含子元素和文本的元素。(獲取所有空元素)
13>:has(selector1) =>獲取所有包含符合selector1選擇器的元素。
14>:parent =>獲取所有是"父元素"的元素(是"父元素"表示包含子元素或文本)。
======================屬性過濾器===================================
15>[attr] =>表示獲取所有帶名爲"attr"屬性的元素。例如:$("[class]"),表示獲取所有帶class屬性的元素。
16>[attr=val] =>表示獲取所有屬性attr爲val的元素。例如:$("[class=myclass]"),表示獲取所有應用了myclass類的元素。
17>[attr!=val] =>獲取所有屬性attr不等於val的元素。
18>[attr^=val] =>獲取所有屬性attr以val開頭的元素。
19>[attr$=val] =>獲取所有屬性attr以val結尾的元素。(正則表達式^開頭,$結尾。)
20>[attr*=val] =>獲取所有屬性attr包含val的元素。
21>[selector1][selector2] =>滿足多個條件的符合屬性過濾器
==========================表單對象屬性過濾器==============================
22>:enabled =>獲取表單中所有屬性爲可用的元素。
23>:disabled =>獲取表單中所有屬性爲不可用的元素。(灰色的)
24>:checked =>獲取表單中所有被選中的元素。
25>:selected =>獲取表單中所有被選中的option元素。
==========================可見性過濾器=============================
26>:hidden =>獲取所有不可見元素,或者type爲hidden的元素。(例如:display:none)
27>:visible =>獲取所有可見元素

 

選擇器與選擇器之間要加空格,選擇器與過濾器之間不需要加空格。而這種選擇與css選擇相似,結合jQuery的核心方法jQuery(即$)說明,可以知道它所接收的正式css選擇器字符串

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章