jQuery知識總結(jié)

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ù)。
bind(type,[data],fn) 為被選元素添加一個或多個事件處理程序,并規(guī)定事件發(fā)生時運行的函數(shù)。jQuery3.0中已棄用,使用on()代替
unbind(type,[data/fn]]) bind()的反向操作,從每一個匹配的元素中刪除綁定的事件。已棄用,用off()代替
trigger(type,[data]) 觸發(fā)匹配元素的某事件
triggerHandler(type, [data]) 觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會執(zhí)行瀏覽器默認動作,也不會產(chǎn)生事件冒泡。
live(type, [data], fn) 給所有匹配的元素附加一個事件處理函數(shù),即使這個元素是未來添加進來的也有效。已棄用,使用on()代替
die(type, [fn]) 從元素中刪除先前用.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元素
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容