目錄
Hello，大家好，我是灰小猿，一個超會寫bug的程序猿！
今天來和大家分享一下jQuery的五種選擇器的詳細使用方法，那麼何爲選擇器？從功能上來講，它能夠篩選具有相似特徵的元素標籤，在我們想要對具有相似特徵的元素進行集中或統一操作時是十分有用的，
選擇器基本操作
首先我們需要了解選擇器使用的基本操作，該基本操作可以分爲三步：
1、事件綁定
選擇器的使用需要進行事件的綁定，一般來說我們可以將事件綁定到一個按鈕上去，通過按鈕的點擊來觸發相應的事件響應。
2、入口函數
同時在jQuery中，這樣的事件綁定是需要寫在一個入口函數中去的，在
<script></script>的代碼段中建立入口函數的語法是：
$(function(){
});在這裏需要注意的是：在js中定義入口函數的window.onload方法和$(function)方法是有區別的，
具體如下：
window.onload只能定義一次，如果定義多次，後面的會將前面的覆蓋掉
$(function)方法是可以定義多次的，後面的不會將前面的覆蓋掉
3、樣式控制
當我們對選擇器的事件進行了綁定之後，我們就可以通過選擇器進行相應元素的樣式控制了，在這裏通常的表現是css方法，通過css方法來對相應的元素樣式進行修改。
來看一個基本操作的實例：
<script type="text/javascript">
$(function () {
//標籤選擇器
// 改變元素名爲 <div> 的所有元素的背景色爲 紅色
$("#b2").click(function f() {
$("div").css("backgroundColor","yellow");
});
});
</script>那麼接下來就通過實例分別來和大家講一下jQuery框架下的五種選擇器的使用方法。
一、基本選擇器
1、標籤選擇器
標籤選擇器又稱爲“元素選擇器”，
語法：$(“html標籤名”)
作用：獲得所有匹配標籤元素名稱的元素
//標籤選擇器
// 改變元素名爲 <div> 的所有元素的背景色爲 黃色id="b1"
$("#b1").click(function f() {
$("div").css("backgroundColor","yellow");
});2、id選擇器
語法：$(“#id的屬性值”)
作用：獲得與指定id屬性值匹配的元素
//id選擇器
// 改變 id 爲 one 的元素的背景色爲 粉色 id="b2"
$("#b2").click(function () {
$("#one").css("backgroundColor","pink");
});3、類選擇器
語法：$(“.class的屬性選擇器”)
作用：獲得與指定class屬性值匹配的元素
//類選擇器
// 改變 class 爲 mini 的所有元素的背景色爲 紅色id="b3"
$("#b3").click(function () {
$(".mini").css("backgroundColor","red");
});
4、並集選擇器
語法：$(“選擇器1,選擇器2....”)
獲取多個選擇器選中的所有元素
//並集選擇器
// 改變所有的<span>元素和 id 爲 two 的元素的背景色爲藍色id="b4"
$("#b4").click(function () {
$("span,#two").css("backgroundColor","blue");
});
二、層級選擇器
1、後代選擇器
語法：$(“A B”)
作用：選擇A元素內部的所有B元素
//後代選擇器
// 改變 <body> 內所有 <div> 的背景色爲紅色id="b1"
$("#b1").click(function () {
$("body div").css("backgroundColor","pink");
});2、子選擇器
語法：$(“A > B”)
作用：選擇A元素內部的所有B子元素
// 子選擇器
// 改變 <body> 內子 <div> 的背景色爲 紅色id="b2"
$("#b2").click(function () {
$("body > div").css("backgroundColor","red");
});在這裏需要注意的是：這兩個選擇器看上去似乎沒有什麼區別，但是我們在使用時就會發現其實是有區別的，後代選擇器會將元素A內部的所有B元素都選中，而子選擇器只會選中元素A的下一級元素中的B元素，範圍是小於後代選擇器的。具體可以看下面的實例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>層次選擇器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<script type="text/javascript">
$(function () {
//後代選擇器
// 改變 <body> 內所有 <div> 的背景色爲紅色
$("#b1").click(function () {
$("body div").css("backgroundColor","pink");
});
// 子選擇器
// 改變 <body> 內子 <div> 的背景色爲 紅色
$("#b2").click(function () {
$("body > div").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改變 <body> 內所有 <div> 的背景色爲紅色" id="b1"/>
<input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 紅色" id="b2"/>
<h1>有一種奇蹟叫堅持</h1>
<h2>自信源於努力</h2>
<div id="one">
id爲one
</div>
<div id="two" class="mini" >
id爲two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<span class="spanone"> span
</span>
</body>
</html>
三、屬性選擇器
1、屬性名稱選擇器
語法：$(“A[屬性名]”)
作用：包含指定屬性的選擇器
// 含有屬性title 的div元素背景色爲紅色" id="b1"
$("#b1").click(function () {
$("div[title]").css("backgroundColor","pink");
});2、屬性選擇器
語法：$(“A[屬性名=’值’]”)
作用：包含指定屬性等於指定值的選擇器，
// 屬性title值等於test的div元素背景色爲紅色" id="b2"
$("#b2").click(function () {
$("div[title='test']").css("backgroundColor","red");
});在這個選擇器中，我們可以根據他的功能進行拓展，比如我們可以將：
“=”換成“!=”，就是指定屬性名稱不等於指定值的選擇器
// 屬性title值不等於test的div元素(沒有屬性title的也將被選中)背景色爲紅色" id="b3"
$("#b3").click(function () {
$("div[title!='test']").css("backgroundColor","red");
});根據正則表達式的使用規則：
“=”換成“^=”，就是指定屬性名稱是以指定值開頭的選擇器
// 屬性title值 以te開始 的div元素背景色爲紅色" id="b4"
$("#b4").click(function () {
$("div[title^='te']").css("backgroundColor","red");
});“=”換成“$=”,就是指定屬性名稱是以指定值結尾的選擇器
// 屬性title值 以est結束 的div元素背景色爲紅色" id="b5"
$("#b5").click(function () {
$("div[title$='est']").css("backgroundColor","red");
});“=”換成“*=”，就是指定屬性名稱中包含指定值的選擇器
// 屬性title值 含有es的div元素背景色爲紅色" id="b6"
$("#b6").click(function () {
$("div[title*='es']").css("backgroundColor","red");
});3、複合屬性選擇器
語法：$(“A[屬性名=’值’][]...”)
作用：包含多個屬性條件的選擇器
// 選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素背景色爲紅色" id="b7"
$("#b7").click(function () {
$("div[id][title*='es']").css("backgroundColor","red");
});
四、過濾選擇器
1、首元素選擇器
語法：$(“A:first”)
作用：獲得選擇的元素的第一個元素
// 改變第一個 div 元素的背景色爲 紅色" id="b1"
$("#b1").click(function () {
$("div:first").css("backgroundColor","red");
});2、尾元素選擇器
語法：$(“A:last”)
作用：獲得選擇的元素的最後一個元素
// 改變最後一個 div 元素的背景色爲 紅色" id="b2"
$("#b2").click(function () {
$("div:last").css("backgroundColor","red");
});3、非元素選擇器
語法：$(“not(selector)”)
作用：不包括指定內容的元素
// 改變class不爲 one 的所有 div 元素的背景色爲 紅色" id="b3
$("#b3").click(function () {
$("div:not(.one)").css("backgroundColor","red");
});4、偶數選擇器
語法：$(“A:even”)
作用：從0開始計數，獲得選擇的元素中索引爲偶數的元素
// 改變索引值爲偶數的 div 元素的背景色爲 紅色" id="b4"
$("#b4").click(function () {
$("div:even").css("backgroundColor","red");
});5、奇數選擇器
語法：$(“A:odd”)
作用：從0開始計數，獲得選擇的元素中索引爲奇數的元素
// 改變索引值爲奇數的 div 元素的背景色爲 紅色" id="b5"
$("#b5").click(function () {
$("div:odd").css("backgroundColor","red");
});6、等於索引選擇器
語法：$(“A:eq(index)”)
作用：獲得選擇的元素中指定索引的元素
// 改變索引值爲等於 3 的 div 元素的背景色爲 紅色" id="b7"
$("#b7").click(function () {
$("div:eq(3)").css("backgroundColor","red");
});7、大於索引選擇器
語法：$(“A:gt(index)”)
作用：獲得選擇的元素中大於指定索引的元素
// 改變索引值爲大於 3 的 div 元素的背景色爲 紅色" id="b6"
$("#b6").click(function () {
$("div:gt(3)").css("backgroundColor","red");
});8、小於於索引選擇器
語法：$(“A:lt(index)”)
作用：獲得選擇的元素中小於指定索引的元素
// 改變索引值爲小於 3 的 div 元素的背景色爲 紅色" id="b8"
$("#b8").click(function () {
$("div:lt(3)").css("backgroundColor","red");
});9、標題選擇器
語法：$(“:header”)
作用：獲得標題（h1~h6）元素，爲固定寫法
// 改變所有的標題元素的背景色爲 紅色" id="b9"
$("#b9").click(function () {
$(":header").css("backgroundColor","red");
});
五、表單過濾選擇器
1、可用元素選擇器
語法：$(“A:enabled”)
作用：獲得選擇元素中的可用元素
// 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"
$("#b1").click(function () {
$("input[type='text']:enabled").val("aaa");
});2、不可用元素選擇器
語法：$(“A:disabled”)
作用：獲得選擇元素中的不可用元素
// 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"
$("#b2").click(function () {
$("input[type='text']:disabled").val("bbb");
});3、選中選擇器
語法：$(“A:checked”)
作用：獲得單選/複選框選中的元素
// 利用 jQuery 對象的 length 屬性獲取複選框選中的個數" id="b3"
$("#b3").click(function () {
var lengths = $("input[type='checkbox']:checked").length;
alert(lengths);
});4、選中選擇器（下拉框）
語法：$(“A:selected”)
作用：獲得下拉框選中的元素
// 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數" id="b4"
$("#b4").click(function () {
var selects = $("#job > option:selected").length;
alert(selects)
});在這裏需要注意一點：上面的兩個選中選擇器的作用對象是不一樣的，第一個選中選擇器的作用對象是單選/複選框，而第二個選中選擇器的作用對象是下拉框，同時對於第二種選擇器，它的作用內容是下拉框中的包含在<option></option>內的選項，因此在使用時應當使用“>”來具體說明，具體可以看下面的實例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表單屬性過濾選擇器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.min.js"></script>
<style type="text/css">
#job{
margin: 20px;
}
#edu{
margin-top:-70px;
}
</style>
<script type="text/javascript">
$(function () {
// 利用 jQuery 對象的 length 屬性獲取複選框選中的個數" id="b3"
$("#b3").click(function () {
var lengths = $("input[type='checkbox']:checked").length;
alert(lengths);
});
// 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數" id="b4"
$("#b4").click(function () {
var selects = $("#job > option:selected").length;
alert(selects)
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 利用 jQuery 對象的 length 屬性獲取複選框選中的個數" id="b3"/>
<input type="button" value=" 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數" id="b4"/>
<br><br>
<br><br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
<br><br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
<option>程序員</option>
<option>中級程序員</option>
<option>高級程序員</option>
<option>系統分析師</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>碩士</option>
<option>大專</option>
</select>
<br/>
</body>
</html>
好了，關於jQuery框架中五種選擇器的使用就先和大家分享到這裏，之後還會繼續和小夥伴們分享jQuery的選擇器、DOM操作以及jQuery的高級進階內容。
覺得不錯記得點贊關注喲！
灰小猿陪你一起進步！
