1. jQuery對象和DOM對象區(qū)別:
-
DOM對象:
包括Document對象(整個文檔)、Element對象(元素)、Attribute對象(屬性)、Event對象(事件),平時最常用到的就是Element對象。
-
jQuery對象:
通過jQuery包裝DOM對象后產(chǎn)生的對象(應該是封裝了一個DOM對象數(shù)組,并且添加了很多jQuery方法可以使用),jQuery對象是jQuery獨有的,其可以使用jQuery里的方法;
雖然jQuery對象是包裝DOM對象后產(chǎn)生的,但是jQuery無法使用DOM對象的任何方法,同時DOM對象也不能使用jQuery里的方法。</br>如,正確寫法:DOM:document.getElementById("test").innerHTML、jQuery:$("#test").html(),錯誤寫法:$("#test").innerHTML、document.getElementById("test").html(),因為document.getElementById("id")得到的是DOM對象,這里是test元素,而$("#test")得到的是jQuery對象。
-
DOM對象與jQuery對象互相轉(zhuǎn)換:
jQuery對象轉(zhuǎn)成DOM對象:
由于jQuery對象本身包含一個特殊的DOM對象數(shù)組。所以如果jQuery對象要轉(zhuǎn)換為DOM對象則必須取出其中的某一項:使用[index]或.get(index); (后邊有寫到)
如$("#test")得到包含一個test元素的jQuery對象,$("#test")[0]或$("#test").get(0)得到該DOM對象test元素。
如$(".test")得到包含多個DOM元素的jQuery對象,$(".test").eq(1)得到只包含第二個DOM元素的jQuery對象,$(".test")[1]或$(".test").get(1)得到第二個DOM對象。
2. 核心語法:
-
jQuery([selector,[context]]):
這個函數(shù)接收一個包含 CSS 選擇器的字符串,然后用這個字符串去匹配一組元素,其中selector選擇器字符串,context為待查找的 DOM 元素集、文檔或 jQuery 對象。默認情況下, 如果沒有指定context參數(shù),將在當前的 HTML document中查找 DOM 元素;如果指定了 context 參數(shù),如一個 DOM 元素集或 jQuery 對象,那就會在這個 context 中查找。
-
jQuery(html,[ownerDocument]):
根據(jù)提供的原始 HTML 標記字符串(參數(shù)html),動態(tài)創(chuàng)建由 jQuery 對象包裝的 DOM 元素,參數(shù)ownerDocument為創(chuàng)建DOM元素所在的文檔。
-
jQuery(callback):
$(document).ready(callback)的簡寫,即綁定一個在DOM文檔載入完成后執(zhí)行的函數(shù)callback。例:$(function(){...})。
-
.each(callback):
遍歷每一個匹配的元素,以每一個匹配的元素作為上下文來執(zhí)行一個函數(shù)callback。每次執(zhí)行傳遞進來的函數(shù)時,函數(shù)中的this關(guān)鍵字都指向當前遍歷到的元素,而且,在每次執(zhí)行函數(shù)時,都會給函數(shù)傳遞一個該元素在匹配的元素集合中索引作為參數(shù)(從零開始)。 返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。返回 'true' 跳至下一個循環(huán)(就像在普通的循環(huán)中使用'continue')。</br>例,$("img").each(function(i){ this.src = "test" + i + ".jpg";//其中this指向當次被遍歷到的img,i為該元素在所有匹配到的元素中的索引 });。
-
size():
jQuery 對象中元素的個數(shù)。即當前匹配的元素個數(shù)。與 length 將返回相同的值。例$("img").size();返回img元素的個數(shù)。
-
selector屬性:
返回傳給jQuery()的原始選擇器。例,$("div#foo ul:not([class])").selector返回值為"div#foo ul:not([class])"。
-
get([index]):
取得第index個匹配的元素,返回的是DOM對象,類似的有eq(index),不過eq(index)返回的是jQuery對象。
-
data([key],[value]):
在元素上存放或讀取數(shù)據(jù),返回該jQuery對象。當參數(shù)只有一個key的時候,讀取該jQuery對象對應DOM中存儲的key對應的值,當參數(shù)為兩個時,向該jQuery對象對應的DOM中存儲key-value鍵值對的數(shù)據(jù).例:<div data-test="this is test" ></div>,$("div").data("test")獲取data-test的值"this is test"。
-
jQuery.fn.extend(obj):
擴展 jQuery 元素集來提供新的方法,即所有jQuery對象可擴展得到obj屬性或方法,如jQuery.fn.extend({cry:function(){...}}),調(diào)用:$("input[type=checkbox]").cry()。
-
jQuery.extend(obj):
擴展jQuery對象本身,如jQuery.extend({cry:function(){...},smile:function(){...}})可為jQuery對象本身擴展cry和smile方法,調(diào)用:jQuery.cry();jQuery.smile()。
-
jQuery.noConflict([extreme]):
將變量$的控制權(quán)讓渡給第一個實現(xiàn)它的那個庫。
3.選擇器:
多個選擇器之間不加空格,只有在后代選擇器中有空格,如$(":radio.important:checked")獲取所有類名為important的選中的radio
選擇器分為如下種類:
-
基本選擇器:
CSS選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| 元素選擇器element | $("tagName") | 根據(jù)給定的元素標簽名匹配所有元素,例如:$("p"),選取所有 <p> 元素; |
| id選擇器#id | $("#id") | 根據(jù)給定的ID匹配一個元素, 例如:$("#lastname") 選取id="lastname" 的元素 |
| 類名選擇器.class | $(".className") | 根據(jù)給定的css類名匹配元素, 例如:$(".intro") 選取所有 class="intro" 的元素 |
| 通用選擇器* | $("*") | 匹配所有元素,多用于結(jié)合上下文來搜索 |
| 群組選擇器, | $("selector1,selector2,selectorN") | 適配滿足任意一個選擇器的元素,或者說是將各個選擇器匹配的元素合并,如$("h1,h2,h3")適配所有h1、h2、h3標簽的元素 |
層級選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| 后代選擇器 | $("selector1 selector2") | 從selector1選擇器所適配元素(祖先)的所有后代元素中適配selector2選擇器,可以理解為從$("selector1")的后代元素中查找適配$("selector2")的元素 |
| 子元素選擇器 | $("selector1>selector2") | 從selector1選擇器所適配元素(父元素)的所有子元素中適配selector2選擇器,可以理解為從$("selector1")的子元素中查找適配$("selector2")的元素 |
| 緊鄰兄弟選擇器 | $("prev+next") | 匹配緊接在 prev 元素后的 第一個兄弟元素 ,例:$("#test+div") 匹配緊隨test后的第一個div |
| 相鄰兄弟選擇器 | $("prev~sibling") | 匹配所有 prev 元素后的所有兄弟元素,例:$("#test~div")匹配test后的所有test的兄弟元素 |
表單域選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| :input | $(":input") | 匹配所有 input, textarea, select 和 button 元素 |
| :text | $(":text") | 匹配所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 匹配所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 匹配所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 匹配所有 type="checkbox" 的 <input> 元素 |
| :button | $(":button") | 匹配所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 匹配所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 匹配所有 type="file" 的 <input> 元素 |
| :hidden | $(":hidden") | 匹配所有 type="hidden" 的 <input> 元素 |
| :submit | $(":submit") | 匹配所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 匹配所有 type="reset" 的 <input> 元素 |
-
過濾選擇器:
簡單過濾選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| :first | $("selector:first") | 獲取第一個匹配元素 |
| :last | $("selector:last") | 獲取最后一個匹配元素 |
| :even | $("selector:even") | 獲取所有匹配元素中索引為偶數(shù)(從0開始計數(shù))的元素 |
| :odd | $("selector:even") | 獲取所有匹配元素中索引為奇數(shù)(從0開始計數(shù))的元素 |
| :eq(index) | $("selector:eq(i)") | 獲取匹配的第i個(從0開始計數(shù))元素,例:$("ul li:eq(3)")列表中的第四個元素(index 從 0 開始)(注:eq是equal的縮寫) |
| :gt(index) | $("selector:gt(i)") | 獲取匹配元素中所有大于給定索引i(從0開始計數(shù))的元素,例:$("ul li:gt(3)")列表中的從第四個元素開始的所有元素(index 從 0 開始)(注:gt是greater than的縮寫) |
| :lt(index) | $("selector:lt(i)") | 獲取匹配元素中所有小于給定索引i(從0開始計數(shù))的元素,例:$("ul li:gt(3)")列表中的所有索引小于3的元素,即前三個元素(index 從 0 開始)(注:lt是less than的縮寫) |
| :not(selector) | $("selector1:not(selector2) ") | 從匹配selector1的元素中過濾并去除所有匹配selector2的元素,例:$(":radio:not(checked)") 所有未被選中的radio元素 |
| :header | $(":header") | 匹配所有標題元素(h1、h2、h3、h4...) |
內(nèi)容過濾選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| :contains(text) | $(":contains('text')") | 匹配含有指定文本text的元素 |
| :has(selector) | $(":has(selector)") | 匹配后代元素中含有選擇器selector所匹配的元素的元素,例$("div:has(p)")匹配后代元素包含p的所有div |
| :empty | $(":empty") | 匹配所有不包含子元素且不包含文本的所有空元素 |
| :parent | $(":parent") | 匹配所有包含子元素或者文本的所有元素,與:empty相反 |
屬性過濾選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| [attribute] | $("[attribute]") |
$("[href]")選取所有帶有 href 屬性的元素 |
| [attribute=value] | $("[attribute=value]") |
$("[href='#']")選取所有 href 屬性的值等于 "#" 的元素 |
| [attribute!=value] | $("[attribute!=value]") |
$("[href!='#']")選取所有 href 屬性的值不等于 "#" 的元素 |
| [attribute*=value] | $("[attribute*=value]") |
$("[href*='#']")選取所有 href 屬性的值包含 "#" 的元素 |
| [attribute^=value] | $("[attribute^=value]") |
$("[href$='hi']")選取所有 href 屬性的值包含以 "hi" 開頭的元素 |
| [attribute$=value] | $("[attribute$=value]") |
$("[href$='.jpg']")選取所有 href 屬性的值包含以 ".jpg" 結(jié)尾的元素 |
子元素過濾選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| :first-child | $("selector:first-child") | 匹配(選擇器selector匹配的每一個元素)的第一個子元素。注意和:first的區(qū)別,:first獲取的是selector選中的元素中第一個,而:first-child獲取的是selector選中的元素中的每一個的第一個子元素,是多個 |
| :last-child | $("selector:first-child") | 匹配(選擇器selector匹配的每一個元素)的最后一個子元素。注意和:last的區(qū)別 |
| :nth-child(index) | $("selector:nth-child(i)") | 匹配(選擇器selector匹配的每一個元素)的第i個子元素。注意和:eq(index)的區(qū)別 |
| :only-child | $("selector:only-child") | 如果某個元素是父元素中唯一的子元素,那將會被匹配(即匹配所有作為唯一子元素的元素) |
表單域?qū)傩赃^濾選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| :enabled | $(":enabled") | 匹配所有可用元素 |
| :disabled | $(":disabled") | 匹配所有不可用元素 |
| :checked | $(":checked") | 匹配所有被選中的元素(單選框、復選框中使用) |
| :selected | $(":selected") | 匹配所有被選中的option元素(下拉框中使用) |
可見性過濾選擇器:
| 選擇器 | 語法 | 說明 |
|---|---|---|
| :hidden | $(":hidden") | 匹配所有可見元素 |
| :visible | $(":visible") | 匹配所有不可見元素 |
4.屬性操作:
| 操作 | 說明 |
|---|---|
| attr(attrName) | 返回被選元素屬性attrName的值.例,$("#img1").attr("src");返回img1的src屬性: |
| attr(key,value/obj) | 設(shè)置被選元素屬性值 例,$("#img1").attr("src","www.baidu.com");或$("#img1").attr({src:"www.baicu.com",style:"color:red"});
|
| removeAttr(attrName) | 刪除被選元素屬性的attrName屬性.例,$("#img1").removeAttr("src");刪除img1的src屬性 |
| addClass(className) | 為每個匹配的元素添加指定的類名。 |
| removeClass(className) | 為每個匹配的元素刪除指定的類名。 |
| toggleClass(className) | 為每個匹配的元素切換指定的類名,如果存在就刪除,如果不存在就添加 |
| html([val/fn]) | 獲取或設(shè)置匹配元素的html內(nèi)容,即innerHTML的值,參數(shù)為空即為獲取,不為空即為設(shè)置 |
| text([val/fn]) | 獲取或設(shè)置匹配元素的文本內(nèi)容,參數(shù)為空即為獲取,不為空即為設(shè)置 |
| val([val/fn]) | 獲取或設(shè)置匹配元素的值,參數(shù)為空即為獲取,不為空即為設(shè)置 |
5.文檔處理:
| 操作 | 說明 |
|---|---|
| append(content/fn) | 向每個匹配的元素 【內(nèi)部】 結(jié)尾追加內(nèi)容content,其中content可以是字符串/DOM對象/jQuery對象和DOM對象區(qū)別;例$("#testdiv").append("<p>Hello</p>");在testdiv內(nèi)部結(jié)尾追加<p>Hello</p>.例$("#testdiv").append(document.createElement(p));在testdiv內(nèi)部追加p節(jié)點 |
| appendTo(content) | 把所有匹配的元素追加到另一個指定的元素元素集合content 【內(nèi)部】 中,與append的操作相反.例:$("<p>Hello</p>").appendTo($("#testdiv")),把<p>Hello</p>追加到testdiv內(nèi)部 |
| prepend(content) | 向每個匹配的元素 【內(nèi)部】 開頭前置內(nèi)容 |
| prependTo(content) | 把所有匹配的元素前置到另一個、指定的元素元素集合 【內(nèi)部】 中,與prepend相反 |
| after(content/fn) | 在每個匹配的元素 【之后】 插入內(nèi)容 |
| before(content/fn) | 在每個匹配的元素 【之前】 插入內(nèi)容。 |
| insertAfter(content) | 把所有匹配的元素插入到另一個、指定的元素元素集合的后面。與after相反 |
| insertBefore(content) | 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。與before相反 |
| replaceWith(content/fn) | 將所有匹配的元素替換成指定的HTML/DOM元素對象/jQuery對象content。例,$("p").replaceWith("<b>Paragraph. </b>");把所有p替換為b |
| replaceAll(selector) | 用匹配的元素替換掉所有selector匹配到的元素,與replaceWith相反。例,$("<b>Paragraph. </b>").replaceAll("p");用b替換所有p |
| empty() | 刪除匹配的元素集合中所有的子節(jié)點。 |
| remove([expr]) | 從DOM中刪除所有與expr匹配的元素。 |
| clone([Even[,deepEven]]) | 克隆匹配的元素并且返回這些克隆的副本 |
6.篩選:
-
簡單篩選:
| 操作 | 說明 |
|---|---|
| eq(index/-index) | 獲取當前鏈式操作中第N個jQuery對象,當參數(shù)大于等于0時為正向選取,比如0代表第一個,1代表第二個。當參數(shù)為負數(shù)時為反向選取,比如-1為倒數(shù)第一個。類似:eq(index)選擇器 |
| first() | 獲取第一個元素。類似:first選擇器 |
| last() | 獲取最后一個元素。類似:last選擇器 |
| filter(expr/obj/ele/fn) | 篩選出與指定表達式匹配的元素集合 |
| has() | 篩選出包含特定【后代】的元素。類似:has(selector)選擇器 |
| not() | 從匹配元素的集合排除與指定表達式匹配的元素。類似:not(selector)選擇器 |
| slice(start, [end]) | 選取一個匹配的子集,即從匹配元素中篩選出第start個到第end個元素 |
| hasClass(class) | 檢查當前的元素是否含有某個特定的類,如果有,則返回true。 |
| is(expr/obj/ele/fn) | 檢測匹配元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。 |
-
層級篩選:
| 操作 | 說明 |
|---|---|
| children([expr]) | 取得元素的元素集合中每一個元素的所有 【子元素】 的元素集合??梢酝ㄟ^可選的表達式expr來過濾所匹配的子元素 |
| find(expr\obj\ele) | 從所選元素后代元素中篩選滿足特定表達式的 【后代元素】 ,find是篩選后代元素,children只是篩選子元素 |
| parent([expr]) | 取得包含所有匹配元素的每一個元素的 【父元素】 的元素集合。并且可以通過可選的表達式expr來過濾 |
| parents([expr]) | 取得包含所有匹配元素的每一個元素的 【祖先元素】 的元素集合。并且可以通過可選的表達式expr來過濾 |
| parentsUntil([expr]) | 查找當前元素的所有的 【祖先元素】 ,直到遇到匹配的那個元素為止,返回這之前的 【所有祖先元素】 |
| closest(expr\object) | 從元素本身開始,逐級向上級元素匹配,并返回最先匹配的元素。與parentsUntil的區(qū)別在于從元素本身開始,包括自己,只返回該 【匹配的元素】 |
| next([expr]) | 取得匹配的元素集合中每一個元素 【緊鄰的后面同輩元素】 的元素集合 |
| nextAll([expr]) | 查找當前元素之后所有的 【同輩元素】 。不需緊鄰 |
| nextUntil([expr]) | 查找當前元素之后所有的 【同輩元素】 ,直到遇到匹配的那個元素為止。 |
| prev([expr]) | 取得匹配的元素集合中每一個元素 【緊鄰的前面同輩元素】 的元素集合。 |
| prevAll([expr]) | 查找當前元素之前所有的 【同輩元素】 。不需緊鄰 |
| prevUntil([expr]) | 查找當前元素之前所有的 【同輩元素】 ,直到遇到匹配的那個元素為止。 |
| siblings([expr]) | 查找當前元素所有的 【同輩元素】 。包括前邊和后邊的 |
7.事件:
分為觸發(fā)事件和綁定事件,如觸發(fā):$("button#demo").click(),綁定:$("button#demo").click(function(){$("img").hide()})
-
常用事件:
| 操作 | 說明 |
|---|---|
| click([[data],fn]) | 觸發(fā)每一個匹配元素的click事件。 |
| ready(fn) | 文檔加載完成時執(zhí)行。$(function($){...})或$(document).ready(function(){...})
|
| on(events,[data],fn) | 在選擇元素上綁定一個或多個事件 |
| off(events,[fn]) | 移除用.on()綁定的事件處理程序 |
| one(type,[data],fn) | 為每一個匹配元素的特定事件(像click)綁定一個一次性的事件處理函數(shù)。 |
| 為被選元素添加一個或多個事件處理程序,并規(guī)定事件發(fā)生時運行的函數(shù)。jQuery3.0中已棄用,使用on()代替 | |
| bind()的反向操作,從每一個匹配的元素中刪除綁定的事件。已棄用,用off()代替 | |
| trigger(type,[data]) | 觸發(fā)匹配元素的某事件 |
| triggerHandler(type, [data]) | 觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會執(zhí)行瀏覽器默認動作,也不會產(chǎn)生事件冒泡。 |
| 給所有匹配的元素附加一個事件處理函數(shù),即使這個元素是未來添加進來的也有效。已棄用,使用on()代替 | |
| 從元素中刪除先前用.live()綁定的所有事件.(此方法與live正好完全相反。)已棄用,用off()代替 | |
| focus([[data],fn]) | 當元素獲得焦點時,觸發(fā) focus 事件。 |
| blur([[data],fn]) | 當元素失去焦點時觸發(fā) blur 事件。 |
| change([[data],fn]) | 當元素的值發(fā)生改變時,會發(fā)生 change 事件。該事件僅適用于文本域(text field),以及 textarea 和 select 元素 |
| keydown/keyup([[data],fn]) | 當鍵盤或按鈕被按下/抬起時發(fā)生 |
| select([[data],fn]) | 當 textarea 或文本類型的 input 元素中的文本被選擇時,會發(fā)生 select 事件。 |
| submit([[data],fn]) | 當提交表單時,會發(fā)生 submit 事件。只適用于表單元素 |
8.效果:
- show([speed,[easing],[fn]]): 顯示隱藏的匹配元素。
- hide([speed,[easing],[fn]]): 隱藏顯示的匹配元素
9.工具:
- jQuery.each(obj,[callback]):通用例遍方法,可用于例遍對象和數(shù)組obj。不同于例遍 jQuery 對象的 $().each() 方法,此方法可用于例遍任何對象。回調(diào)函數(shù)擁有兩個參數(shù):第一個為對象的成員或數(shù)組的索引,第二個為對應變量或內(nèi)容。如果需要退出 each 循環(huán)可使回調(diào)函數(shù)返回 false,其它返回值將被忽略。
- jQuery.extend(target,obj1,[objN])用一個或多個其他對象來擴展一個對象,返回被擴展的對象。如果不指定target,則給jQuery命名空間本身進行擴展
10.事件對象:
| 屬性/方法 | 說明 |
|---|---|
| event.data | 事件執(zhí)行時綁定的數(shù)據(jù) |
| event.preventDefault() | 阻止默認事件行為的觸發(fā) |
| event.result | 包含了當前事件事件最后觸發(fā)的那個處理函數(shù)的返回值,除非值是 undefined 。 |
| event.target | 最初觸發(fā)事件的DOM元素 |