[TOC]
# jQuery的選擇器
## jQuery選擇?說明
jQuery 最核心的組成部分就是選擇?引擎。它完全繼承了 CSS 的風格,可以對 DOM 元 素的標簽名、屬性名、狀態等進行快速準確的選擇,而且不必擔心瀏覽?的兼容性,寫法更加簡潔。
jQuery 選擇?實現了 CSS1~CSS3 的大部分規則之外,還實現了一些自定義的選擇?,用于各種特殊狀態的選擇。
優點:相對于直接使用 JavaScript 獲取頁面元素和處理業務邏輯相比,用jQuery 選擇?來進行操作代碼 更簡單,且擁有完善的代碼檢測機制 。
jQuery 選擇?根據獲取頁面中元素的不同,可以劃分為四大類 : **基本選擇?、層級選擇?、篩選選擇?和表單選擇?。**
### 基本選擇?
顧名思義,基本選擇?是jQuery中用的最多, 使用最頻繁的選擇?,通過基本選擇?我們可以實現大多數 頁面元素的選擇。基本選擇?主要有: **ID選擇?、類選擇?、標簽選擇?、并集選擇?和通配符選擇?。**
| 選擇器 | 語法 | 功能 | 參考實例 |
| --- | --- | --- | --- |
| ID選擇器 | #id | 根據給定的id匹配一個元素 | $("#divId") |
| 類選擇器 | .class | 根據給定的class匹配所有的元素 | $(".classValue") |
| 標簽選擇器 | element | 根據給定的元素名匹配所有的元素 | $("elementName") |
| 通配符選擇器 | \* | 匹配所有的元素 | $("\*") |
| 并集選擇器 | #id,.class | 將每中選擇器的結果合并在一起后返回 | $("#divId,.class") |
```
<body>
<div id="demo">我是id為demo的div標簽</div>
<div class="box1">我是class為box1的div標簽</div>
<div class="box1">我是class為box1的div標簽</div>
<div class="box2">我是class為box2的div標簽</div>
<div class="box2">我是class為box2的div標簽</div>
<p>我是p標簽</p>
<script>
$(function () {
//ID選擇?:獲取頁面中id為demo的標簽
console.log($("#demo"));
//類選擇?:獲取頁面中所有class為box1的標簽
console.log($(".box1"));
//類選擇?:獲取頁面中所有class為box2的標簽
console.log($(".box2"));
//標簽選擇?:獲取頁面中所有的p標簽
console.log($("p"));
//并集選擇?:獲取頁面中id為demo的標簽以及class為box2的所有標簽
console.log($("#demo,.box2"));
//通配符選擇?:獲取頁面中所有的標簽(包括HTML)
console.log($("*"));
})
</script>
</body>
```
### 層級選擇器
層次選擇?通過 DOM 元素間的層次關系獲取元素,其主要的層次關系包括 **后代 、 直接后代 、 下一個相鄰兄弟和后面所有兄弟元素**的關系,通過其中某類關系可以方便快捷地定位元素。
| 選擇器 | 語法 | 功能 | 參考實例 |
| --- | --- | --- | --- |
| 后代選擇器 | parent child | 根據祖先元素匹配所有的后代元素 | $("div p") |
| 直接后代選擇器 | parent>child | 根據父元素匹配所有的子元素 | $("div>.box") |
| 下一個相鄰兄弟 | prev+next | 匹配所有緊接在prev元素后的相鄰元素 | $("#div+p") |
| 后面所有兄弟 | prev~siblings | 匹配prev元素之后的所有兄弟元素 | $("#div~p") |
**說明:** 后代選擇?獲取的是所有的后代標簽(層次關系是祖先與后代),而直接后代僅僅獲取指定標簽的 子節點滿足條件的標簽(層次關系為父子關系)。
**補充:**
next() == 下一個相鄰兄弟
nextAll() == 后面所有兄弟
代碼示例
```
<div class="box">
<div>div1</div>
<div class="current">
<div>A</div>
<div>B</div>
<div>c</div>
</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</div>
<script>
$(function () {
//(1) 后代標簽 $(".box div")
//要獲取class為box的標簽的所有后代中的div標簽
console.log($(".box div"));
//(2) 直接后代 $(".box > div")
console.log($(".box > div"));
//(3) 當前標簽后面的第一個兄弟節點 $(".box1 + div")
console.log($(".box1 + div"));
//(4) 當前標簽后面的所有的兄弟節點 $(".box1 ~ div")
console.log($(".box1 ~ div"));
})
</script>
```
### 父子兄選擇?相關方法
parent() 獲取當前標簽的父節點 parents() 獲取當前標簽的祖先節點 parentsUntil() 獲取當前標簽的祖先節點直到… children() 獲取當前標簽的子節點 siblings() 獲取當前標簽的兄弟節點
代碼示例
~~~
<body>
? ?<div>
? <div class="box">
? <div>demo</div>
? <div class="active">demo</div>
? <div>demo</div>
? <div>demo</div>
? <div>demo</div>
? </div>
? <span>我是span</span>
? ?</div>
? ?<button>點擊我</button>
?
<script>
? $(function () {
? $("button").click(function () {
? //(1) 獲取當前標簽的父節點
? console.log(this);
? console.log($(".active").parent());
?
? ? ? ? ? ? ? ?//(2) 獲取當前標簽的祖先節點
? console.log($(".active").parents());
? //(3) 獲取當前標簽的祖先節點直到...
? console.log($(".active").parentsUntil("body"));
? //(4) 獲取當前標簽的子節點
? console.log($(".box").children());
? //(5) 獲取除了當前標簽之外的其他兄弟節點
? console.log($(".active ~ div"));
? console.log($(".active").siblings());
? })
? })
? ?</script>
</body>
~~~
### 篩選選擇器
篩選選擇? 可以劃分為 :**基本篩選選擇?、內容篩選選擇?、可見性篩選選擇?、屬性篩選選擇?、子元素** **篩選選擇?、表單對象屬性篩選選擇?**。
#### 基本篩選選擇器
| 選擇器語法 | 功能 |
| --- | --- |
| :first | 獲取第一個元素 |
| :last | 獲取最后一個元素 |
| :eq | 獲取指定索引值的元素 |
| :gt(index) | 獲取大于給定索引值的元素 |
| :lt(index) | 獲取小于給定索引值的元素 |
| :not(selector) | 獲取除給定選擇器外的所有元素 |
| :header | 獲取所有標題類型的元素 |
| :animated | 獲取正在執行動畫效果的元素 |
| :even | 獲取所有索引值為偶數的元素,索引從0開始 |
| :odd | 獲取所有索引值為奇數的元素,索引從0開始 |
代碼示例
~~~
<script>
$(function () {
? ? ? ? //01 獲取整個頁面中第一個li標簽
? ? ? ? console.log($("li:first"));
? ? ? ? //02 獲取整個頁面中最后一個li標簽
? ? ? ? console.log($("li:last"));
? ? ? ? //03 獲取整個頁面中所有的li標簽,除了最后一個
? ? ? ? console.log($("li:not(:last)"));
? ? ? ? //04 獲取整個頁面中所有的li標簽,除了索引為2的之外
? ? ? ? console.log($("li:not(:eq(2))"));
? ? ? ? //05 獲取索引值為偶數的li標簽
? ? ? ? console.log($("li:even"));
? ? ? ? //06 獲取索引值為奇數的li標簽
? ? ? ? console.log($("li:odd"));
? ? ? ? //07 獲取索引值為4的li標簽
? ? ? ? console.log($("li:eq(4)"));
? ? ? ? //08 獲取所有索引值大于4的li標簽
? ? ? ? console.log($("li:gt(4)"));
? ? ? ? //09 獲取所有索引值小于4的li標簽
? ? ? ? console.log($("li:lt(4)"));
? ? });
</script>
~~~
#### 內容篩選選擇器
內容篩選選擇?根據元素中的文字內容或所包含的子元素特征獲取元素,其文字內容可以模糊或絕對匹配 進行元素定位。
| 選擇器語法 | 功能 |
| --- | --- |
| :contains(text) | 獲取包含給定文本的元素 |
| :parent | 獲取含有子元素或者文本的元素 |
| :empty | 獲取所有不包含子元素或者文本的元素 |
| :has(selector) | 獲取含有選擇器所匹配的元素 |
代碼示例
~~~
<!DOCTYPE html>
<html lang="en">
? ?<head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>Title</title>
? ? ? ? <script src="jquery-3.1.1.js"></script>
? ? ? ? <style>
? ? ? ? ? ? div{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? }
? ? ? ? </style>
? ?</head>
? ?<body>
? ? ? ?<div>天王蓋地虎</div>
? ? ? ?<div><span>我是span</span></div>
? ? ? ?<div>寶塔鎮河妖</div>
? ? ? ?<div></div>
? ? ? ?<script>
? ? ? ? ? ? $(function () {
? ? ? ? ? ? ? ? //(1) 獲取包含給定文本的元素
? ? ? ? ? ? ? ? console.log($("div:contains('天')"));
? ? ? ? ? ? ? ? console.log($("div:contains('塔')"));
? ? ? ? ? ? ? ? //(2) 獲取不包含子元素或文本的空元素
? ? ? ? ? ? ? ? console.log($("div:empty"));
? ? ? ? ? ? ? ? //(3) 獲取含有子元素或者是文本的元素
? ? ? ? ? ? ? ? console.log($("div:parent"));
? ? ? ? ? ? ? ? //(4) 獲取含有span子標簽的div
? ? ? ? ? ? ? ? console.log($("div:has('span')"));
? ? ? ? ? ? })
? ? ? ?</script>
? ?</body>
</html>
~~~
#### 屬性篩選選擇器
屬性過濾選擇? 根據元素的某個屬性獲取元素,在使用的時候我們可以匹配單個屬性也可以進行多個屬性的匹配。
| 選擇器語法 | 功能 |
| --- | --- |
| \[屬性名\] | 獲取包含給定屬性的元素 |
| \[屬性名1\] \[屬性名2\] | 獲取滿足多個條件的符合屬性的元素 |
| \[屬性名='value'\] | 獲取包含給定屬性且等于指定值的元素 |
| \[屬性名!=value\] | 獲取包含給定屬性且值不等于給定值的元素 |
| \[屬性名^=value\] | 獲取包含給定屬性且值以指定字符開頭的元素 |
| \[屬性名$=value\] | 獲取包含給定屬性且值以指定字符結尾的元素 |
| \[屬性名\*=value\] | 獲取包含給定屬性且包含指定字符或子串的元素 |
代碼示例:
~~~
<body>
? ?<div>
? ? <a href="www.baidu.com">www.baidu.com</a><br>
? ? <a href="www.jd.com">www.jd.com</a><br>
? ? <a href="www.taobao.com">www.taobao.com</a><br>
? ? <a href="www.wolfcode.cn">www.wolfcode.cn</a><br>
? ? <a href="www.wolfcode.cn" title="demo">www.wolfcode.cn</a><br>
? ? <a href="www.wolfcode.cn" title="Test">www.wolfcode.cn</a><br>
? ? <a>我什么也不是</a>
? ?</div>
<script src="js/jquery-3.2.1.js"></script>
? ?<script>
? ? ? ?
? ? ? ? $(function () {
? ? ? //獲取所有擁有href屬性的a標簽
? ? ? ? ? ? console.log($("a[href]"));
? ? ? //獲取href屬性值為www.baidu.com的a標簽
? ? ? ? ? ? console.log($("a[href='www.baidu.com']"));
? ? ? //獲取href屬性值不為www.baidu.com的a標簽
? ? ? ? ? ? console.log($("a[href!='www.baidu.com']"));
? ? ? //獲取href屬性值以www開頭的a標簽
? ? ? ? ? ? console.log($("a[href^='www']"));
? ? ? //獲取href屬性值以com結尾的a標簽
? ? ? ? ? ? console.log($("a[href$='com']"));
? ? ? //獲取href屬性值包含wolf的a標簽
? ? ? ? ? ? console.log($("a[href*='wolf']"));
? ? ? //獲取href屬性值中以www開頭且title中包含demo的a標簽
? ? ? ? ? ? console.log($("a[href^='www'][title='demo']"));
? ?</script>
</body>
~~~
#### 子元素篩選選擇器
通過子元素篩選選擇?可以方便輕松的獲取父元素中指定的某個元素。
| 選擇器語法 | 功能 |
| --- | --- |
| :first-child | 獲取每個元素下的第一個子元素 |
| :last-child | 獲取每個父元素下的最后一個子元素 |
| :only-child | 獲取每個父元素下的僅有一個子元素 |
| :nth-child(eq-index) | 獲取每個父元素下特定索引位置的元素 索引從0開始 |
#### 可見性篩選選擇器
可見性過濾選擇? 根據元素是否可見的特征獲取元素,分為可見和不可見兩種。
| 選擇器語法 | 功能 |
| --- | --- |
| :visible | 獲取所有可見的元素 |
| :hidden | 獲取所有不可見元素,獲取type為hidden的元素 |
#### 表單對象屬性篩選選擇器
| 選擇器語法 | 功能 |
| --- | --- |
| :enabled | 獲取表單中所有屬性為可用的元素 |
| :disabled | 獲取表單中所有屬性為不可用的元素 |
| :checked | 獲取表單中所有被選中的元素 |
| :selected | 獲取表單中所有被選中的option元素 |
表單選擇器
表單在前端開發中是非常重要的標簽,在顯示和提交數據的數據經常需要用到,在 jQuery 框架中引入了 表 單選擇? ,該選擇?專為表單量身打造,通過表單選擇?可以在頁面中快速定位某表單對象。
| 選擇器語法 | 功能 |
| --- | --- |
| :file | 獲取所有的文件上傳元素 |
| :image | 獲取所有的圖片域 |
| :text | 獲取所有的單行文本域 |
| :reset | 獲取所有的重置按鈕 |
| :radio | 獲取所有的單選按鈕 |
| :button | 獲取所有的按鈕 |
| :submit | 獲取所有的提交按鈕 |
| :checkbox | 獲取所有的復選框 |
| :password | 獲取所偶遇的密碼框 |
| :input | 獲取所偶遇的input、textarea、select元素 |
1
1
1
1
1
1
1
1
1