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！