1.選擇對象
1).基本
·#id 根據給定的ID匹配一個元素。例如：$("#id")
·element 根據給定的元素名匹配所有元素。例如：$("p")
·.class 根據給定的類匹配元素。例如：$(".style1");
·* 匹配所有元素。例如：$("*")
·selector1,selector2,selectorN 將每一個選擇器匹配到的元素合並後一起返回。例如：$("#id,p,.style1")
2).表單
·:button 匹配所有按鈕。例如：$(":button")
·:checkbox 匹配所有復選框。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":file")
·:hidden 匹配所有不可見元素，或者type為hidden的元素。例如：$("input:hidden")
·:image 匹配所有圖像域。例如：$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")
·:password 匹配所有密碼框。例如：$(":password")
·:radio 匹配所有單選按鈕。例如：$(":radio")
·:reset 匹配所有重置按鈕。例如：$(":reset")
·:submit 匹配所有提交按鈕。例如：$(":submit")
·:text 匹配所有的單行文本框。例如：$(":text")
·:header 匹配如 h1, h2, h3之類的標題元素。例如：$(":header").css("background", "#EEE");
2.篩選條件
1).屬性篩選
·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如：$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性，但屬性不等於特定值的元素。例如：$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結尾的元素。例如：$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如：$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素。例如：$("p[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如：$("input[name^='man']")
·[selector1][selector2][selectorN] 同時滿足多個條件。例如：$("input[id][name$='man']")
·:hidden 匹配所有的不可見元素。例如：$("tr:hidden")
·:visible 匹配所有的可見元素。例如：$("tr:visible")
·:checked 匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option)。例如：$("input:checked")
·:disabled 匹配所有不可用元素。例如：$("input:disabled")
·:enabled 匹配所有可用元素。例如：$("input:enabled")
·:selected 匹配所有選中的option元素。例如：$("select option:selected")
2).內容篩選
·:contains(text) 匹配包含給定文本的元素。例如：$("p:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$("p:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")
3).層級篩選
·ancestor descendant 在給定的祖先元素下匹配所有的後代元素。例如：$("form input")
·parent > child 在給定的父元素下匹配所有的子元素。例如：$("form > input")
·prev + next 匹配所有緊接在 prev 元素後的 next 元素。例如：$("label + input")
·prev ~ siblings 匹配 prev 元素之後的所有 siblings 元素。例如：$("form ~ input")
·:first-child 匹配第一個子元素。例如：$("ul li:first-child")
·:last-child 匹配最後一個子元素。例如：$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配。例如：$("ul li:only-child")
4).方法篩選
·:animated 匹配所有正在執行動畫效果的元素。例如：$("p:animated");
·:eq(index) 匹配一個給定索引值的元素。例如：$("tr:eq(1)")
·:even 匹配所有索引值為偶數的元素，從 0 開始計數。例如：$("tr:even")
·:first 匹配找到的第一個元素。例如：$("tr:first")
·:gt(index) 匹配所有大於給定索引值的元素，從 0 開始計數。例如：$("tr:gt(0)")
·:last 匹配找到的最後一個元素。例如：$("tr:last")
·:lt(index) 匹配所有小於給定索引值的元素。例如：$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如：$("input:not(:checked)")
·:odd 匹配所有索引值為奇數的元素，從 0 開始計數。例如：$("tr:odd")
筆記分為兩個部分，今天是CSS的選擇器，以後還有一部分xPath的選擇器。今天的筆記中包括44個選擇器，基本涵蓋瞭CSS 2和CSS 3的所有規定。
序號 選擇器 含義
1. * 通用元素選擇器，匹配任何元素
2. E 標簽選擇器，匹配所有使用E標簽的元素
3. .info class選擇器，匹配所有class屬性中包含info的元素
4. #footer id選擇器，匹配所有id屬性等於footer的元素
實例：
復制代碼代碼如下:
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
p#info { background:#ff0; }
二、多元素的組合選擇器
序號 選擇器 含義
5. E,F 多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔
6. E F 後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔
7. E > F 子元素選擇器，匹配所有E元素的子元素F
8. E + F 毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F
實例：
復制代碼代碼如下:
p p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
p > strong { color:#f00; }
p + p { color:#f00; }
三、CSS 2.1 屬性選擇器
序號 選擇器 含義
9. E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略，比如“[cheacked]”。以下同。）
10. E[att=val] 匹配所有att屬性等於“val”的E元素
11. E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
12. E[att|=val] 匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素，主要用於lang屬性，比如“en”、“en-us”、“en-gb”等等
實例：
復制代碼代碼如下:
p[title] { color:#f00; }
p[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }
四、CSS 2.1中的偽類
序號 選擇器 含義
13. E:first-child 匹配父元素的第一個子元素
14. E:link 匹配所有未被點擊的鏈接
15. E:visited 匹配所有已被點擊的鏈接
16. E:active 匹配鼠標已經其上按下、還沒有釋放的E元素
17. E:hover 匹配鼠標懸停其上的E元素
18. E:focus 匹配獲得當前焦點的E元素
19. E:lang(c) 匹配lang屬性等於c的E元素
實例：
復制代碼代碼如下:
p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "/201D" "/201D" "/2019" "/2019"; }
五、 CSS 2.1中的偽元素
序號 選擇器 含義
20. E:first-line 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一個字母
22. E:before 在E元素之前插入生成的內容
23. E:after 在E元素之後插入生成的內容
實例：
復制代碼代碼如下:
p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: " (" attr(href) ") "; }
六、CSS 3的同級元素通用選擇器
序號 選擇器 含義
24. E ~ F 匹配任何在E元素之後的同級F元素
實例：
復制代碼代碼如下:
p ~ ul { background:#ff0; }
七、CSS 3 屬性選擇器
序號 選擇器 含義
25. E[att^=”val”] 屬性att的值以"val"開頭的元素
26. E[att$=”val”] 屬性att的值以"val"結尾的元素
27. E[att*=”val”] 屬性att的值包含"val"字符串的元素
實例：
復制代碼代碼如下:
p[id^="nav"] { background:#ff0; }
八、CSS 3中與用戶界面有關的偽類
序號 選擇器 含義
28. E:enabled 匹配表單中激活的元素
29. E:disabled 匹配表單中禁用的元素
30. E:checked 匹配表單中被選中的radio（單選框）或checkbox（復選框）元素
31. E::selection 匹配用戶當前選中的元素
實例：
復制代碼代碼如下:
input[type="text"]:disabled { background:#ddd; }
九、CSS 3中的結構性偽類
序號 選擇器 含義
32. E:root 匹配文檔的根元素，對於HTML文檔，就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n個子元素，第一個編號為1
34. E:nth-last-child(n) 匹配其父元素的倒數第n個子元素，第一個編號為1
35. E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
36. E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
37. E:last-child 匹配父元素的最後一個子元素，等同於:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)
40. E:only-child 匹配父元素下僅有的一個子元素，等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一個不包含任何子元素的元素，註意，文本節點也被看作子元素
實例：
復制代碼代碼如下:
p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
tr:nth-child(2n+11) { background:#ff0; }
tr:nth-last-child(2) { background:#ff0; }
p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }
十、CSS 3的反選偽類
序號 選擇器 含義
43. E:not(s) 匹配不符合當前選擇器的任何元素
實例：
復制代碼代碼如下:
:not(p) { border:1px solid #ccc; }
十一、CSS 3中的 :target 偽類
序號 選擇器 含義
44. E:target 匹配文檔中特定"id"點擊後的效果
請參看HTML DOG上關於該選擇器的詳細解釋和實例。
二.jQuery選擇器全解
通俗的講, Selector選擇器就是"一個表示特殊語意的字符串". 隻要把選擇器字符串傳入上面的方法中就能夠選擇不同的Dom對象並且以jQuery包裝集的形式返回.
但是如何將jQuery選擇器分類讓我犯難. 因為書上的分類和jQuery官方的分類截然不同. 最後我決定以實用為主, 暫時不去瞭解CSS3選擇器標準, 而按照jQuery官方的分類進行講解.
jQuery的選擇器支持CSS3選擇器標準. 下面是W3C最新的CSS3選擇器標準:
https://www.w3.org/TR/css3-selectors/
標準中的選擇器都可以在jQuery中使用.
jQuery選擇器按照功能主要分為"選擇"和"過濾". 並且是配合使用的. 可以同時使用組合成一個選擇器字符串. 主要的區別是"過濾"作用的選擇器是指定條件從前面匹配的內容中篩選, "過濾"選擇器也可以單獨使用, 表示從全部"*"中篩選. 比如:
$(":[title]")
等同於:
$("*:[title]")
而"選擇"功能的選擇器則不會有默認的范圍, 因為作用是"選擇"而不是"過濾".
下面的選擇器分類中, 帶有"過濾器"的分類表示是"過濾"選擇器, 否則就是"選擇"功能的選擇器.
jQuery選擇器分為如下幾類:
[說明]
1.點擊"名稱"會跳轉到此方法的jQuery官方說明文檔.
2.可以在下節中的jQuery選擇器實驗室測試各種選擇器
1. 基礎選擇器 Basics
名稱 說明 舉例
#id 根據元素Id選擇 $("pId") 選擇ID為pId的元素
element 根據元素的名稱選擇, $("a") 選擇所有<a>元素
.class 根據元素的css類選擇 $(".bgRed") 選擇所用CSS類為bgRed的元素
* 選擇所有元素 $("*")選擇頁面所有元素
selector1,
selector2,
selectorN 可以將幾個選擇器用","分隔開然後再拼成一個選擇器字符串.會同時選中這幾個選擇器匹配的內容. $("#pId, a, .bgRed")
[學習建議]: 大傢暫時記住基礎選擇器即可, 可以直接跳到下一節"jQuery選擇器實驗室"進行動手練習, 以後再回來慢慢學習全部的選擇器, 或者用到的時候再回來查詢.
2.層次選擇器 Hierarchy
名稱 說明 舉例
ancestor descendant 使用"form input"的形式選中form中的所有input元素.即ancestor(祖先)為from, descendant(子孫)為input. $(".bgRed p") 選擇CSS類為bgRed的元素中的所有<p>元素.
parent > child 選擇parent的直接子節點child. child必須包含在parent中並且父類是parent元素. $(".myList>li") 選擇CSS類為myList元素中的直接子節點<li>對象.
prev + next prev和next是兩個同級別的元素. 選中在prev元素後面的next元素. $("#hibiscus+img")選在id為hibiscus元素後面的img對象.
prev ~ siblings 選擇prev後面的根據siblings過濾的元素
註:siblings是過濾器 $("#someDiv~[title]")選擇id為someDiv的對象後面所有帶有title屬性的元素
3.基本過濾器 Basic Filters
名稱 說明 舉例
:first 匹配找到的第一個元素 查找表格的第一行:$("tr:first")
:last 匹配找到的最後一個元素 查找表格的最後一行:$("tr:last")
:not(selector) 去除所有與給定選擇器匹配的元素 查找所有未選中的 input 元素: $("input:not(:checked)")
:even 匹配所有索引值為偶數的元素，從 0 開始計數 查找表格的1、3、5…行:$("tr:even")
:odd 匹配所有索引值為奇數的元素，從 0 開始計數 查找表格的2、4、6行:$("tr:odd")
:eq(index) 匹配一個給定索引值的元素
註:index從 0 開始計數 查找第二行:$("tr:eq(1)")
:gt(index) 匹配所有大於給定索引值的元素
註:index從 0 開始計數 查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")
:lt(index) 選擇結果集中索引小於 N 的 elements
註:index從 0 開始計數 查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")
:header 選擇所有h1,h2,h3一類的header標簽. 給頁面內所有標題加上背景色: $(":header").css("background", "#EEE");
:animated 匹配所有正在執行動畫效果的元素 隻有對不在執行動畫效果的元素執行一個動畫特效:
$("#run").click(function(){
$("p:not(:animated)").animate({ left: "+=20" }, 1000);
});
4. 內容過濾器 Content Filters
名稱 說明 舉例
:contains(text) 匹配包含給定文本的元素 查找所有包含 "John" 的 p 元素:$("p:contains('John')")
:empty 匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector) 匹配含有選擇器所匹配的元素的元素 給所有包含 p 元素的 p 元素添加一個 text 類: $("p:has(p)").addClass("test");
:parent 匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的 td 元素:$("td:parent")
5.可見性過濾器 Visibility Filters
名稱 說明 舉例
:hidden
匹配所有的不可見元素
註:在1.3.2版本中, hidden匹配自身或者父類在文檔中不占用空間的元素.如果使用CSS visibility屬性讓其不顯示但是占位,則不輸入hidden.
查找所有不可見的 tr 元素:$("tr:hidden")
:visible 匹配所有的可見元素 查找所有可見的 tr 元素:$("tr:visible")
6.屬性過濾器 Attribute Filters
名稱 說明 舉例
[attribute] 匹配包含給定屬性的元素 查找所有含有 id 屬性的 p 元素:
$("p[id]")
[attribute=value] 匹配給定的屬性是某個特定值的元素 查找所有 name 屬性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);
[attribute!=value] 匹配給定的屬性是不包含某個特定值的元素 查找所有 name 屬性不是 newsletter 的 input 元素:
$("input[name!='newsletter']").attr("checked", true);
[attribute^=value] 匹配給定的屬性是以某些值開始的元素 $("input[name^='news']")
[attribute$=value] 匹配給定的屬性是以某些值結尾的元素 查找所有 name 以 'letter' 結尾的 input 元素:
$("input[name$='letter']")
[attribute*=value]
匹配給定的屬性是以包含某些值的元素
查找所有 name 包含 'man' 的 input 元素:
$("input[name*='man']")
[attributeFilter1][attributeFilter2][attributeFilterN] 復合屬性選擇器，需要同時滿足多個條件時使用。 找到所有含有 id 屬性，並且它的 name 屬性是以 man 結尾的:
$("input[id][name$='man']")
7.子元素過濾器 Child Filters
名稱 說明 舉例
:nth-child(index/even/odd/equation)
匹配其父元素下的第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)
在每個 ul 查找第 2 個li:
$("ul li:nth-child(2)")
:first-child
匹配第一個子元素
':first' 隻匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
在每個 ul 中查找第一個 li:
$("ul li:first-child")
:last-child
匹配最後一個子元素
':last'隻匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
在每個 ul 中查找最後一個 li:
$("ul li:last-child")
:only-child
如果某個元素是父元素中唯一的子元素，那將會被匹配
如果父元素中含有其他元素，那將不會被匹配。
在 ul 中查找是唯一子元素的 li:
$("ul li:only-child")
8.表單選擇器 Forms
名稱 說明 解釋
:input 匹配所有 input, textarea, select 和 button 元素 查找所有的input元素:
$(":input")
:text 匹配所有的文本框 查找所有文本框:
$(":text")
:password 匹配所有密碼框 查找所有密碼框:
$(":password")
:radio 匹配所有單選按鈕 查找所有單選按鈕
:checkbox 匹配所有復選框 查找所有復選框:
$(":checkbox")
:submit 匹配所有提交按鈕 查找所有提交按鈕:
$(":submit")
:image
匹配所有圖像域
匹配所有圖像域:
$(":image")
:reset 匹配所有重置按鈕 查找所有重置按鈕:
$(":reset")
:button 匹配所有按鈕 查找所有按鈕:
$(":button")
:file 匹配所有文件域 查找所有文件域:
$(":file")
9.表單過濾器 Form Filters
名稱 說明 解釋
:enabled
匹配所有可用元素
查找所有可用的input元素:
$("input:enabled")
:disabled 匹配所有不可用元素 查找所有不可用的input元素:
$("input:disabled")
:checked 匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option) 查找所有選中的復選框元素:
$("input:checked")
:selected 匹配所有選中的option元素 查找所有選中的選項元素:
$("select option:selected")
作者：cqkxzyi