摘要：# jQuery 選擇器總結(jié)：這一章課程學習了幾種選擇器，包括基本選擇器、層級選擇器、順序選擇器、內(nèi)容選擇器、屬性選擇器、表單選擇器。### 1- 基本選擇器語法為: $("selector")。- 標簽選擇器$("標簽名")- id 選擇器$("id 名")- 類選擇器$("class 名")- 通配選擇器$(&qu
# jQuery 選擇器總結(jié)：
這一章課程學習了幾種選擇器，包括基本選擇器、層級選擇器、順序選擇器、內(nèi)容選擇器、屬性選擇器、表單選擇器。
### 1- 基本選擇器
語法為: $("selector")。
- 標簽選擇器$("標簽名")
- id 選擇器$("id 名")
- 類選擇器$("class 名")
- 通配選擇器$("*")
### 2- 層級選擇器
語法為：$("A?B"),改變其中的問號，即可改成相應的選擇器。。
- "空格" ： 后代選擇器(A 的所有后代元素 B)
- ">" ： 子元素選擇器(A 的所有子元素 B)
- "+" ： 相鄰選擇器(緊跟在A 后面的的元素 B)
- "~" ： 后代中所有的某個元素(A 后面的所有兄弟元素)
### 3- 順序選擇器(n的序號從0開始)
- 順序選擇器：
>> $("div:first")
>> $("div:last")
- 比較選擇器：
>> $("div:gt(n)")：比序號n大的元素
>> $("div:lt(n)")：比序號n小的元素
>> $("div:eq(n)")：等于序號n的元素
- 奇偶數(shù)選擇器：
>> $("div:odd")：奇數(shù)順序的div元素
>> $("div:even")：偶數(shù)順序的div元素
- 非 選擇器：
>> $("div:first")
### 4- 屬性選擇器
##### 語法為： $(["屬性名/屬性值"])
- 如果僅有屬性名，則選中所有擁有該屬性的元素
- $(["attribute = value"]) 如果明確了屬性值，則選中擁有該屬性且屬性值也對應的元素。
- $(["attribute != value"]) 如果明確了屬性值，則選中擁有該屬性但屬性值不對應的元素。
- $(["attribute ^= a"]) ，選中擁有attibute屬性且屬性值以a開頭的元素。
- $(["attribute $= a"])，選中擁有attibute屬性且屬性值以b開頭的元素。
- $(["attribute *= c"]) ，選中擁有attibute屬性且屬性值中包含c的元素。
- $("selector[a][b]")，復合選擇器，選中同時滿足a b 兩個屬性的selector元素
### 5- 內(nèi)容選擇器
- 文本匹配選擇器：$("div:contains(a)")：匹配包含文本“a”的元素
- 元素匹配選擇器：$("div:has(a)")：匹配包含選擇器“a”元素的元素
- 空選擇器：$("div:empty")：匹配不含有空文本和子元素的元素
- 非空選擇器：$("div:parent")：匹配含有任何文本或子元素的元素
### 6- 表單選擇器
- $("input:enabled")：匹配可以使用的input元素
- $("input:disabled")：匹配不可以使用的input元素
- $("input:selected")：匹配選取的input元素（select下拉元素）
- $("input:checked")：匹配選中的的input元素（checkbox radio）
簡單語法練習：
$("ul li").css("list-style:one", "width:200px"); //后代選擇器，選擇ul內(nèi)部所有的li元素
$("ul li").css("border", "2px solid blue");
$("#a1").css("background", "grey"); //id選擇器，選擇id為"a1"的元素
$("#a1>p").css("background", "orange"); //父子選擇器，選擇id為"a1"的元素的子元素p，設置為橙色。而內(nèi)容為“hello p”的p元素不是該元素的子元素，所以不能選中。
$("#a1+li").css("background", "green"); //相鄰選擇器,選擇緊跟在id為"a1"的元素后面的元素li（內(nèi)容為"333"），設置背景為綠色。而內(nèi)容為"444"的元素跟它不相鄰，所以沒有選中。
$(".pc~span").css("background", "pink");//兄弟選擇器，選擇跟類名為"pc"的元素同級的span元素，所以僅有內(nèi)容是"span1"的span元素被改成了粉紅色，不同級的內(nèi)容為"span2"的元素沒有變化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="jq.js"></script>
</head>
<body>
<script>
$(document).ready(function () {//文檔就緒函數(shù)
$("ul li").css("list-style:one", "width:200px"); //后代選擇器，選擇ul內(nèi)部所有的li元素
$("ul li").css("border", "2px solid blue");
$("#a1").css("background", "grey"); //id選擇器，選擇id為"a1"的元素
$("#a1>p").css("background", "orange"); //父子選擇器，選擇id為"a1"的元素的子元素p，設置為橙色。而內(nèi)容為“hello p”的p元素不是該元素的子元素，所以不能選中。
$("#a1+li").css("background", "green"); //相鄰選擇器,選擇緊跟在id為"a1"的元素后面的元素li（內(nèi)容為"333"），設置背景為綠色。而內(nèi)容為"444"的元素跟它不相鄰，所以沒有選中。
$(".pc~span").css("background", "pink");//兄弟選擇器，選擇跟類名為"pc"的元素同級的span元素，所以僅有內(nèi)容是"span1"的span元素被改成了粉紅色，不同級的內(nèi)容為"span2"的元素沒有變化。
});
</script>
<ul>
<li>111</li>
<li>222</li>
<li id="a1">
<p>aaa</p>
<p>bbb</p>
<span>span1</span>
<div>
<p>hello p</p>
<span>span2</span>
</div>
</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>
批改老師：查無此人批改時間：2018-12-10 17:10:10
老師總結(jié)：做的不錯，jQuery的選擇器比較重要，這個會了，就相當于會了一大半了。