jQuery的選擇器 · jQuery框架

[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