基本選擇器
層級選擇器
屬性選擇器
過濾選擇器
表單過濾選擇器
1. 基本選擇器
? ? ?? ? ? ?1. 標簽選擇器（元素選擇器）
?? ??? ??? ??? ?* 語法： $("html標簽名") 獲得所有匹配標簽名稱的元素
?? ??? ??? ?2. id選擇器?
?? ??? ??? ??? ?* 語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素
?? ??? ??? ?3. 類選擇器
?? ??? ??? ??? ?* 語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
?? ??? ??? ?4. 并集選擇器
?? ??? ??? ??? ?* 語法： $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>基本選擇器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function () {// <input type="button" value="改變 id 為 one 的元素的背景色為 紅色" id="b1"/>$("#b1").click(function () {$("#one").css("backgroundColor","pink");});// <input type="button" value=" 改變元素名為 <div> 的所有元素的背景色為 紅色" id="b2"/>$("#b2").click(function () {$("div").css("backgroundColor","pink");});// <input type="button" value=" 改變 class 為 mini 的所有元素的背景色為 紅色" id="b3"/>$("#b3").click(function () {$(".mini").css("backgroundColor","pink");});// <input type="button" value=" 改變所有的<span>元素和 id 為 two 的元素的背景色為紅色" id="b4"/>$("#b4").click(function () {$("span,#two").css("backgroundColor","pink");});});</script></head><body><input type="button" value="保存" class="mini" name="ok" class="mini" /><input type="button" value="改變 id 為 one 的元素的背景色為 粉紅色" id="b1"/><input type="button" value=" 改變元素名為 <div> 的所有元素的背景色為 粉紅色" id="b2"/><input type="button" value=" 改變 class 為 mini 的所有元素的背景色為 粉紅色" id="b3"/><input type="button" value=" 改變所有的<span>元素和 id 為 two 的元素的背景色為粉紅色" id="b4"/><h1>有一種奇跡叫堅持</h1><h2>自信源于努力</h2><div id="one">id為one </div><div id="two" class="mini" >id為two class是 mini <div class="mini" >class是 mini</div></div><div class="one" >class是 one <div class="mini" >class是 mini</div><div class="mini" >class是 mini</div></div><div class="one" >class是 one <div class="mini01" >class是 mini01</div><div class="mini" >class是 mini</div></div><span class="spanone">class為spanone的span元素</span><span class="mini">class為mini的span元素</span><input type="text" value="zhang" id="username" name="username"></body>
</html>
?? ???
?2. 層級選擇器
? ? ? ? ? ?1. 后代選擇器
?? ??? ??? ??? ?* 語法： $("A B") 選擇A元素內部的所有B元素?? ??? ?
?? ??? ??? ?2. 子選擇器
?? ??? ??? ??? ?* 語法： $("A > B") 選擇A元素內部的所有B子元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>層次選擇器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 改變 <body> 內所有 <div> 的背景色為紅色" id="b1"/>$("#b1").click(function () {$("body div").css("backgroundColor","pink");});// <input type="button" value=" 改變 <body> 內子 <div> 的背景色為 紅色" id="b2"/>$("#b2").click(function () {$("body > div").css("backgroundColor","pink");});});</script></head><body><input type="button" value="保存" class="mini" name="ok" class="mini" /><input type="button" value=" 改變 <body> 內所有 <div> 的背景色為紅色" id="b1"/><input type="button" value=" 改變 <body> 內子 <div> 的背景色為 紅色" id="b2"/><h1>有一種奇跡叫堅持</h1><h2>自信源于努力</h2><div id="one">id為one </div><div id="two" class="mini" >id為two class是 mini <div class="mini" >class是 mini</div></div><div class="one" >class是 one <div class="mini" >class是 mini</div><div class="mini" >class是 mini</div></div><div class="one">class是 one <div class="mini01" >class是 mini01</div><div class="mini" >class是 mini</div></div><span class="spanone"> span</span></body></html>
?? ??
屬性選擇器
? ? ? ? ? ? 1. 屬性名稱選擇器?
?? ??? ??? ??? ?* 語法： $("A[屬性名]") 包含指定屬性的選擇器
?? ??? ??? ?2. 屬性選擇器
?? ??? ??? ??? ?* 語法： $("A[屬性名='值']") 包含指定屬性等于指定值的選擇器
?? ??? ??? ?3. 復合屬性選擇器
?? ??? ??? ??? ?* 語法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>屬性過濾選擇器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 含有屬性title 的div元素背景色為紅色" id="b1"/>$("#b1").click(function () {$("div[title]").css("backgroundColor","pink");});// <input type="button" value=" 屬性title值等于test的div元素背景色為紅色" id="b2"/>$("#b2").click(function () {$("div[title='test']").css("backgroundColor","pink");});// <input type="button" value=" 屬性title值不等于test的div元素(沒有屬性title的也將被選中)背景色為紅色" id="b3"/>$("#b3").click(function () {$("div[title!='test']").css("backgroundColor","pink");});// <input type="button" value=" 屬性title值 以te開始 的div元素背景色為紅色" id="b4"/>$("#b4").click(function () {$("div[title^='te']").css("backgroundColor","pink");});// <input type="button" value=" 屬性title值 以est結束 的div元素背景色為紅色" id="b5"/>$("#b5").click(function () {$("div[title$='est']").css("backgroundColor","pink");});// <input type="button" value="屬性title值 含有es的div元素背景色為紅色" id="b6"/>$("#b6").click(function () {$("div[title*='es']").css("backgroundColor","pink");});// <input type="button" value="選取有屬性id的div元素，然后在結果中選取屬性title值含有“es”的 div 元素背景色為紅色" id="b7"/>$("#b7").click(function () {$("div[id][title*='es']").css("backgroundColor","pink");});});</script></head><body><input type="button" value="保存" class="mini" name="ok" class="mini" /><input type="button" value=" 含有屬性title 的div元素背景色為紅色" id="b1"/><input type="button" value=" 屬性title值等于test的div元素背景色為紅色" id="b2"/><input type="button" value=" 屬性title值不等于test的div元素(沒有屬性title的也將被選中)背景色為紅色" id="b3"/><input type="button" value=" 屬性title值 以te開始 的div元素背景色為紅色" id="b4"/><input type="button" value=" 屬性title值 以est結束 的div元素背景色為紅色" id="b5"/><input type="button" value="屬性title值 含有es的div元素背景色為紅色" id="b6"/><input type="button" value="選取有屬性id的div元素，然后在結果中選取屬性title值含有“es”的 div 元素背景色為紅色" id="b7"/><div id="one">id為one div </div><div id="two" class="mini" title="test">id為two class是 mini div title="test"<div class="mini" >class是 mini</div></div><div class="visible" >class是 one <div class="mini" >class是 mini</div><div class="mini" >class是 mini</div></div><div class="one" title="test02">class是 one title="test02"<div class="mini01" >class是 mini01</div><div class="mini" style="margin-top:0px;">class是 mini</div></div><div class="visible" >這是隱藏的</div><div class="one"></div><div id="mover" >動畫</div><input type="text" value="zhang" id="username" name="username"></body></html>
?
?過濾選擇器
? ? ? ? ? ? 1. 首元素選擇器?
?? ??? ??? ??? ?* 語法： :first 獲得選擇的元素中的第一個元素
?? ??? ??? ?2. 尾元素選擇器?
?? ??? ??? ??? ?* 語法： :last 獲得選擇的元素中的最后一個元素
?? ??? ??? ?3. 非元素選擇器
?? ??? ??? ??? ?* 語法： :not(selector) 不包括指定內容的元素
?? ??? ??? ?4. 偶數選擇器
?? ??? ??? ??? ?* 語法： :even 偶數，從 0 開始計數
?? ??? ??? ?5. 奇數選擇器
?? ??? ??? ??? ?* 語法： :odd 奇數，從 0 開始計數
?? ??? ??? ?6. 等于索引選擇器
?? ??? ??? ??? ?* 語法： :eq(index) 指定索引元素
?? ??? ??? ?7. 大于索引選擇器?
?? ??? ??? ??? ?* 語法： :gt(index) 大于指定索引元素
?? ??? ??? ?8. 小于索引選擇器?
?? ??? ??? ??? ?* 語法： :lt(index) 小于指定索引元素
?? ??? ??? ?9. 標題選擇器
?? ??? ??? ??? ?* 語法： :header 獲得標題（h1~h6）元素，固定寫法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>基本過濾選擇器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 改變第一個 div 元素的背景色為 紅色" id="b1"/>$("#b1").click(function () {$("div:first").css("backgroundColor","pink");});// <input type="button" value=" 改變最后一個 div 元素的背景色為 紅色" id="b2"/>$("#b2").click(function () {$("div:last").css("backgroundColor","pink");});// <input type="button" value=" 改變class不為 one 的所有 div 元素的背景色為 紅色" id="b3"/>$("#b3").click(function () {$("div:not(.one)").css("backgroundColor","pink");});// <input type="button" value=" 改變索引值為偶數的 div 元素的背景色為 紅色" id="b4"/>$("#b4").click(function () {$("div:even").css("backgroundColor","pink");});// <input type="button" value=" 改變索引值為奇數的 div 元素的背景色為 紅色" id="b5"/>$("#b5").click(function () {$("div:odd").css("backgroundColor","pink");});// <input type="button" value=" 改變索引值為大于 3 的 div 元素的背景色為 紅色" id="b6"/>$("#b6").click(function () {$("div:gt(3)").css("backgroundColor","pink");});// <input type="button" value=" 改變索引值為等于 3 的 div 元素的背景色為 紅色" id="b7"/>$("#b7").click(function () {$("div:eq(3)").css("backgroundColor","pink");});// <input type="button" value=" 改變索引值為小于 3 的 div 元素的背景色為 紅色" id="b8"/>$("#b8").click(function () {$("div:lt(3)").css("backgroundColor","pink");});// <input type="button" value=" 改變所有的標題元素的背景色為 紅色" id="b9"/>$("#b9").click(function () {$(":header").css("backgroundColor","pink");});});</script></head><body><input type="button" value="保存" class="mini" name="ok" class="mini" /><input type="button" value=" 改變第一個 div 元素的背景色為 紅色" id="b1"/><input type="button" value=" 改變最后一個 div 元素的背景色為 紅色" id="b2"/><input type="button" value=" 改變class不為 one 的所有 div 元素的背景色為 紅色" id="b3"/><input type="button" value=" 改變索引值為偶數的 div 元素的背景色為 紅色" id="b4"/><input type="button" value=" 改變索引值為奇數的 div 元素的背景色為 紅色" id="b5"/><input type="button" value=" 改變索引值為大于 3 的 div 元素的背景色為 紅色" id="b6"/><input type="button" value=" 改變索引值為等于 3 的 div 元素的背景色為 紅色" id="b7"/><input type="button" value=" 改變索引值為小于 3 的 div 元素的背景色為 紅色" id="b8"/><input type="button" value=" 改變所有的標題元素的背景色為 紅色" id="b9"/><h1>有一種奇跡叫堅持</h1><h2>自信源于努力</h2><div id="one">id為one </div><div id="two" class="mini" >id為two class是 mini <div class="mini" >class是 mini</div></div><div class="one" >class是 one <div class="mini" >class是 mini</div><div class="mini" >class是 mini</div></div><div class="one" >class是 one <div class="mini01" >class是 mini01</div><div class="mini" >class是 mini</div></div></body></html>
??
表單過濾選擇器
? ? ? ? ? ?1. 可用元素選擇器?
?? ??? ??? ??? ?* 語法： :enabled 獲得可用元素
?? ??? ??? ?2. 不可用元素選擇器?
?? ??? ??? ??? ?* 語法： :disabled 獲得不可用元素
?? ??? ??? ?3. 選中選擇器?
?? ??? ??? ??? ?* 語法： :checked 獲得單選/復選框選中的元素
?? ??? ??? ?4. 選中選擇器?
?? ??? ??? ??? ?* 語法： :selected 獲得下拉框選中的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>表單屬性過濾選擇器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}#job{margin: 20px;}#edu{margin-top:-70px;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/>$("#b1").click(function () {$("input[type='text']:enabled").val("aaa");});// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/>$("#b2").click(function () {$("input[type='text']:disabled").val("aaa");});// <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取復選框選中的個數" id="b3"/>$("#b3").click(function () {alert($("input[type='checkbox']:checked").length);});// <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數" id="b4"/>$("#b4").click(function () {alert($("#job > option:selected").length);});});</script></head><body><input type="button" value="保存" class="mini" name="ok" class="mini" /><input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/><input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/><input type="button" value=" 利用 jQuery 對象的 length 屬性獲取復選框選中的個數" id="b3"/><input type="button" value=" 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數" id="b4"/><br><br><input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" ><input type="text" value="不可用值2" disabled="disabled"><input type="text" value="可用值2" ><br><br><input type="checkbox" name="items" value="美容" >美容<input type="checkbox" name="items" value="IT" >IT<input type="checkbox" name="items" value="金融" >金融<input type="checkbox" name="items" value="管理" >管理<br><br><input type="radio" name="sex" value="男" >男<input type="radio" name="sex" value="女" >女<br><br><select name="job" id="job" multiple="multiple" size=4><option>程序員</option><option>中級程序員</option><option>高級程序員</option><option>系統分析師</option></select><select name="edu" id="edu"><option>本科</option><option>博士</option><option>碩士</option><option>大專</option></select><br/><div id="two" class="mini" >id為two class是 mini div<div class="mini" >class是 mini</div></div><div class="one" >class是 one <div class="mini" >class是 mini</div><div class="mini" >class是 mini</div></div><div class="one" >class是 one <div class="mini01" >class是 mini01</div><div class="mini" >class是 mini</div></div></body></html>
總結
以上是生活随笔為你收集整理的jq选择器||基本选择器 层级选择器 属性选择器 过滤选择器 表单过滤选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
