Jquery選擇器怎么使用

發布時間：2023-05-05 11:44:27 來源：億速云閱讀：243 作者：iii 欄目：開發技術

這篇文章主要介紹“Jquery選擇器怎么使用”，在日常操作中，相信很多人在Jquery選擇器怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Jquery選擇器怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

根據id名稱進行選擇：

選擇器：$("#id")

<div id="id">選中 </div>

根據類名進行選擇：

選擇器：

$(".class")
<div class="class"> 選中</div>

根據標簽進行選擇：

選擇器：$("p")

<p>選中 </p>

選擇div所有p后代：

選擇器：$("div p")

<div>
<p>選中</p>
<div>
<p>選中</p>
</div>
</div>

選擇選擇div單層直系后代元素：

選擇器：$("div > p")

<div>
<p>選中</p>
<article>
<p>不會選中</p>
</article>
</div>

選擇div后面緊挨的一個p元素：

選擇器：$("div + p") 或者$("div").next("p")

<div>
</div>
<p>選中</p>

選擇div后面的所有p元素：

選擇器：$("div ~ p")或者$("div").nextAll("p")

<div>
</div>
<p>選中</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>

選擇第k個元素：

選擇器：$("div:eq(k)")

<div>第一個</div>
<div>第K個（選中）</div>

選擇從第K個開始的所有元素：

選擇器：$("div:gt(k)")

<div>第一個</div>
<div>第K個</div>
<div>第K+1個（選中）</div>
<div>第K+2個（選中）</div>

選擇第1-K個元素

選擇器：$("div:lt(k)")

<div>第K-21個（選中）</div>
<div>第K-1個（選中）</div>
<div>第K個</div>
<div>第K+1個</div>
<h2>選中</h2>
<h3>選中</h3>
<h4>選中</h4>
<h5>選中</h5>
<h6>選中</h6>
<h7>選中</h7>

選擇所有標題標簽：$(":header")

查找到h2-h7，并遍歷它們，打印出內容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>查找標題</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>

選擇所有正在進行動畫的div標簽:$("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>

選擇所有可見的元素:$("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開頭的div：$("div[title^=test]")

<div title="Atest">選中</div>
<div title="Btest">選中</div>

選擇title元素以test結尾的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個元素：$(".aaa:nth-child(2)")

批量選擇class是aaa的元素的所有偶數項元素：$(".aaa:nth-child(even)")

批量選擇class是aaa的元素的所有奇數項元素：$(".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的第一個li:$("ul li:first-child")

選擇所有ul的最后一個li:$("ul li:last-child")

選擇所有ul僅含一個li的子元素：$("ul li:only-child")

表單對象屬性過濾

選擇所有可用的div元素：$("div:enabled")

選擇所有不可用的div：$("div:disabled")

選擇所有被選中的單選或復選框:$("input:checked")

選擇被選中的下拉列表：$("select:selected")

表單選擇器

選擇所有的input：$(":input")

選擇所有的單行文本框:$(":text")

選擇所有密碼框:$(":password")

選擇所有的單選框:$(":radio")

選擇所有的多選框:$(":checkbox")

選擇所有的提交按鈕$(":submit")

選擇所有的圖像按鈕$(":image")

選擇所有的重置按鈕$(":reset")

選擇所有的按鈕:$(":button")

選擇所有的上傳域:$(":file")

選擇所有不可見的元素:$(":hidden")

補充

jQuery選擇器是jQuery庫的一大特色，用這些選擇器不但可以省去繁瑣的JavaScript 書寫方式，還可以節省時間和效率，正是有這些jQuery選擇器，才讓我們更容易的操作JavaScript的dom。

一般選擇器

1).基本選擇器

·#id 根據給定的ID匹配一個元素。例如：$("#id")
·element 根據給定的元素名匹配所有元素。例如：$("div")
·.class 根據給定的類匹配元素。例如：$(".style1");
·* 匹配所有元素。例如：$("*")
·selector1,selector2,selectorN 將每一個選擇器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")

2).表單選擇器

·:button 匹配所有按鈕。例如：$(":button")
·:checkbox 匹配所有復選框。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":file")
·:hidden 匹配所有不可見元素，或者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之類的標題元素。例如：$(":header").css("background", "#EEE");

2.篩選條件選擇器

1).jQuery屬性選擇器

·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如：$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性，但屬性不等于特定值的元素。例如：$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結尾的元素。例如：$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如：$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素。例如：$("div[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如：$("input[name^='man']")
·[selector1][selector2][selectorN] 同時滿足多個條件。例如：$("input[id][name$='man']")
·:hidden 匹配所有的不可見元素。例如：$("tr:hidden")
·:visible 匹配所有的可見元素。例如：$("tr:visible")
·:checked 匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option)。例如：$("input:checked")
·:disabled 匹配所有不可用元素。例如：$("input:disabled")
·:enabled 匹配所有可用元素。例如：$("input:enabled")
·:selected 匹配所有選中的option元素。例如：$("select option:selected")

2).jQuery內容選擇器

·:contains(text) 匹配包含給定文本的元素。例如：$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")

3).jQuery層級選擇器

·ancestor descendant 在給定的祖先元素下匹配所有的后代元素。例如：$("form input")
·parent > child 在給定的父元素下匹配所有的子元素。例如：$("form > input")
·prev + next 匹配所有緊接在 prev 元素后的 next 元素。例如：$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")
·:first-child 匹配第一個子元素。例如：$("ul li:first-child")
·:last-child 匹配最后一個子元素。例如：$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素。例如：$("ul li:nth-child(2)")
·:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配。例如：$("ul li:only-child")

4).jQuery方法選擇器

·:animated 匹配所有正在執行動畫效果的元素。例如：$("div:animated");
·:eq(index) 匹配一個給定索引值的元素。例如：$("tr:eq(1)")
·:even 匹配所有索引值為偶數的元素，從 0 開始計數。例如：$("tr:even")
·:first 匹配找到的第一個元素。例如：$("tr:first")
·:gt(index) 匹配所有大于給定索引值的元素，從 0 開始計數。例如：$("tr:gt(0)")
·:last 匹配找到的最后一個元素。例如：$("tr:last")
·:lt(index) 匹配所有小于給定索引值的元素。例如：$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如：$("input:not(:checked)")
·:odd 匹配所有索引值為奇數的元素，從 0 開始計數。例如：$("tr:odd")

看下面這張表格：

選擇器	實例	選取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一個 <p> 元素
:last	$("p:last")	最后一個 <p> 元素
:even	$("tr:even")	所有偶數 <tr> 元素
:odd	$("tr:odd")	所有奇數 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四個元素（index 從 0 開始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不為空的 input 元素

:header	$(":header")	所有標題元素 <h2> - <h7>
:animated		所有動畫元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	無子（元素）節點的所有元素
:hidden	$("p:hidden")	所有隱藏的 <p> 元素
:visible	$("table:visible")	所有可見的表格

s1,s2,s3	$("th,td,.intro")	所有帶有匹配選擇的元素

[attribute]	$("[href]")	所有帶有 href 屬性的元素
[attribute=value]	$("[href='#']")	所有 href 屬性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 屬性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 屬性的值包含以 ".jpg" 結尾的元素

: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的選擇器可謂之強大無比，這里簡單地總結一下常用的元素查找方法

$("#myELement") 選擇id值等于myElement的元素，id值不能重復在文檔中只能有一個id值是myElement所以得到的是唯一的元素
$("div") 選擇所有的div標簽元素，返回div元素數組
$(".myClass") 選擇使用myClass類的css的所有元素
$("*") 選擇文檔中的所有的元素，可以運用多種的選擇方式進行聯合選擇：例如$("#myELement,div,.myclass")

層疊選擇器：
$("form input") 選擇所有的form元素中的input元素
$("#main > *") 選擇id值為main的所有的子元素
$("label + input") 選擇所有的label元素的下一個input元素節點，經測試選擇器返回的是label標簽后面直接跟一個input標簽的所有input標簽元素
$("#prev ~ div") 同胞選擇器，該選擇器返回的為id為prev的標簽元素的所有的屬于同一個父元素的div標簽

基本過濾選擇器：
$("tr:first") 選擇所有tr元素的第一個
$("tr:last") 選擇所有tr元素的最后一個
$("input:not(:checked) + span")

過濾掉：checked的選擇器的所有的input元素

$("tr:even") 選擇所有的tr元素的第0，2，4... ...個元素（注意：因為所選擇的多個元素時為數組，所以序號是從0開始）

$("tr:odd") 選擇所有的tr元素的第1，3，5... ...個元素
$("td:eq(2)") 選擇所有的td元素中序號為2的那個td元素
$("td:gt(4)") 選擇td元素中序號大于4的所有td元素
$("td:ll(4)") 選擇td元素中序號小于4的所有的td元素
$(":header")
$("div:animated")
內容過濾選擇器：

$("div:contains('John')") 選擇所有div中含有John文本的元素
$("td:empty") 選擇所有的為空（也不包括文本節點）的td元素的數組
$("div:has(p)") 選擇所有含有p標簽的div元素
$("td:parent") 選擇所有的以td為父節點的元素數組
可視化過濾選擇器：

$("div:hidden") 選擇所有的被hidden的div元素
$("div:visible") 選擇所有的可視化的div元素
屬性過濾選擇器：

$("div[id]") 選擇所有含有id屬性的div元素
$("input[name='newsletter']") 選擇所有的name屬性等于'newsletter'的input元素

$("input[name!='newsletter']") 選擇所有的name屬性不等于'newsletter'的input元素

$("input[name^='news']") 選擇所有的name屬性以'news'開頭的input元素
$("input[name$='news']") 選擇所有的name屬性以'news'結尾的input元素
$("input[name*='man']") 選擇所有的name屬性包含'news'的input元素

$("input[id][name$='man']") 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性并且那么屬性以man結尾的元素

子元素過濾選擇器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回所有的div元素的第一個子節點的數組
$("div span:last-child") 返回所有的div元素的最后一個節點的數組
$("div button:only-child") 返回所有的div中只有唯一一個子節點的所有子節點的數組

表單元素選擇器：

$(":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") 選擇所有類型為hidden的input元素或表單的隱藏域

表單元素過濾選擇器：

$(":enabled") 選擇所有的可操作的表單元素
$(":disabled") 選擇所有的不可操作的表單元素
$(":checked") 選擇所有的被checked的表單元素
$("select option:selected") 選擇所有的select 的子元素中被selected的元素

選取一個name為”S_03_22″的input text框的上一個td的text值
$(”input[@name=S_03_22]“).parent().prev().text()

名字以”S_”開始，并且不是以”_R”結尾的
$(”input[@name^='S_']“).not(”[@name$='_R']“)

一個名為radio_01的radio所選的值

$(”input[@name=radio_01][@checked]“).val();

$("A B") 查找A元素下面的所有子節點，包括非直接子節點
$("A>B") 查找A元素下面的直接子節點
$("A+B") 查找A元素后面的兄弟節點，包括非直接子節點
$("A~B") 查找A元素后面的兄弟節點，不包括非直接子節點

1. $("A B") 查找A元素下面的所有子節點，包括非直接子節點

例子：找到表單中所有的 input 元素

HTML 代碼:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form input")

結果:

[ <input name="name" />, <input name="newsletter" /> ]

2. $("A>B") 查找A元素下面的直接子節點
例子：匹配表單中所有的子級input元素。

HTML 代碼:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form > input")
結果:

[ <input name="name" /> ]

3. $("A+B") 查找A元素后面的兄弟節點，包括非直接子節點
例子：匹配所有跟在 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")

結果:

[ <input name="name" />, <input name="newsletter" /> ]

4. $("A~B") 查找A元素后面的兄弟節點，不包括非直接子節點
例子：找到所有與表單同輩的 input 元素

HTML 代碼:

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />

jQuery 代碼:

$("form ~ input")
結果:

[ <input name="none" /> ]

到此，關于“Jquery選擇器怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

Jquery選擇器怎么使用

根據id名稱進行選擇：

根據類名進行選擇：

根據標簽進行選擇：

選擇div所有p后代：

選擇選擇div單層直系后代元素：

選擇div后面緊挨的一個p元素：

選擇div后面的所有p元素：

選擇兄弟姐妹級別的所有p元素：

選擇第一個滿足條件的元素：

選擇最后一個滿足條件的元素:

反向選擇條件

選擇次序是偶數的元素：

選擇索引是奇數的元素：

選擇第k個元素：

選擇從第K個開始的所有元素：

選擇第1-K個元素

選擇所有標題標簽：$(":header")

內容過濾

可見性過濾

屬性過濾

子元素過濾

表單對象屬性過濾

表單選擇器

一般選擇器

1).基本選擇器

2).表單選擇器

2.篩選條件選擇器

1).jQuery屬性選擇器

2).jQuery內容選擇器

3).jQuery層級選擇器

4).jQuery方法選擇器

選擇器大全

猜你喜歡

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

Jquery選擇器怎么使用

根據id名稱進行選擇：

根據類名進行選擇：

根據標簽進行選擇：

選擇div所有p后代：

選擇選擇div單層直系后代元素：

選擇div后面緊挨的一個p元素：

選擇div后面的所有p元素：

選擇兄弟姐妹級別的所有p元素：

選擇第一個滿足條件的元素：

選擇最后一個滿足條件的元素:

反向選擇條件

選擇次序是偶數的元素：

選擇索引是奇數的元素：

選擇第k個元素：

選擇從第K個開始的所有元素：

選擇第1-K個元素

選擇所有標題標簽：$(":header")

內容過濾

可見性過濾

屬性過濾

子元素過濾

表單對象屬性過濾

表單選擇器

一般選擇器

1).基本選擇器

2).表單選擇器

2.篩選條件選擇器

1).jQuery屬性選擇器

2).jQuery內容選擇器

3).jQuery層級選擇器

4).jQuery方法選擇器

選擇器大全

猜你喜歡

最新資訊

相關推薦

相關標簽