jQuery系列第四章 jQuery框架的選擇器

第四章 jQuery框架的選擇器

4.1 jQuery選擇器說明

jQuery 最核心的組成部分就是選擇器引擎。它徹底繼承了 CSS 的風格,能夠對 DOM 元素的標籤名、屬性名、狀態等進行快速準確的選擇，並且沒必要擔憂瀏覽器的兼容性，寫法更加簡潔。css

jQuery 選擇器實現了 CSS1~CSS3 的大部分規則以外,還實現了一些自定義的選擇器,用於各類特殊狀態的選擇。html

優勢：相對於直接使用 JavaScript 獲取頁面元素和處理業務邏輯相比，使用jQuery 選擇器來進行操做代碼更簡單且擁有完善的代碼檢測機制。前端

jQuery 選擇器根據獲取頁面中元素的不一樣，能夠劃分爲四大類 :基本選擇器、層級選擇器、篩選選擇器和表單選擇器。jquery

4.2 基本選擇器

顧名思義，基本選擇器是jQuery中用的最多，使用最頻繁的選擇器，經過基本選擇器咱們能夠實現大多數頁面元素的選擇。基本選擇器主要有：ID選擇器、類選擇器、標籤選擇器、並集選擇器和通配符選擇器。瀏覽器

選擇器	語法	功能	參考示例
ID選擇器	#id	根據給定的ID匹配一個元素	$(「#divID」)
類選擇器	.class	根據給定的類名匹配全部的元素	$(「.box」)
標籤選擇器	element	根據給定的元素名匹配全部的元素	$(「div」)
通配符選擇器	*	匹配全部的元素	$(「*」)
並集選擇器	#id,.class	將每一個選擇器匹配到的元素合併在一塊兒後返回	$(「#divID,.box」)

基本選擇器代碼示例框架

 1 <body>
 2 <div id="demo">我是id爲demo的div標籤</div>
 3 <div class="box1">我是class爲box1的div標籤</div>
 4 <div class="box1">我是class爲box1的div標籤</div>
 5 <div class="box2">我是class爲box2的div標籤</div>
 6 <div class="box2">我是class爲box2的div標籤</div>
 7 <p>我是p標籤</p>
 8 <script>
 9     $(function () {
10         //基本選擇器:
11         //(1) ID選擇器 $("#ID");
12         //(2) 類選擇器  $(".類");
13         //(3) 標籤選擇器 $("標籤名");
14         //(4) 並集選擇器 $("選擇器,選擇器")
15         //(5) 通配符    $("*")
16         
17         //ID選擇器:獲取頁面中id爲demo的標籤,設置背景顏色爲紅色
18          $("#demo").css("background","red");
19          //類選擇器:獲取頁面中全部class爲box1的標籤,並設置背景顏色
20          $(".box1").css("background","green");
21          //類選擇器:獲取頁面中全部class爲box2的標籤,並設置背景顏色
22          $(".box2").css("background","yellow");
23          //標籤選擇器:獲取頁面中全部的p標籤
24          $("p").css("background","red");
25          //並集選擇器:獲取頁面中id爲demo的標籤以及class爲box2的全部標籤
26          $("#demo,.box2").css("background","green");
27          //通配符選擇器:獲取頁面中全部的標籤(包括HTML),設置背景顏色
28          $("*").css("background","green");
29     })
30 </script>

4.3 層級選擇器 post

層次選擇器經過 DOM 元素間的層次關係獲取元素，其主要的層次關係包括後代、直接後代、下一個相鄰兄弟和後面全部兄弟元素的關係，經過其中某類關係能夠方便快捷地定位元素。動畫

選擇器	語法	功能	參考示例
後代選擇器	parent child	根據祖先元素匹配全部的後代元素	$(「div p」)
直接後代選擇器	parent > child	根據父元素匹配全部的子元素	$(「div > .box」)
下一個相鄰兄弟	prev + next	匹配全部緊接在prev元素後的相鄰元素	$(「#demoID + div」)
後面全部兄弟	prev ~ siblings	匹配 prev 元素以後的全部兄弟元素	$(「#demoID ~ div」)

說明： 後代選擇器獲取的是全部的後代標籤（層次關係是祖先與後代），而直接後代僅僅獲取指定標籤的子節點知足條件的標籤（層次關係爲父子關係）。this

補充 next() == 下一個相鄰兄弟 || nextAll() == 後面全部兄弟spa

代碼示例

 1 <script>
 2     $(function () {
 3         //....
 4         //(1) 後代標籤 $(".box div")
 5         //要獲取class爲box的標籤的全部後代中的div標籤
 6         $(".box div").css("background","red");
 7         //(2) 直接後代 $(".box>div")
 8         $(".box>div").css("background","green");
 9         //(3) 當前標籤後面的第一個兄弟節點 $(".box1 + div")
10         $(".box1 +div").css("background","green");
11         //(4) 當前標籤後面的全部的兄弟節點 $(".box1 ~ div")
12         $(".box1 ~ div").css("background","green");
13     })
14 </script>

父子選擇器相關方法

`parent() 獲取當前標籤的父節點`
`parents()獲取當前標籤的祖先節點`
`parentsUntil()獲取當前標籤的祖先節點直到…`
`children()獲取當前標籤的子節點`
`siblings()獲取當前標籤的兄弟節點`

代碼示例

 1 <body>
 2 <div>
 3     <div class="box">
 4         <div>demo</div>
 5         <div class="active">demo</div>
 6         <div>demo</div>
 7         <div>demo</div>
 8         <div>demo</div>
 9     </div>
10     <span>我是span</span>
11 </div>
12 <button>點擊我</button>
13 <script>
14     $(function () {
15         $("button").click(function () {
16             //(1) 獲取當前標籤的父節點
17             //console.log(this);
18             //console.log($(".active").parent());
19             //$(".active").parent().css("background","red");
20             //(2) 獲取當前標籤的祖先節點
21             //$(".active").parents().css("background","red");
22             //(3) 獲取當前標籤的祖先節點直到...
23             //$(".active").parentsUntil("body").css("background","red");
24             //(4) 獲取當前標籤的子節點
25             //$(".box").children().css("background","green");
26             //(5) 獲取除了當前標籤以外的其餘兄弟節點
27             //$(".active ~div").css("background","green");
28             $(".active").siblings().css("background","green");
29         })
30     })
31 </script>

4.4 篩選選擇器

篩選選擇器能夠劃分爲 :基本篩選選擇器、內容篩選選擇器、可見性篩選選擇器、屬性篩選選擇器、子元素篩選選擇器、表單對象屬性篩選選擇器。

4.4.1 基本篩選選擇器

選擇器語法	功能
:first	獲取第一個元素
:last	獲取最後一個元素
:eq(index)	獲取指定索引值的元素
:gt(index)	獲取大於給定索引值的元素
:lt(index)	獲取小於給定索引值的元素
:not(selector)	獲取除給定選擇器外的全部元素
:header	獲取全部標題類型的元素，如h1 h2
:animated	獲取正在執行動畫效果的元素
:even	獲取全部索引值爲偶數的元素，索引號從0開始
:odd	獲取全部索引值爲奇數的元素，索引號從0開始

代碼示例

 1 <script>
 2     $(function () {
 3         //01 獲取整個頁面中第一個li標籤,並設置背景顏色
 4         $("li:first").css("background","green");
 5         //02 獲取整個頁面中最後一個li標籤,並設置背景顏色
 6         $("li:last").css("background","green");
 7         //03 獲取整個頁面中全部的li標籤,除了最後一個
 8         $("li:not(:last)").css("background","green");
 9         //04 獲取整個頁面中全部的li標籤,除了索引爲2的以外
10         $("li:not(:eq(2))").css("background","green");
11         //05 獲取索引值爲偶數的li標籤
12         $("li:even").css("background","green");
13         //06 獲取索引值爲奇數的li標籤
14         $("li:odd").css("background","green");
15         //07 獲取索引值爲4的li標籤
16         $("li:eq(4)").css("background","green");
17         //08 獲取全部索引值大於4的li標籤
18         $("li:gt(4)").css("background","green");
19         //09 獲取全部索引值小於4的li標籤
20         $("li:lt(4)").css("background","green");
21     });
22 </script>

4.4.2 內容篩選選擇器

內容篩選選擇器根據元素中的文字內容或所包含的子元素特徵獲取元素，其文字內容能夠模糊或絕對匹配進行元素定位。

選擇器語法	功能
:contains(text)	獲取包含給定文本的元素
:parent	獲取含有子元素或者文本的元素
:empty	獲取全部不包含子元素或文本的空元素
:has(selector)	獲取含有選擇器所匹配的元素

代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-3.1.1.js"></script>
 7     <style>
 8         div{
 9             width: 100px;
10             height: 40px;
11         }
12     </style>
13 </head>
14 <body>
15 <div>天王蓋地虎</div>
16 <div><span>我是span</span></div>
17 <div>寶塔鎮河妖</div>
18 <div></div>
19 <script>
20     $(function () {
21         //(1) 獲取包含給定文本的元素
22         $("div:contains('天')").css("background","red");
23         $("div:contains('塔')").css("background","green");
24         //(2) 獲取不包含子元素或文本的空元素
25         $("div:empty").css("background","red");
26         //(3) 獲取含有子元素或者是文本的元素
27         $("div:parent").css("background","yellow");
28         //(4) 獲取含有span子標籤的div
29         $("div:has('span')").css("background","red");
30     })
31 </script>
32 </body>
33 </html>

4.4.3 屬性篩選選擇器

屬性過濾選擇器根據元素的某個屬性獲取元素，在使用的時候咱們能夠匹配單個屬性也能夠進行多個屬性的匹配。

選擇器語法	功能
[屬性名]	獲取包含給定屬性的元素
[屬性名1][屬性名2]	獲取知足多個條件的複合屬性的元素
[屬性名=’value’]	獲取包含給定屬性且等於指定值的元素
[屬性名！=’value’]	獲取包含給定屬性且不等於指定值的元素
[屬性名^=’value’]	獲取包含給定屬性且以指定字符開頭的元素
[屬性名$=’value’]	獲取包含給定屬性且以指定字符結尾的元素
[屬性名*=’value’]	獲取包含給定屬性且包含指定字符或者是子串的元素

示例代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div>
 9     <a href="www.baidu.com">www.baidu.com</a><br>
10     <a href="www.jd.com">www.jd.com</a><br>
11     <a href="www.taobao.com">www.taobao.com</a><br>
12     <a href="www.520it.cn">www.520it.cn</a><br>
13     <a href="www.520it.com" title="demo">www.520it.com</a><br>
14     <a href="www.520it.com" title="Test">www.520it.com</a><br>
15     <a>我什麼也不是</a>
16 </div>
17 <button>設置全部擁有href屬性的a標籤</button><br>
18 <button>設置harf屬性值爲www.baidu.com的a標籤</button><br>
19 <button>設置harf屬性值不爲www.baidu.com的a標籤</button><br>
20 <button>設置harf屬性值以www開頭的a標籤</button><br>
21 <button>設置harf屬性值以com結尾的a標籤</button><br>
22 <button>設置harf屬性值包含520的a標籤</button><br>
23 <button>設置harf屬性值中以www開頭且title中包含demo的a標籤</button><br>
24 <script src="js/jquery-3.2.1.js"></script>
25 <script>
26     $(function () {
27         $("button").eq(0).click(function () {
28             $("a[href]").css("background","green");
29         });
30         $("button").eq(1).click(function () {
31             $("a[href='www.baidu.com']").css("background","green");
32         });
33         $("button").eq(2).click(function () {
34             $("a[href!='www.baidu.com']").css("background","green");
35         });
36         $("button").eq(3).click(function () {
37             $("a[href^='www']").css("background","green");
38         });
39         $("button").eq(4).click(function () {
40             $("a[href$='com']").css("background","green");
41         });
42         $("button").eq(5).click(function () {
43             $("a[href*='520']").css("background","green");
44         });
45         $("button").eq(6).click(function () {
46             $("a[href^='www'][title='demo']").css("background","green");
47         });
48     });
49 </script>
50 </body>
51 </html>

4.4.4 子元素篩選選擇器

經過子元素篩選選擇器能夠方便輕鬆的獲取父元素中指定的某個元素。

選擇器語法	功能
:first-child	獲取每一個父元素下的第一個子元素
:last-child	獲取每一個父元素下的最後一個子元素
:only-child	獲取每一個父元素下的僅有一個子元素
:nth-child(eq-index)	獲取每一個父元素下特定位置的元素索引從1開始

4.4.5 可見性篩選選擇器

可見性過濾選擇器根據元素是否可見的特徵獲取元素，分爲可見和不可見兩種。

選擇器語法	功能
:visible	獲取全部的可見元素
:hidden	獲取全部不可見元素,或者type爲hidden的元素

4.4.6 表單對象屬性篩選選擇器

表單對象屬性篩選選擇器經過表單中某對象的屬性特徵獲取該類元素，主要有enabled、disabled、checked（選中）elected等屬性。

選擇器語法	功能
:enabled	獲取表單中全部屬性爲可用的元素
:disabled	獲取表單中全部屬性爲不可用的元素
:checked	獲取表單中全部被選中的元素
:selected	獲取表單中全部被選中option的元素

4.4.5 可見性篩選選擇器

可見性過濾選擇器根據元素是否可見的特徵獲取元素，分爲可見和不可見兩種。

選擇器語法	功能
:visible	獲取全部的可見元素
:hidden	獲取全部不可見元素,或者type爲hidden的元素

4.5 表單選擇器

表單在前端開發中是很是重要的標籤，在顯示和提交數據的數據常常須要用到，在 jQuery 框架中引入了表單選擇器，該選擇器專爲表單量身打造，經過表單選擇器能夠在頁面中快速定位某表單對象。

表單選擇器的語法

選擇器語法	功能
:file	獲取全部文件域
:image	獲取全部的圖像域
:text	獲取全部的單行文本框
:reset	獲取全部重置按鈕
:radio	獲取全部單選框按鈕
:button	獲取全部按鈕
:submit	獲取全部提交按鈕
:checkbox	獲取全部的複選框
:password	獲取全部的密碼框
:input	獲取全部的input、textarea、select標籤

附錄 jQuery選擇器知識結構

Posted by 博客園·文頂頂 ~ 文頂頂的我的博客_花田半畝
聯繫做者簡書·文頂頂新浪微博·文頂頂
原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | 文頂頂

jQuery系列 第四章 jQuery框架的選擇器

第四章 jQuery框架的選擇器

4.1 jQuery選擇器說明

4.2 基本選擇器

4.4 篩選選擇器

4.4.1 基本篩選選擇器

4.4.2 內容篩選選擇器

4.4.3 屬性篩選選擇器

4.4.4 子元素篩選選擇器

4.4.5 可見性篩選選擇器

4.4.6 表單對象屬性篩選選擇器

4.4.5 可見性篩選選擇器

4.5 表單選擇器

附錄 jQuery選擇器知識結構

jQuery系列第四章 jQuery框架的選擇器