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>

<h1>選中</h1>

<h2>選中</h2>

<h3>選中</h3>

<h4>選中</h4>

<h5>選中</h5>

<h6>選中</h6>

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

 查找到h1-h6,並遍歷它們,打印出內容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>查找標題</title>
		<script type="text/javascript" src="js/jquery-2.2.3.js" ></script>
		<script>
			$(function(){
				//查找h1-h6
				$(":header").each(function(){
					$(this).click(function(event){
						console.info(event.target.innerText);
						console.log(event.currentTarget.innerHTML);
					});
				});
			});
		</script>
	</head>
	<body>
		<h1>Hello H1</h1>
		<h2>Hello H2</h2>
		<h3>Hello H3</h3>
		<h4>Hello H4</h4>
		<h5>Hello H5</h5>
		<h6>Hello H6</h6>
	</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 匹配如 h1, h2, h3之類的標題元素。例如:$(":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") 所有標題元素 <h1> – <h6>
: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選擇器簡明版 Jquery選擇器實用版的文章就介紹到這瞭,更多相關Jquery選擇器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: