day17--JQuery選擇器
阿新 • • 發佈：2017-10-08
utf n! pro htm org 可見 contain tin bsp
操作HTML標簽的時候，我們首先要找到HTML標簽的位置，然後進行操作，下面來看看集中查找標簽的方法，如下：
1、Id選擇器 -- Id在HTML中是唯一的，通過Id進行查找，Id對應的是#號 id ==》#
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i10" class="c1"> <div> <a>caonima</a> </div> <a>alexsb</a> <a>您好</a> <a>ershazi</a> </div> <div class="c1"> <a>f</a> </div> <div class="c1"> <div class="c2"></div> </div> <script src="jquery-1.12.4.js"> </script> </body> </html>
上面HTML代碼，下面使用$("#i10")進行查找，查找Id="i10"的標簽，如下：
> obj = $(‘#i10‘) > [div#i10.c1, context: document, selector: "#i10"] <！-- 查詢到了id="i10"的<div>標簽，div標簽下面還有子標簽，通過一定查找，可以定位到子標簽-->> 0:div#i10.c1 <!-- 上面標簽裏面的內容 --> > context:document > length:1 > selector:"#i10" > __proto__:Object(0)
2、.c1選擇器 class選擇器，class選擇器對應的是. class ==》 .(點)
通過
> obj = $(‘.c1‘) > [div#i10.c1, context: document, selector: "#i10"] <!-- .c1找到的也是<div>標簽，內容一樣，因為<div>標簽裏面有id和class --> > 0:div#i10.c1 <!-- div標簽下面有子標簽，可以通過一定方法進行獲取 --> > context:document > length:1 > selector:"#i10" > __proto__:Object(0)
3、標簽選擇器，通過標簽本身進行選擇
選擇上面HTML中所有的<a>標簽，如下： > obj = $("a") <!-- 選擇HTML中所有的a標簽，可以看出，找到5個<a>標簽，所有的a標簽 --> > (5) [a, a, a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "a"]
> obj[4] <!-- 選擇上面標簽中的第5個a標簽 -->
> <a>f</a>
4、組合查詢 組合查詢使用的是逗號(,)，$(‘a,.c2,#i10)意思是找到所有<a>標簽，class=c2的標簽和id="i10"的標簽，如下：
> obj = $("a,.c2,#i10") <!-- 組合查詢，查詢所有<a>標簽，class="c2"標簽，id="i10"標簽，進行組合查詢 --> > (7) [div#i10.c1, a, a, a, a, a, div.c2, prevObject: jQuery.fn.init(1), context: document, selector: "a,.c2,#i10"]
5、層級查詢 找到某一個標簽下面的標簽，這個我比較喜歡，一層一層的進行查找，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i10" class="c1"> <div> <a>caonima</a> </div> <a>alexsb</a> <a>您好</a> <a>ershazi</a> </div> <div class="c1"> <a>f</a> </div> <div class="c1"> <div class="c2">找的就是你，你媽，層級選擇器</div> </div> <script src="jquery-1.12.4.js"> </script> </body> </html>
===============================================查找標簽class等於c1下面的標簽class等於c2的標簽===========================================
> obj = $(‘.c1 .c2‘) <!-- 查找標簽class等於c1下面的標簽class等於c2的標簽的所有標簽，子子孫孫 -->
> [div.c2, prevObject: jQuery.fn.init(1), context: document, selector: ".c1 .c2"]
> obj[0]
> <div class="c2">找的就是你，你媽，層級選擇器</div>
parent > child >符號代表只找子標簽，如下：
> obj = $("#i10 a") <!-- 查找id="i10"標簽下面所有的<a>標簽，包括子標簽和孫子標簽，所有的標簽--> > (4) [a, a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a"] > con = $("#i10>a") <!--查找標簽id="1o"下面的子標簽<a>，只查找子標簽看是否是<a>標簽 --> > (3) [a, a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10>a"]
“>”大於號代表只查找層級標簽下面的子標簽，" "空格代表查找子標簽下的所有滿足條件的標簽，子子孫孫。
6、篩選選擇器 比如：:first篩選滿足條件的第一個，如下:
> obj = $(‘#i10 a:first‘) <!-- 篩選滿足條件的第一個標簽--> > [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:first"]
> obj = $(‘#i10 a:odd‘) <!-- 篩選滿足條件的奇數標簽-->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:odd"]
> obj = $(‘#i10 a:even‘) <!-- 篩選滿足條件的偶數標簽 -->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:even"]
> obj = $(‘#i10 a:last‘) <!-- 篩選滿足條件標簽的最後一個標簽-->
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:last"]
> obj = $(‘#i10 a:eq(0)‘) <!-- 篩選滿足條件索引等於0的標簽 -->
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:eq(0)"]
> obj = $("#i10 a:gt(2)") <!-- 篩選滿足條件索引大於2的標簽 -->
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:gt(2)"]
> obj = $(‘#i10 a:lt(2)‘) <!-- 篩選滿足條件索引小於2的標簽 -->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "#i10 a:lt(2)"] 查找所有未選中的 input 元素 HTML 代碼: <input name="apple" /> <input name="flower" checked="checked" /> jQuery 代碼: $("input:not(:checked)")
結果：
[ <input name="apple" /> ]7、內容(text)選擇器
(1):contains(text) -- 查找標簽裏面值包含text的標簽
:contains(text) 概述 匹配包含給定文本的元素 參數 text String 一個用以查找的字符串 示例 描述: 查找所有包含 "John" 的 div 元素 HTML 代碼: <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn jQuery 代碼: $("div:contains(‘John‘)") 結果: [ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
(2):empty -- 查找標簽裏面內容包含空的標簽，經常用在表格中，比如查找空單元格的時候
:empty 概述 匹配所有不包含子元素或者文本的空元素 示例 描述: 查找所有不包含子元素或者文本的空元素 HTML 代碼: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> jQuery 代碼: $("td:empty") 結果: [ <td></td>, <td></td> ]
(3):has(selector) --判斷標簽存在 addClass給標簽添加class屬性
:has(selector) 概述 匹配含有選擇器所匹配的元素的元素 參數 selector Selector 一個用於篩選的選擇器 示例 描述: 給所有包含 p 元素的 div 元素添加一個 text 類 HTML 代碼: <div><p>Hello</p></div> <div>Hello again!</div> jQuery 代碼: $("div:has(p)").addClass("test"); <!-- 給含有<p>標簽的<div>標簽添加class="test"屬性，obj = $(‘div div:has(a)‘).addClass(‘test‘)--> 結果: [ <div class="test"><p>Hello</p></div> ]
(4):parent -- 查找標簽含有子內容的元素 即查找非空的標簽，裏面有內容或者嵌套其他標簽
:parent 概述 匹配含有子元素或者文本的元素 示例 描述: 查找所有含有子元素或者文本的 td 元素 HTML 代碼: <table> <tr><td>Value 1</td><td></td></tr> <tr><td>Value 2</td><td></td></tr> </table> jQuery 代碼: $("td:parent") 結果: [ <td>Value 1</td>, <td>Value 2</td> ]
8、可見的 :hidden :visible
（1）:hidden 匹配包含display:none的標簽
:hidden 概述 匹配所有不可見元素，或者type為hidden的元素 示例 描述: 查找隱藏的 tr 匹配type為hidden的元素 HTML 代碼: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代碼: $("tr:hidden") 結果： [ <tr style="display:none"><td>Value 1</td></tr> ]
(2):visable 可見的，display屬性不等於none
:visible 概述 匹配所有的可見元素 示例 描述: 查找所有可見的 tr 元素 HTML 代碼: <table> <tr style="display:none"><td>Value 1</td></tr> <tr><td>Value 2</td></tr> </table> jQuery 代碼: $("tr:visible") 結果: [ <tr><td>Value 2</td></tr> ]
9、屬性
[attribute]：查找標簽裏面具有某個屬性的標簽，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test{ font-size:50px; color:red; } </style> </head> <body> <div id="i10" class="c1"> <div> <a>caonima</a> </div> <a alex="123">alexsb</a> <a alex="456">您好</a> <a>ershazi</a> <a>屬性標簽，attribute</a> </div> <div class="c1"> <a>f</a> </div> <div class="c1"> <div class="c2">找的就是你，你媽，層級選擇器</div> </div> <script src="jquery-1.12.4.js"> </script> </body> </html>
進行如下查詢：
(1)、[attribute] 查詢標簽中屬性值是attribute的標簽
> obj = $(‘[alex]‘) <!-- 查找標簽中含有屬性值為"alex"的標簽，比如alex="sb"屬性值等於alex的標簽 -->
> (2) [a, a, prevObject: jQuery.fn.init(1), context: document, selector: "[alex]"]
(2)[attribute=value] 查詢標簽屬性值等於value的標簽
> obj = $(‘[alex="123"]‘) <!-- 查詢屬性等於alex且屬性值等於123的標簽
> [a, prevObject: jQuery.fn.init(1), context: document, selector: "[alex="123"]"
[attribute!=value] 屬性值不等於value的標簽
[attribute^=value] 屬性值不等於value的標簽
[attribute$=value] 屬性值以attribute結尾，且值等於value的標簽
[attribute*=value] 屬性值以attribute開頭，且值等於value的標簽
day17--JQuery選擇器