溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Jquery選擇器怎么使用”，在日常操作中，相信很多人在Jquery選擇器怎么使用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Jquery選擇器怎么使用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
選擇器：$("#id")
<div id="id">選中 </div>
選擇器：
$(".class")
<div class="class"> 選中</div>
選擇器：$("p")
<p>選中 </p>
選擇器：$("div p")
<div>
<p>選中</p>
<div>
<p>選中</p>
</div>
</div>
選擇器：$("div > p")
<div>
<p>選中</p>
<article>
<p>不會(huì)選中</p>
</article>
</div>
選擇器：$("div + p") 或者$("div").next("p")
<div>
</div>
<p>選中</p>
選擇器：$("div ~ p")或者$("div").nextAll("p")
<div>
</div>
<p>選中</p>
<p>選中</p>
選擇器：siblings("p")
<p>選中</p>
<p>選中</p>
<div>
</div>
<p>選中</p>
<p>選中</p>
選擇器：$("div:first")
<div>
選中
</div>
<div>
非選中
</div>
選擇器：$("div:last")
<div>
非選中
</div>
<div>
選中
</div>
選擇器：$("div:not(.is-active)")
<div class="is-active">
非選中
</div>
<div>
選中
</div>
選擇器：$("div:even")
<div>非選中</div>
<div>選中</div>
<div>非選中</div>
<div>選中</div>
選擇器：$("div:odd")
<div>選中</div>
<div>非選中</div>
<div>選中</div>
<div>非選中</div>
選擇器：$("div:eq(k)")
<div>第一個(gè)</div>
<div>第K個(gè)（選中）</div>
選擇器：$("div:gt(k)")
<div>第一個(gè)</div>
<div>第K個(gè)</div>
<div>第K+1個(gè)（選中）</div>
<div>第K+2個(gè)（選中）</div>
選擇器：$("div:lt(k)")
<div>第K-21個(gè)（選中）</div>
<div>第K-1個(gè)（選中）</div>
<div>第K個(gè)</div>
<div>第K+1個(gè)</div>
<h2>選中</h2>
<h3>選中</h3>
<h4>選中</h4>
<h5>選中</h5>
<h6>選中</h6>
<h7>選中</h7>
查找到h2-h7，并遍歷它們，打印出內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>查找標(biāo)題</title>
<script type="text/javascript" src="js/jquery-2.2.3.js" ></script>
<script>
$(function(){
//查找h2-h7
$(":header").each(function(){
$(this).click(function(event){
console.info(event.target.innerText);
console.log(event.currentTarget.innerHTML);
});
});
});
</script>
</head>
<body>
<h2>Hello H1</h2>
<h3>Hello H2</h3>
<h4>Hello H3</h4>
<h5>Hello H4</h5>
<h6>Hello H5</h6>
<h7>Hello H6</h7>
</body>
</html>選擇所有正在進(jìn)行動(dòng)畫(huà)的div標(biāo)簽:$("div:animated")
<div>text（選中）</div>
<div>xxx（非選中）</div>
選擇含“text”文字的div元素:$("div:contains(' text ')")
<!-- 選中 -->
<div></div>
選擇不含文字或者元素的div:$("div:empty")
<!-- 選中 -->
<div>111</div>
選擇含文字或者元素的div:$("div:parent")
<!-- 選中 -->
<div>
<p></p>
</div>
選擇含有某特性的div元素（與not相反）:$("div:has(p)")
<div style="display:none;">選中</div>
選擇所有隱藏的元素:$("div:hidden")
<div>選中</div>
選擇所有可見(jiàn)的元素:$("div:visible")
<div id="id">選中</div>
選擇含有id的div元素:$("div[id]")
<div title="test">選中</div>
選擇title是test的div:$("div[title=test]")
<div title="aaa">選中</div>
選擇title不是test的div：$("div[title!=test]")
<div title="test1">選中</div>
<div title="test2">選中</div>
選擇title屬性值以test開(kāi)頭的div：$("div[title^=test]")
<div title="Atest">選中</div>
<div title="Btest">選中</div>
選擇title元素以test結(jié)尾的div：$("div[title$=test]")
<div title="AtestB">選中</div>
<div title="Btest">選中</div>
選擇title元素中包含test的div:$("div[title*=test]")
<div title="test" id="id">選中</div>
<div title="test">非選中</div>
混合選擇屬性：$("div[id=id][title=test]")
批量選擇class是aaa的元素的所有第2個(gè)元素：$(".aaa:nth-child(2)")
批量選擇class是aaa的元素的所有偶數(shù)項(xiàng)元素：$(".aaa:nth-child(even)")
批量選擇class是aaa的元素的所有奇數(shù)項(xiàng)元素：$(".aaa:nth-child(odd)")
選擇選擇class是aaa的元素的0,3,6,9``元素:$(".aaa:nth-child(3n)")
選擇選擇class是aaa的元素的1,4,7,10``元素:$(".aaa:nth-child(3n+1)")
選擇所有ul的第一個(gè)li:$("ul li:first-child")
選擇所有ul的最后一個(gè)li:$("ul li:last-child")
選擇所有ul僅含一個(gè)li的子元素：$("ul li:only-child")
選擇所有可用的div元素：$("div:enabled")
選擇所有不可用的div：$("div:disabled")
選擇所有被選中的單選或復(fù)選框:$("input:checked")
選擇被選中的下拉列表：$("select:selected")
選擇所有的input：$(":input")
選擇所有的單行文本框:$(":text")
選擇所有密碼框:$(":password")
選擇所有的單選框:$(":radio")
選擇所有的多選框:$(":checkbox")
選擇所有的提交按鈕$(":submit")
選擇所有的圖像按鈕$(":image")
選擇所有的重置按鈕$(":reset")
選擇所有的按鈕:$(":button")
選擇所有的上傳域:$(":file")
選擇所有不可見(jiàn)的元素:$(":hidden")
補(bǔ)充
jQuery選擇器是jQuery庫(kù)的一大特色，用這些選擇器不但可以省去繁瑣的JavaScript 書(shū)寫(xiě)方式，還可以節(jié)省時(shí)間和效率，正是有這些jQuery選擇器，才讓我們更容易的操作JavaScript的dom。
·#id 根據(jù)給定的ID匹配一個(gè)元素。例如：$("#id")
·element 根據(jù)給定的元素名匹配所有元素。例如：$("div")
·.class 根據(jù)給定的類(lèi)匹配元素。例如：$(".style1");
·* 匹配所有元素。例如：$("*")
·selector1,selector2,selectorN 將每一個(gè)選擇器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")
·:button 匹配所有按鈕。例如：$(":button")
·:checkbox 匹配所有復(fù)選框。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":file")
·:hidden 匹配所有不可見(jiàn)元素，或者type為hidden的元素。例如：$("input:hidden")
·:image 匹配所有圖像域。例如：$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")
·:password 匹配所有密碼框。例如：$(":password")
·:radio 匹配所有單選按鈕。例如：$(":radio")
·:reset 匹配所有重置按鈕。例如：$(":reset")
·:submit 匹配所有提交按鈕。例如：$(":submit")
·:text 匹配所有的單行文本框。例如：$(":text")
·:header 匹配如 h2, h3, h4之類(lèi)的標(biāo)題元素。例如：$(":header").css("background", "#EEE");
·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如：$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性，但屬性不等于特定值的元素。例如：$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素。例如：$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個(gè)特定值的元素。例如：$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素。例如：$("div[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開(kāi)始的元素。例如：$("input[name^='man']")
·[selector1][selector2][selectorN] 同時(shí)滿足多個(gè)條件。例如：$("input[id][name$='man']")
·:hidden 匹配所有的不可見(jiàn)元素。例如：$("tr:hidden")
·:visible 匹配所有的可見(jiàn)元素。例如：$("tr:visible")
·:checked 匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)。例如：$("input:checked")
·:disabled 匹配所有不可用元素。例如：$("input:disabled")
·:enabled 匹配所有可用元素。例如：$("input:enabled")
·:selected 匹配所有選中的option元素。例如：$("select option:selected")
·:contains(text) 匹配包含給定文本的元素。例如：$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")
·ancestor descendant 在給定的祖先元素下匹配所有的后代元素。例如：$("form input")
·parent > child 在給定的父元素下匹配所有的子元素。例如：$("form > input")
·prev + next 匹配所有緊接在 prev 元素后的 next 元素。例如：$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")
·:first-child 匹配第一個(gè)子元素。例如：$("ul li:first-child")
·:last-child 匹配最后一個(gè)子元素。例如：$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個(gè)子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配。例如：$("ul li:only-child")
·:animated 匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素。例如：$("div:animated");
·:eq(index) 匹配一個(gè)給定索引值的元素。例如：$("tr:eq(1)")
·:even 匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)。例如：$("tr:even")
·:first 匹配找到的第一個(gè)元素。例如：$("tr:first")
·:gt(index) 匹配所有大于給定索引值的元素，從 0 開(kāi)始計(jì)數(shù)。例如：$("tr:gt(0)")
·:last 匹配找到的最后一個(gè)元素。例如：$("tr:last")
·:lt(index) 匹配所有小于給定索引值的元素。例如：$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如：$("input:not(:checked)")
·:odd 匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)。例如：$("tr:odd")
看下面這張表格：
| 選擇器 | 實(shí)例 | 選取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一個(gè) <p> 元素 |
| :last | $("p:last") | 最后一個(gè) <p> 元素 |
| :even | $("tr:even") | 所有偶數(shù) <tr> 元素 |
| :odd | $("tr:odd") | 所有奇數(shù) <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四個(gè)元素（index 從 0 開(kāi)始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不為空的 input 元素 |
| :header | $(":header") | 所有標(biāo)題元素 <h2> - <h7> |
| :animated | 所有動(dòng)畫(huà)元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 無(wú)子（元素）節(jié)點(diǎn)的所有元素 |
| :hidden | $("p:hidden") | 所有隱藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可見(jiàn)的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有帶有匹配選擇的元素 |
| [attribute] | $("[href]") | 所有帶有 href 屬性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 屬性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 屬性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 屬性的值包含以 ".jpg" 結(jié)尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被選取的 input 元素 |
| :checked | $(":checked") | 所有被選中的 input 元素 |
jQuery的選擇器可謂之強(qiáng)大無(wú)比，這里簡(jiǎn)單地總結(jié)一下常用的元素查找方法
$("#myELement") 選擇id值等于myElement的元素，id值不能重復(fù)在文檔中只能有一個(gè)id值是myElement所以得到的是唯一的元素
$("div") 選擇所有的div標(biāo)簽元素，返回div元素?cái)?shù)組
$(".myClass") 選擇使用myClass類(lèi)的css的所有元素
$("*") 選擇文檔中的所有的元素，可以運(yùn)用多種的選擇方式進(jìn)行聯(lián)合選擇：例如$("#myELement,div,.myclass")
層疊選擇器：
$("form input") 選擇所有的form元素中的input元素
$("#main > *") 選擇id值為main的所有的子元素
$("label + input") 選擇所有的label元素的下一個(gè)input元素節(jié)點(diǎn)，經(jīng)測(cè)試選擇器返回的是label標(biāo)簽后面直接跟一個(gè)input標(biāo)簽的所有input標(biāo)簽元素
$("#prev ~ div") 同胞選擇器，該選擇器返回的為id為prev的標(biāo)簽元素的所有的屬于同一個(gè)父元素的div標(biāo)簽
基本過(guò)濾選擇器：
$("tr:first") 選擇所有tr元素的第一個(gè)
$("tr:last") 選擇所有tr元素的最后一個(gè)
$("input:not(:checked) + span")
過(guò)濾掉：checked的選擇器的所有的input元素
$("tr:even") 選擇所有的tr元素的第0，2，4... ...個(gè)元素（注意：因?yàn)樗x擇的多個(gè)元素時(shí)為數(shù)組，所以序號(hào)是從0開(kāi)始）
$("tr:odd") 選擇所有的tr元素的第1，3，5... ...個(gè)元素
$("td:eq(2)") 選擇所有的td元素中序號(hào)為2的那個(gè)td元素
$("td:gt(4)") 選擇td元素中序號(hào)大于4的所有td元素
$("td:ll(4)") 選擇td元素中序號(hào)小于4的所有的td元素
$(":header")
$("div:animated")
內(nèi)容過(guò)濾選擇器：
$("div:contains('John')") 選擇所有div中含有John文本的元素
$("td:empty") 選擇所有的為空（也不包括文本節(jié)點(diǎn)）的td元素的數(shù)組
$("div:has(p)") 選擇所有含有p標(biāo)簽的div元素
$("td:parent") 選擇所有的以td為父節(jié)點(diǎn)的元素?cái)?shù)組
可視化過(guò)濾選擇器：
$("div:hidden") 選擇所有的被hidden的div元素
$("div:visible") 選擇所有的可視化的div元素
屬性過(guò)濾選擇器：
$("div[id]") 選擇所有含有id屬性的div元素
$("input[name='newsletter']") 選擇所有的name屬性等于'newsletter'的input元素
$("input[name!='newsletter']") 選擇所有的name屬性不等于'newsletter'的input元素
$("input[name^='news']") 選擇所有的name屬性以'news'開(kāi)頭的input元素
$("input[name$='news']") 選擇所有的name屬性以'news'結(jié)尾的input元素
$("input[name*='man']") 選擇所有的name屬性包含'news'的input元素
$("input[id][name$='man']") 可以使用多個(gè)屬性進(jìn)行聯(lián)合選擇，該選擇器是得到所有的含有id屬性并且那么屬性以man結(jié)尾的元素
子元素過(guò)濾選擇器：
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一個(gè)子節(jié)點(diǎn)的數(shù)組
$("div span:last-child") 返回所有的div元素的最后一個(gè)節(jié)點(diǎn)的數(shù)組
$("div button:only-child") 返回所有的div中只有唯一一個(gè)子節(jié)點(diǎn)的所有子節(jié)點(diǎn)的數(shù)組
表單元素選擇器：
$(":input") 選擇所有的表單輸入元素，包括input, textarea, select 和 button
$(":text") 選擇所有的text input元素
$(":password") 選擇所有的password input元素
$(":radio") 選擇所有的radio input元素
$(":checkbox") 選擇所有的checkbox input元素
$(":submit") 選擇所有的submit input元素
$(":image") 選擇所有的image input元素
$(":reset") 選擇所有的reset input元素
$(":button") 選擇所有的button input元素
$(":file") 選擇所有的file input元素
$(":hidden") 選擇所有類(lèi)型為hidden的input元素或表單的隱藏域
表單元素過(guò)濾選擇器：
$(":enabled") 選擇所有的可操作的表單元素
$(":disabled") 選擇所有的不可操作的表單元素
$(":checked") 選擇所有的被checked的表單元素
$("select option:selected") 選擇所有的select 的子元素中被selected的元素
選取一個(gè)name為”S_03_22″的input text框的上一個(gè)td的text值
$(”input[@name=S_03_22]“).parent().prev().text()
名字以”S_”開(kāi)始，并且不是以”_R”結(jié)尾的
$(”input[@name^='S_']“).not(”[@name$='_R']“)
一個(gè)名為radio_01的radio所選的值
$(”input[@name=radio_01][@checked]“).val();
$("A B") 查找A元素下面的所有子節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)
$("A>B") 查找A元素下面的直接子節(jié)點(diǎn)
$("A+B") 查找A元素后面的兄弟節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)
$("A~B") 查找A元素后面的兄弟節(jié)點(diǎn)，不包括非直接子節(jié)點(diǎn)
1. $("A B") 查找A元素下面的所有子節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)
例子：找到表單中所有的 input 元素
HTML 代碼:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代碼:
$("form input")
結(jié)果:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("A>B") 查找A元素下面的直接子節(jié)點(diǎn)
例子：匹配表單中所有的子級(jí)input元素。
HTML 代碼:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代碼:
$("form > input")
結(jié)果:
[ <input name="name" /> ]
3. $("A+B") 查找A元素后面的兄弟節(jié)點(diǎn)，包括非直接子節(jié)點(diǎn)
例子：匹配所有跟在 label 后面的 input 元素
HTML 代碼:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代碼:
$("label + input")
結(jié)果:
[ <input name="name" />, <input name="newsletter" /> ]
4. $("A~B") 查找A元素后面的兄弟節(jié)點(diǎn)，不包括非直接子節(jié)點(diǎn)
例子：找到所有與表單同輩的 input 元素
HTML 代碼:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代碼:
$("form ~ input")
結(jié)果:
[ <input name="none" /> ]
到此，關(guān)于“Jquery選擇器怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼