初識jQuery對象
在學習jQuery
對象之前,我們需要了解一下jQuery對象
和DOM對象
的區別。
DOM對象
我們可以通過JavaScript
中的getElementsByTagName
或getElementById
等來獲取元素節點。這樣得到的DOM元素就是DOM對象。DOM對象可以使用JavaScript中的方法:
var domObj = document.getElementById("id"); // 獲取DOM對象
var ObjHTML = domObj.innerHTML; // 使用JavaScript中的屬性——innerHTML
jQuery對象
jQuery
對象就是通過jQuery
包裝DOM對象後產生的對象。
jQuery對象是jQuery獨有的。如果一個對象是jQuery對象,那麼他就可以使用jQuery裏的方法,但是不能是DOM對象的任何方法。
jQuery對象和DOM對象的相互轉換
jQuery --> DOM
jQuery提供了兩種方法:[index]
和get(index)
jQuery對象是一個類似數組的對象,可以通過[index]
方法得到相應的DOM對象
let $students = $("#students");//jQuery對象
let student = $students[0];//DOM對象
另一種方法是jQuery本身提供的,通過get(index)
方法得到相應的DOM對象
let $students = $("#students");//jQuery對象
let student = $students.get(0);//DOM對象
DOM --> jQuery
只需用$()
把DOM對象包起來即可
let student = document.getElementById("student");//DOM對象
let $student = $(student);//jQuery對象
jQuery選擇器
常用的CSS選擇器
選擇器 | 語法 | 描述 |
---|---|---|
標籤選擇器 | E{CSS規則} | 以文檔元素作爲選擇符 |
ID選擇器 | #ID{CSS規則} | 以文檔元素的唯一標識符ID作爲選擇符 |
類選擇器 | E.className{CSS規則} | 以文檔元素的class作爲選擇符 |
jQuery
選擇器的寫法與CSS
選擇器的寫法非常相似,只不過兩者作用效果不同。
CSS
選擇器找到元素後添加樣式。
jQuery
選擇器找到元素後添加行爲。
jQuery選擇器的優勢
- 簡潔的寫法
在jQuery
中,例如:$("#ID")
用來代替document.getElementById()
函數,即通過ID獲取元素。$("tagName")
用來代替document.getElementsByTagName()
函數,即通過標籤名獲取HTML元素。 - jQuery選擇器幾乎支持所有的CSS選擇器並且擁有更好的跨瀏覽器的兼容性。
- 完善的處理機制
例如:傳統的document.getElementById("app").style.color="red";
如果沒有id爲app的元素,瀏覽器會報錯。
而jQuery選擇器$("#app").css("color","red");
即使沒有id爲app的這個元素也不會報錯。
注意:如果需要用jQuery的方式判斷頁面上是不是有這個元素,需要根據獲取到的元素長度來判斷。因爲$("#app")
獲取的永遠是對象。if($("#app").length>0){ // do something }
jQuery選擇器——基本選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
#id | 根據給定ID匹配一個元素 | 單個元素 | $("#app") 選取ID爲app的元素 |
.class | 根據給定類名匹配元素 | 集合元素 | $(".app") 選取所有class爲app的元素 |
element | 根據給定元素名匹配元素 | 集合元素 | $("a") 選取所有的<a> 元素 |
* | 匹配所有元素 | 集合元素 | $("*") 選取所有元素 |
selector1,selector2,…,selectorN | 將每一個選擇器匹配到的元素合併後一起返回 | 集合元素 | $("div,span,p.text") 選取所有<div> ,<span> 和class爲text的<p> 標籤的一組元素 |
jQuery選擇器——層次選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
$(“ancestor descandent”) | 選取ancestor元素裏的所有descendant(後代)元素 | 單個元素 | $("div span") 選取<div> 裏的所有的<span> 元素 |
$(“parent>child”) | 選取parent元素下的child(子)元素 | 集合元素 | $("div>span") 選取<div> 元素下元素名是<span> 的子元素 |
$(“prev+next”) | 選取緊接在prev元素後的next元素 | 集合元素 | $("div+span") 選取<div> 元素的下一個<span> 同輩元素 |
$(“prev~siblings”) | 選取prev元素之後的所有siblings元素 | 集合元素 | $("div~span") 選取<div> 元素後面的所有<span> 同輩元素 |
第1個和第2個選擇器比較常用。後面兩個可以用更加簡單的方法代替。
選擇器 | 方法 | |
---|---|---|
等價關係 | $(“div + span”); | $(“div”).next(“span”); |
等價關係 | $(“div ~ span”); | $(“div”).nextAll(“span”); |
另外,$("div ~ span");
選擇器只能選取<div>
元素後面的同輩<span>
元素,而$("div").siblings("span")
可以選取<div>
元素的所有同輩<span>
元素
jQuery選擇器——過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素。
按照不同的過濾規則,過濾選擇器可以分爲基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單對象屬性過濾選擇器。
基本過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:first | 選取第1個元素 | 單個元素 | $(“div:first”)選取所有<div> 元素中的第一個<div> 元素 |
:last | 選取最後1個元素 | 單個元素 | $(“div:last”)選取所有<div> 元素中的最後一個<div> 元素 |
:not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $(“input:not(.text)”)選取class不是text的<input> 元素 |
:even | 選取索引是偶數的所有元素,索引從0開始 | 集合元素 | $(“input:even”)選取索引是偶數的<input> 元素 |
:odd | 選取索引是奇數的所有元素,索引從0開始 | 集合元素 | $(“input:add”)選取索引是奇數的<input> 元素 |
:eq(index) | 選取索引等於index的元素(index從0開始) | 單個元素 | $(“input:eq(1)”)選取索引等於1的<input> 元素 |
:gt(index) | 選取索引大於index的元素(index從0開始) | 集合元素 | $(“input:gt(1)”)選取索引大於1的<input> 元素 |
:lt(index) | 選取索引小於index的元素(index從0開始) | 集合元素 | $(“input:lt(1)”)選取索引小於1的<input> 元素 |
:header | 選取所有的標題元素,例如h1,h2,h3等的 | 集合元素 | $(":header")選取網頁中所有的<h1>,<h2>,<h3>...... |
:animated | 選取當前正在執行動畫的所有元素 | 集合元素 | $(“div:animated”)選取正在執行動畫的<div> 元素 |
:focus | 選取當前獲取焦點的元素 | 集合元素 | $(":focus")選取當前獲取焦點的元素 |
內容過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:contains(text) | 選取含有文本內容爲“text”的元素 | 集合元素 | $("div:contains('我')") 選取含有文本“我”的<div> 元素 |
:empty | 選取不包含子元素或文本的空元素 | 集合元素 | $("div:empty") 選取不包含子元素或文本的<div> 空元素 |
:has(selector) | 選取含有選擇器所匹配的元素的元素 | 集合元素 | $("div:has(p)") 選取含有<p> 元素的<div> 元素 |
:parent | 選取含有子元素或文本的元素 | 集合元素 | $("div:parent") 選取擁有子元素或文本的<div> 元素 |
可見性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:hidden | 選取所有不可見的元素 | 集合元素 | $(":hidden") 選取所有不可見的元素。包括<input type="hidden" /> ,<div style="display:none;"> |
:visible | 選取所有可見的元素 | 集合元素 | $("div:visible") 選取所有可見的<div> 元素 |
屬性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
[attribute] | 選取擁有此屬性的元素 | 集合元素 | $("div[id]") 選取擁有屬性id的<div> 元素 |
[attribute=value] | 選取屬性值爲value的元素 | 集合元素 | $("div[title=test]") 選取屬性title爲“test”的<div> 元素 |
[attribute!=value] | 選取屬性值不爲value的元素 | 集合元素 | $("div[title!=test]") 選取屬性title不爲“test”的<div> 元素(注意,沒有屬性title的<div> 元素也會被選取) |
[attribute^=value] | 選取屬性值以value開始的元素 | 集合元素 | $("div[title^=test]") 選取屬性title以“test”開始的<div> 元素 |
[attribute$=value] | 選取屬性值以value結束的元素 | 集合元素 | $("div[title$=test]") 選取屬性title以“test”結束的<div> 元素 |
[attribute*=value] | 選取屬性值含有value的元素 | 集合元素 | $("div[title*=test]") 選取屬性title含有“test”的<div> 元素 |
[attribute|=value] |
選取屬性等於給定字符串或以該字符串爲前綴(該字符串後跟一個連字符“-”)的元素 | 集合元素 | $('div[title|="en"]') 選取屬性title等於en或以en爲前綴(該字符串後跟一個連字符“-”)的<div> 元素 |
[attribute~=value] | 選取屬性用空格分隔的值中包含一個給定值的元素 | 集合元素 | $('div[title~="uk"]') 選取屬性title用空格分隔的值中包含字符uk的<div> 元素 |
[attribute1][attribute2][attributeN] | 用屬性選擇器合併成一個複合屬性選擇器,滿足多個條件。每選擇一次,縮小一次範圍 | 集合屬性 | $("div[id][title$='test']") 選取擁有屬性id,並且屬性title以“test”結束的<div> 元素 |
子元素過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:nth-child(index/even/odd/equation) | 獲取每個父元素下的第index個子元素或奇偶元素(index從1開始) | 集合元素 | :eq(index) 值匹配一個元素,而:nth-child 將爲每一個父元素匹配子元素,並且:nth-child(index) 的index是從1開始的,而:eq(index) 是從0開始的 |
:first-child | 選取每個父元素的第一個子元素 | 集合元素 | :first只返回單個元素,而:first-child將爲每一個父元素匹配第一個子元素。例如$("ul li:first-child"); 選取每個<ul> 中第一個<li> 元素 |
:last-child | 選取每個父元素的最後一個子元素 | 集合元素 | :last只返回單個元素,而:last-child將爲每一個父元素匹配最後一個子元素。例如$("ul li:last-child"); 選取每個<ul> 最後一個<li> 元素 |
:only-child | 如果某個元素是它父元素中唯一的子元素,那麼將會被匹配。如果父元素中含有其他元素,則不會被匹配 | 集合元素 | $("ul li:only-child") 在<ul> 中選取是唯一子元素的<li> 元素 |
表單對象屬性過濾選擇器
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:enabled | 選取所有可用元素 | 集合元素 | $("#form1 :enabled") 選取id爲form1的表單內的所有可用元素 |
:disabled | 選取所有不可用元素 | 集合元素 | $("#form2 :disabled") 選取id爲form2的表單內的所有不可用元素 |
:checked | 選取所有被選中的元素(單選框,複選框) | 集合元素 | $("input:checked") 選取所有被選中的<input> 元素 |
:selected | 選取所有被選中的選項元素 | 集合元素 | $("select option:selected") 選取所有被選中的選項元素 |
jQuery選擇器——表單選擇器
jQuery中專門引入了表單選擇器,利用這個選擇器,能極其方便的獲取到表單的某個或某類型的元素
表單對象屬性過濾示例
選擇器 | 描述 | 返回 | 示例 |
---|---|---|---|
:input | 獲取所有的<input> <textarea> <select> <button> 元素 |
集合元素 | $(":input") |
:text | 獲取所有的單行文本框 | 集合元素 | $(":text") |
:password | 獲取所有的密碼框 | 集合元素 | $(":password") |
:radio | 獲取所有的單選框 | 集合元素 | $(":radio") |
:checkbox | 獲取所有的多選框 | 集合元素 | $(":checkbox") |
:submit | 獲取所有的提交按鈕 | 集合元素 | $(":submit") |
:image | 獲取所有的圖形按鈕 | 集合元素 | $(":image") |
:reset | 獲取所有的重置按鈕 | 集合元素 | $(":reset") |
:button | 獲取所有的按鈕 | 集合元素 | $(":button") |
:file | 獲取所有的上傳域 | 集合元素 | $(":file") |
:hidden | 獲取所有的不可見元素 | 集合元素 | $(":hidden") 選取所有不可見元素 |
選擇器注意事項
- 如果表達式中含有特殊字符如“#”,“.” 需要使用轉義符轉義:
$("#id\\#b"); // 轉義特殊字符"#" $("#id\\[1\\]"); // 轉義特殊字符"[]"
- 表達式中注意空格,多一個空格或少一個空格也許會得到截然不同的結果。