目錄
一.DOM和jquery的轉換
1.jquery對象
2.jquery 對象轉成 DOM 對象
3.DOM對象轉成jquery對象
二、jquery選擇器
1.基本選擇器
2.層次選擇器
3.過濾選擇器
（1）基本過濾選擇器
（2）內容過濾選擇器
（3）可見性過濾選擇器
（4）屬性過濾選擇器
（5）子元素過濾選擇器
?（6）表單對象屬性過濾選擇器
4.表單選擇器
5.練習
一.DOM和jquery的轉換
1.jquery對象
jQuery 對象就是通過 jQuery($()) 包裝 DOM 對象后產生的對象
jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 對象無法使用 DOM 對象的任何方法, 同樣 DOM 對象也不能使用 jQuery 里的任何方法
約定：如果獲取的是 jQuery 對象, 那么要在變量前面加上 $
2.jquery 對象轉成 DOM 對象
（1）jQuery 對象是一個數組對象, 可以通過 [index] 的方法得到對應的 DOM對象
var $cr=${#cr};
var cr=$cr[0];
（2）使用 jQuery 中的 get(index) 方法得到相應的 DOM 對象
var $cr=${#cr};
var cr=$cr.get[0];
3.DOM對象轉成jquery對象
var cr=document.getElementById("cr");
var $cr=${cr};
二、jquery選擇器
1.基本選擇器
基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標簽名來查找 DOM 元素(在網頁中 id 只能使用一次, class 允許重復使用)。
選擇器描述返回 #id 根據給定的id匹配一個元素 單個元素組成的集合 .class 根據給定的類名匹配元素 集合元素 element 根據給定的元素名匹配元素 集合元素 * 匹配所有元素 集合元素 selector1,selector2...selectorN 將每一個選擇器匹配到的元素合并返回 集合元素
<input type="button" value="選擇 id 為 one 的元素" id="btn1"/>
<input type="button" value="選擇 class 為 mini 的所有元素" id="btn2"/>
<input type="button" value="選擇 元素名是 div 的所有元素" id="btn3"/>
<input type="button" value="選擇 所有的元素" id="btn4"/>
<input type="button" value="選擇 所有的 span 元素和id為two的元素" id="btn5"/>
?<!-- 導入 jQuery 庫 --><script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">
?$(function () {$("#btn1").click(function () {$("#one").css("background", "#ffbbaa");});$("#btn2").click(function () {$(".mini").css("background", "#aabbcc");});$("#btn3").click(function () {$("div").css("background", "#bbcc00");});$("#btn4").click(function () {$("*").css("background", "#124124");});$("#btn5").click(function () {$("span,#two").css("background", "#795141");});});</script>
2.層次選擇器
如果想通過 DOM 元素之間的層次關系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器
選擇器描述返回 ancestor descendant 選取ancestor的所有descendant(后代)元素 集合元素 parent > child 選取parent元素下的child元素 集合元素 prev + next 選取prev元素后的下一個next元素 集合元素 prev ~ siblings 選取prev元素后的所有siblings元素 集合元素
<input type="button" value="選擇 body 內的所有 div 元素" id="btn1" /><input type="button" value="在 body 內, 選擇子元素是 div 的." id="btn2" /><input type="button" value="選擇 id 為 one 的下一個 div 元素" id="btn3" /><input type="button" value="選擇 id 為 two 的元素后面的所有 div 兄弟元素" id="btn4" /><input type="button" value="選擇 id 為 two 的元素所有 div 兄弟元素" id="btn5" /><input type="button" value="選擇 id 為 one 的下一個 span 元素" id="btn6" /><input type="button" value="選擇 id 為 two 的元素前邊的所有的 div 兄弟元素" id="btn7" />
?<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("body div").css("background","#214421");});$("#btn2").click(function(){$("body>div").css("background","#30a6ff");});$("#btn3").click(function(){$("#one").next("div").css("background","#ff7d90");});$("#btn4").click(function(){$("#two~div").css("background","#ff34d0");});$("#btn5").click(function(){$("#two").siblings("div").css("background","#5dff16");});$("#btn6").click(function(){$("#one").nextAll("span:first").css("background","#ff0d20");});$("#btn7").click(function(){$("#two").prevAll("div").css("background","#320a10");});});</script>
3.過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以 “:” 開頭
按照不同的過濾規則, 過濾選擇器可以分為基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器
（1）基本過濾選擇器
選擇器描述返回 :first 選取第一個元素 單個元素組成的集合 :last 選取最后一個元素 集合元素 :not(selector) 取出所有與給點選擇器匹配的元素 集合元素 :even 選取索引是偶數的所有元素 集合元素 :odd 選取索引是奇數的所有元素 集合元素 :eq(index) 選取索引等于于index的所有元素 集合元素 :gt(index) 選取索引大于index的所有元素 集合元素 :lt(index) 選取索引小于index的所有元素 集合元素 :header 選取所有的標題元素，如h1,h2 集合元素 :animated 選取當前正在執行動畫的所有元素 集合元素
<input type="button" value="選擇第一個 div 元素" id="btn1"/>
<input type="button" value="選擇最后一個 div 元素" id="btn2"/>
<input type="button" value="選擇class不為 one 的所有 div 元素" id="btn3"/>
?
<input type="button" value="選擇索引值為偶數的 div 元素" id="btn4"/>
<input type="button" value="選擇索引值為奇數的 div 元素" id="btn5"/>
<input type="button" value="選擇索引值為大于 3 的 div 元素" id="btn6"/>
?
<input type="button" value="選擇索引值為等于 3 的 div 元素" id="btn7"/>
<input type="button" value="選擇索引值為小于 3 的 div 元素" id="btn8"/>
<input type="button" value="選擇所有的標題元素" id="btn9"/>
?
<input type="button" value="選擇當前正在執行動畫的所有元素" id="btn10"/>
<input type="button" value="選擇 id 為 two 的下一個 span 元素" id="btn11"/>
?<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("div:first").css("background","#1178d6");});$("#btn2").click(function(){$("div:last").css("background","#1178d6");});$("#btn3").click(function(){$("div:not(.one)").css("background","#1178d6");});$("#btn4").click(function(){$("div:even").css("background","#1178d6");});$("#btn5").click(function(){$("div:odd").css("background","#1178d6");});$("#btn6").click(function(){$("div:gt(3)").css("background","#1178d6");});$("#btn7").click(function(){$("div:eq(3)").css("background","#1178d6");});$("#btn8").click(function(){$("div:lt(3)").css("background","#1178d6");});$("#btn9").click(function(){$(":header").css("background","#1178d6");});$("#btn10").click(function(){$("div:animated").css("background","#1178d6");});$("#btn11").click(function(){$("#two").nextAll("span:first").css("background","#1178d6");});});
?</script>
（2）內容過濾選擇器
選擇器描述返回 :contains(text) 選取含有文本內容為text的元素 集合元素 :empty 選取不包含子元素或者文本的空元素 集合元素 :has(selector) 選取含有選擇器所匹配的元素的元素 集合元素 :parent 選取包含子元素或者文本的元素 集合元素
<input type="button" value="選擇 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="選擇不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="選擇含有 class 為 mini 元素的 div 元素" id="btn3" /><input type="button" value="選擇含有子元素(或者文本元素)的div元素" id="btn4" />
?<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("div:contains('di')").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div:empty").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div:has(.mini)").css("background", "#ffbbaa");});
?$("#btn4").click(function(){$("div:parent").css("background", "#ffbbaa");});})</script>
（3）可見性過濾選擇器
可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素
可見選擇器 :hidden 不僅包含樣式屬性 display 為 none 的元素, 也包含文本隱藏域 (<input type=“hidden”>)和 visible:hidden 之類的元素
選擇器描述返回 :hidden 選取所有不可見的元素 集合元素 :visible 選取所有可見的元素 集合元素
<input type="button" value="選取所有可見的 div 元素" id="btn1"><input type="button" value="選擇所有不可見的 div 元素" id="btn2" /><input type="button" value="選擇所有不可見的 input 元素" id="btn3" />
?<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){$("div:visible").css("background", "#ffbbaa");});$("#btn2").click(function(){//show(time): 可以使不可見的元素變為可見, time 表示時間$("div:hidden").show(2000).css("background", "#ffbbaa");});$("#btn3").click(function(){//val() 方法可以返回某一個表單元素的 value 屬性值. alert($("input:hidden").val());});});</script>
（4）屬性過濾選擇器
選擇器描述返回 [attribute] 選取擁有此屬性的元素 集合元素 [attribute=value] 選取指定屬性值為value的元素 集合元素 [attribute！=value] 選取指定屬性值不等于value的元素 集合元素 [attribute^=value] 選取指定屬性值以value開頭的元素 集合元素 [attribute$=value] 選取指定屬性值以value結束的元素 集合元素 [attribute*=value] 選取指定屬性值含有value的元素 集合元素 [selector1]..[selectorN] 復合屬性選擇器，需要同時滿足多個條件時使用 集合元素
<input type="button" value="選取含有 屬性title 的div元素." id="btn1"/><input type="button" value="選取 屬性title值等于'test'的div元素." id="btn2"/><input type="button" value="選取 屬性title值不等于'test'的div元素(沒有屬性title的也將被選中)." id="btn3"/><input type="button" value="選取 屬性title值 以'te'開始 的div元素." id="btn4"/><input type="button" value="選取 屬性title值 以'est'結束 的div元素." id="btn5"/><input type="button" value="選取 屬性title值 含有'es'的div元素." id="btn6"/><input type="button" value="、選取有 屬性id的div元素和title值 含有'es'的 div 元素." id="btn7"/><input type="button" value="選取含有title屬性值,且title 屬性值不等于 test 的 div 元素." id="btn8"/>
?<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("div[title]").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div[title='test']").css("background", "#ffbbaa");});$("#btn3").click(function(){//選取的元素中包含沒有 title 的 div 元素. $("div[title!='test']").css("background", "#ffbbaa");});$("#btn4").click(function(){$("div[title^='te']").css("background", "#ffbbaa");});$("#btn5").click(function(){$("div[title$='est']").css("background", "#ffbbaa");});$("#btn6").click(function(){$("div[title*='es']").css("background", "#ffbbaa");});$("#btn7").click(function(){$("div[id][title*='es']").css("background", "#ffbbaa");});$("#btn8").click(function(){$("div[title][title!='test']").css("background", "#ffbbaa");});})</script>
（5）子元素過濾選擇器
選擇器描述返回 :nth-child 匹配其父元素下的第N個子或奇偶元素 集合元素 :first-child 匹配所給選擇器的第一個子元素 集合元素 :last-child 匹配所給選擇器的最后一個子元素 集合元素 :only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配 集合元素
nth-child() 選擇器詳解如下：
(1) :nth-child(even/odd): 能選取每個父元素下的索引值為偶(奇)數的元素
(2):nth-child(2): 能選取每個父元素下的索引值為 2 的元素
(3):nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數 的元素
(3):nth-child(3n + 1): 能選取每個父元素下的索引值是 3n + 1的元素
<input type="button" value="選取每個class為one的div父元素下的第2個子元素." id="btn1"/><input type="button" value="選取每個class為one的div父元素下的第一個子元素." id="btn2"/><input type="button" value="選取每個class為one的div父元素下的最后一個子元素." id="btn3"/><input type="button" value="如果class為one的div父元素下的僅僅只有一個子元素，那么選中這個子元素." id="btn4"/>
?<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){//選取子元素, 需要在選擇器前添加一個空格. $("div.one :nth-child(2)").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div.one :first-child").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div.one :last-child").css("background", "#ffbbaa");});$("#btn4").click(function(){$("div.one :only-child").css("background", "#ffbbaa");});});</script>
?（6）表單對象屬性過濾選擇器
選擇器描述返回 :enabled 選取所有可用元素 集合元素 :disabled 選取所有不可用元素 集合元素 :checked 選取所有被選中的元素(單選框，復選框) 集合元素 :selected 選取所有被選中的選項元素(下拉列表) 集合元素
<button id="btn1">對表單內 可用input 賦值操作.</button><button id="btn2">對表單內 不可用input 賦值操作.</button><br /><br /><button id="btn3">獲取多選框選中的個數.</button><button id="btn4">獲取多選框選中的內容.</button><br /><br /><button id="btn5">獲取下拉框選中的內容.</button><br /><br />
?<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){//使所有的可用的單行文本框的 value 值變為詹姆斯alert($(":text:enabled").val());$(":text:enabled").val("詹姆斯");});$("#btn2").click(function(){$(":text:disabled").val("www.atguigu.com");});$("#btn3").click(function(){var num = $(":checkbox[name='newsletter']:checked").length;alert(num);});$("#btn5").click(function(){//實際被選擇的不是 select, 而是 select 的 option 子節點//所以要加一個 空格. //var len = $("select :selected").length//alert(len);//因為 $("select :selected") 選擇的是一個數組//當該數組中有多個元素時, 通過 .val() 方法就只能獲取第一個被選擇的值了. //alert($("select :selected").val());//jQuery 對象遍歷的方式是 each, 在 each 內部的 this 是正在//得到的 DOM 對象, 而不是一個 jQuery 對象$("select :selected").each(function(){alert(this.value);});});$("#btn4").click(function(){$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value);});});})</script>
4.表單選擇器
選擇器描述返回 :input 選取所有的input、textarea、select和button元素 集合元素 :text 選取所有的單行文本框 集合元素 :password 選取所有的密碼框 集合元素 :radio 選取所有的單選框 集合元素 :checkbox 選取所有的多選框 集合元素 :submit 選取所有的提交按鈕 集合元素 :image 選取所有的圖像按鈕 集合元素 :reset 選取所有的重置按鈕 集合元素 :button 選取所有的按鈕 集合元素 :file 選取所有的上傳域 集合元素 :hidden 選取所有的不可見元素 集合元素
5.練習
（1）給網頁中所有的 <p> 元素添加 onclick 事件
（2）使一個特定的表格隔行變色
（3）對多選框進行操作, 輸出選中的多選框的個數
<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){//1. 點擊所有的 p 節點, 能夠彈出其對應的文本內容$("p").click(function () {alert($(this).text());})//2. 使第一個 table 隔行變色$("table:first tr:even").css("background", "#ffaacc");//3. 點擊 button, 彈出 checkbox 被選中的個數$(":button").click(function () {alert($(":checkbox:checked").length);})});</script>
?
《新程序員》：云原生和全面數字化實踐 50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔 為你收集整理的jquery入门（一） 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
