本文首發(fā)于我的個(gè)人博客：cherryblog.site/
最近開啟了閱讀源碼之旅，有興趣的童靴可以持續(xù)關(guān)注，這幾天再看 Zepto.js 的源碼，估計(jì)博文過幾天就會(huì)出來~另外，買的十幾本書陸陸續(xù)續(xù)的在看，立志每本書都寫一本讀書筆記（相當(dāng)于這本書的濃縮版 + 個(gè)人見解）

前一段在當(dāng)當(dāng)和京東上趁著打折買了十幾本編程的書，勵(lì)志要全部看完！在此立一個(gè) flag，最近也是一直在讀書，發(fā)現(xiàn)書中更能深入的學(xué)到系統(tǒng)的知識(shí)。并且如果再能將書中的內(nèi)容用自己的語言表達(dá)出來那就更好了。

書名：《鋒利的 jQuery》
推薦指數(shù)：☆☆☆

鋒利的jQuery

簡介：這本書適合初學(xué) JS 的童靴看~內(nèi)容比較基礎(chǔ)，我是想看 JQ 源碼，然后發(fā)現(xiàn)和源碼沒有半毛錢關(guān)系，只是比較全的介紹 jQuery 的用法。對(duì)沒有系統(tǒng)看過 jQuery 用法的，或者 js 的初學(xué)者還是有一定幫助的，但是如果你有一定的 js 基礎(chǔ)，還是不要浪費(fèi)時(shí)間了。其實(shí) jQuery 好多的用法我們并不清楚，只是將 jQuery 當(dāng)做方便的元素選擇器來使用，其實(shí) jQuery 能做的遠(yuǎn)比這多得多。看完本篇文章，jQuery 的功能你就了解的差不多了。

jQuery 的優(yōu)勢

• 強(qiáng)大的選擇器
• 出色的 DOM 操作的封裝
• 可靠的事件處理機(jī)制
• 完善的 Ajax
• 不污染頂級(jí)變量
• 出色的瀏覽器兼容性
• 鏈?zhǔn)讲僮鞣绞?/li>
• 隱式迭代
• 行為層與結(jié)構(gòu)層分離
• 豐富的插件支持
• 完善的文檔
• 開源

不污染頂級(jí)變量

jQuery 只建立一個(gè)名為 jQuery 的對(duì)象，其所有的函數(shù)方法都在這個(gè)對(duì)象之下。其別名 $ 也可以隨時(shí)交出控制權(quán)，絕對(duì)不會(huì)污染其他變量。該特性使 jQuery 可以與其他 JavaScript 庫共存。

鏈?zhǔn)讲僮鞣绞?/h2>

jQuery 的鏈?zhǔn)讲僮鞣绞?#xff1a;對(duì)放生在同一個(gè) jQuery 對(duì)象上的一組動(dòng)作，可以直接連寫而無需重復(fù)獲取對(duì)象。

隱式迭代

當(dāng)用 jQuery 找到帶有 “.myClass” 類的全部元素，然后隱藏它們時(shí)，無需循環(huán)遍歷每一個(gè)返回的元素。jQuery 里的方法都被設(shè)計(jì)成自動(dòng)操作對(duì)象集合，而不是單獨(dú)的對(duì)象

jQuery 代碼的編寫

在 jQuery 庫中，$ 就是 jQuery 的一個(gè)簡寫形式，例如 $(#.foo) 與 jQuery(#.foo) 是等價(jià)的

window.onload 和 $(document).ready() 對(duì)比

--window.onload$(document).ready()

執(zhí)行時(shí)間	必須等待網(wǎng)頁中所有的內(nèi)容加載完畢（）包括圖片才執(zhí)行	只需要 DOM 加載完就執(zhí)行（不包括圖片等）
編寫個(gè)數(shù)	不能同時(shí)編寫多個(gè)	能同時(shí)編寫多個(gè)
簡化寫法	無	$(document).ready(function(){}) 可以簡寫成 $(function(){})

jQuery 的鏈?zhǔn)讲僮黠L(fēng)格

jQuery 的鏈?zhǔn)讲僮鞣绞?#xff1a;對(duì)放生在同一個(gè) jQuery 對(duì)象上的一組動(dòng)作，可以直接連寫而無需重復(fù)獲取對(duì)象。
例如：

$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();復(fù)制代碼

為了閱讀方便，也可以將代碼改為如下格式：

$(this).addClass("current") // 給當(dāng)前元素添加 "current" 樣式.next().show() // 下一個(gè)元素顯示.parent().siblings().children("a").removeClass("current") // 父元素的同輩元素的子元素 <a> 移除 "current" 樣式.next().hide(); // 他們的下一個(gè)元素隱藏復(fù)制代碼

jQuery 對(duì)象和 DOM 對(duì)象

DOM 對(duì)象就是 DOM 樹種的節(jié)點(diǎn)，通過原生 JavaScript 的 getElementsByTagName 或者 getElementsByTagId 等獲取，DOM 對(duì)象可以使用 JavaScript 中的方法。

jQuery 對(duì)象是通過 jQuery 包裝 DOM 過后的對(duì)象。

在 jQuery 對(duì)象上無法使用 DOM 對(duì)象的任何方法，同理，也不能在 DOM 對(duì)象上使用任何 jQuery 的方法啊。所以我們要區(qū)分什么是 jQuery 的方法，什么是 JS 原生的方法。例如，下面這些都是錯(cuò)誤的

$("#id").innerHTML$("#id").checkeddocument.getElementById("id").html()復(fù)制代碼

jQuery 對(duì)象和 DOM 對(duì)象相互轉(zhuǎn)換

為了能更好的區(qū)分哪些是 jQuery 哪些是 DOM 對(duì)象，我們約定俗成使用 jQuery 獲取的對(duì)象我們?cè)谧兞壳懊婕由?$ 符號(hào)。

jQuery 對(duì)象轉(zhuǎn)化為 DOM 對(duì)象

[index] 方法，就是在 jQuery 對(duì)象后面加上索引，比如：var $cr = $(#cr); // jQuery 對(duì)象 var cr = $cr[0]; // 將 jQuery 轉(zhuǎn)化為 DOM 對(duì)象 alert( cr.checked ); // 檢查是否轉(zhuǎn)化成功復(fù)制代碼

get(index) 方法var $cr = $(#cr); // jQuery 對(duì)象 var cr = $cr.get(0); // 將 jQuery 轉(zhuǎn)化為 DOM 對(duì)象 alert( cr.checked ); // 檢查是否轉(zhuǎn)化成功復(fù)制代碼

DOM 對(duì)象轉(zhuǎn)化為 jQuery 對(duì)象

DOM 對(duì)象轉(zhuǎn)化為 jQuery 對(duì)象很簡單，只需要用 $() 將 DOM 對(duì)象包裝起來就好。var cr = document.getElmentByID("cr"); // DOM 對(duì)象 var $cr = $(cr) // 將 DOM 對(duì)象轉(zhuǎn)為 jQuery 對(duì)象復(fù)制代碼

解決 jQuery 和其他庫的沖突

之前遇到過類似的問題，是使用的插件需要較低版本的 jQuery（因?yàn)椴贿M(jìn)行維護(hù)了），然后和項(xiàng)目中使用的較高版本的 jQuery 不兼容，所以在網(wǎng)上查到了一個(gè)項(xiàng)目中是可以使用兩個(gè)不同版本的 jQuery 的。

在 jQuery 庫中，幾乎所有的插件都被限制在它的命名空間里。通常，全局對(duì)象都被很好地儲(chǔ)存在 jQuery 的命名空間里。因此和其他庫一起使用時(shí)，不會(huì)引起沖突。

默認(rèn)情況下，jQuery 用 $ 作為自身的快捷方式。

jQuery 庫在其他庫之后導(dǎo)入

在其他庫和 jQuery 庫都被加載完畢后，可以在任何時(shí)候調(diào)用 jQuery.noConflict()
函來將變量 $ 的控制權(quán)移交給其他 JavaScript 庫。

// 引入 其他 JS 庫// 引入 jQuery<script>jQuery.noConflict(); // 將變量 $ 的控制權(quán)移交給其他 JS 庫jQuery(function(){jQuery("p").click(function){alert( jQuery(this).text() );}})</script>復(fù)制代碼

也可以自定義一個(gè)快捷方式：

// 引入 其他 JS 庫// 引入 jQuery<script>$j.noConflict(); // 將變量 $ 的控制權(quán)移交給其他 JS 庫$j(function(){$j("p").click(function){alert( $j(this).text() );}})</script>復(fù)制代碼

如果你還想繼續(xù)使用 $ 而不管其他函數(shù)的 $() 方法，同時(shí)又不想與其他庫沖突，那么你可以

jQuery.noConflict(); // 將變量 $ 的控制權(quán)移交給其他 JS 庫(function( $ ){ // 定義匿名函數(shù)并設(shè)置形參 $$("p").click(function){alert( $(this).text() );};}(jQuery)); // 執(zhí)行匿名函數(shù)并設(shè)置形參 jQuery復(fù)制代碼

jQuery 庫在其他庫之前導(dǎo)入

如果 jQuery 庫在其他庫之前導(dǎo)入，那么就可以直接使用“jQuery”來做一些 jQuery 的工作，同時(shí)可以使用 $() 方法作為其他庫的快捷方式（也就是說不需要寫 jQuery.noConflict();）

jQuery 選擇器

基本選擇器

選擇器描述返回

#id	根據(jù)給定的 ID 匹配一個(gè)元素	單個(gè)元素
.class	根據(jù)給定的類名匹配一個(gè)元素	集合元素
element	根據(jù)給定的元素名匹配一個(gè)元素（相當(dāng)于 tagName ）	集合元素
*	匹配所有元素	集合元素
select1,select2,select3	將每一個(gè)選擇器匹配到的元素合并后一起返回	集合元素

層次選擇器

選擇器描述返回

ancestor descendant(空格)	選取 ancestor 元素里所有的 descendant（后代）元素	集合元素
parent > child	選取子元素	集合元素
prev + next	選取緊接在 prev 元素后面的 next 元素	集合元素
prev + siblings	選取 prev 元素之后的所有 siblings 元素	集合元素

過濾選擇器

選擇器描述返回

:first	選取第一個(gè)元素	單個(gè)元素
:last	選取最后一個(gè)元素	單個(gè)元素
:not(selector)	去除所有與給定選擇器匹配的元素	集合元素
:even	索引為偶數(shù)（索引從 0 開始）	集合元素
:odd	索引為奇數(shù)（索引從 0 開始）	集合元素
:eq(index)	索引等于 index 的元素（index 從 0 開始）	單個(gè)元素
:gt(index)	索引大于 index	集合元素
:lt(index)	索引小于 index	集合元素
:header(index)	所有的標(biāo)題元素 h1、h2、h3 等	集合元素
:animated	正在執(zhí)行動(dòng)畫的所有元素	集合元素
:focus	當(dāng)前獲取焦點(diǎn)的元素	集合元素

內(nèi)容過濾選擇器

選擇器描述返回

:contains(text)	文本中含有 “text” 的元素	集合元素
:empty	不包含子元素或者文本的空元素	集合元素
:has(selector)	含有選擇器所匹配的元素	集合元素
:parent	含有子元素或文本	集合元素
:hidden	選取所有不可見的元素	集合元素
:visible	選取所有可見的元素	集合元素

屬性過濾選擇器

選擇器描述返回示例

[attribute]	擁有此屬性的元素	集合元素	$("div[id]") 選擇所有擁有 id 屬性的 div
[attribute=value]	屬性的值為 value 的元素	集合元素	$("div[tittle = test]") 屬性 title 為 test 的 div
[attribute!=value]	屬性的值不為 value 的元素	集合元素	$("div[tittle != test]") 屬性 title 不為 test 的 div
[attribute^=value]	屬性的值以 value 開始的元素	集合元素	$("div[tittle^ = test]") 屬性 title 以 test 開始的 div
[attribute$=value]	屬性的值為 value 結(jié)束的元素	集合元素
[attribute*=value]	屬性的值含有 value 的元素	集合元素
[attribute\	=value]	屬性的值等于或者以該字符串為前綴（該字符后跟 - 字符）的元素 value 的元素	集合元素
[attribute~=value]	屬性的用空格分隔的值中包含一個(gè)給定的 value	集合元素
[attribute][attrubute][attribute]	用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器，滿足多個(gè)條件，每選擇一次，縮小一次范圍	集合元素

子元素過濾選擇器

選擇器描述返回

:nth-child(index/even/odd/equation)	選取每個(gè)父元素下的第 index 個(gè)子元素或者奇偶元素（index 從 1 開始）	集合元素
:first-child	選取每個(gè)父元素第一個(gè)子元素	集合元素
:last-child	選取每個(gè)父元素最后一個(gè)子元素	集合元素
:only-child	如果某個(gè)元素是它父元素中唯一的子元素，則會(huì)被匹配	集合元素

表單過濾選擇器

選擇器描述返回

:enabled	選取所有可用元素	集合元素
:disable	選取所有不可用元素	集合元素
:checked	選取所有被選中元素（復(fù)選框、單選框）	集合元素
:selected	選取所有被選中元素（下拉列表）	集合元素

表單選擇器

選擇器描述返回

:input	選取所有的 <input> <textarea> <select> <button>	集合元素
:text	選擇所有單行文本框	集合元素
:password	選擇所有的密碼框	集合元素
:radio	選擇所有的單選框	集合元素
:checkout	選擇所有的多選框	集合元素
:submit	選擇所有的提交按鈕	集合元素
:image	選擇所有的圖像按鈕	集合元素
:reset	選擇所有的重置按鈕	集合元素
:button	選擇所有的按鈕	集合元素
:file	選擇所有的上傳域	集合元素
:hidden	選擇所有的不可見元素	集合元素

jQuery 選擇器完善的處理機(jī)制

• 如果元素不存在時(shí)，JS 不會(huì)保存阻塞其他代碼的運(yùn)行。
• $(#ID) 或者其他選擇器獲取的永遠(yuǎn)是對(duì)象，即使網(wǎng)頁上沒有此元素。使用 jQuery 檢查某個(gè)元素是否存在要不能使用

if( $(#tt) ){dosomething}復(fù)制代碼

而是根據(jù)元素是否有長度判斷：

if( $(#tt).length > 0 ){dosomething}復(fù)制代碼

或者轉(zhuǎn)化為 DOM 元素來判斷

if( $(#tt)[0] ){dosomething}復(fù)制代碼

jQuery 中的 DOM 操作

HTML DOM 操作

插入節(jié)點(diǎn)

方法描述示例

append()	向每個(gè)匹配的元素內(nèi)部追加內(nèi)容	$(A).append(B) 將 B 追加到 A 中
appendTo()	將所有匹配的元素追加到指定元素中	$(B).appendTo(A) 將 B 追加到 A 中
prepend()	向每個(gè)匹配的元素內(nèi)部前置內(nèi)容
after()	在每個(gè)匹配的元素之后插入內(nèi)容	$(A).after(B) 將 B 插入到 A 后面
insertAfter()	將所有匹配的元素插入到指定元素的后面	$(B).insert After(A) 將 B 插入到 A 后
before()	在每個(gè)匹配的元素之前插入內(nèi)容	$(A).before(B) 將 B 插入在 A 的前面
insertBefore()	將所有匹配的元素插入到指定元素的前面	$(B).insertBefore(A) 將 B 插入在 A 的前面

刪除節(jié)點(diǎn)

remove()

從 DOM 中刪除所有匹配的元素，傳入的參數(shù)用于根據(jù) jQuery 表達(dá)式來刪選元素

$("ul li:eq(1)").remove(); // 獲取第二個(gè) <li> 元素節(jié)點(diǎn)后，將它從網(wǎng)頁中刪除$li.appendTo("ul"); // 把剛才刪除的元素添加到 <ul> 元素中復(fù)制代碼

這個(gè)方法的返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用，因此可以將其保存在一個(gè)變量中，以后還可以使用。

detach()

detach() 和 delete() 一樣，也是從 DOM 中去掉所有匹配的元素，但是兩者的區(qū)別是，這個(gè)方法不會(huì)把匹配的元素從 jQuery 對(duì)象中刪除，去掉的元素的所有綁定的事件、附加的數(shù)據(jù)等都會(huì)保留下來。

empty()

清空元素中所有的后代節(jié)點(diǎn)。注意是清空元素內(nèi)的所有節(jié)點(diǎn)，并不清除選中的元素

復(fù)制節(jié)點(diǎn)

復(fù)制節(jié)點(diǎn)可以使用 clone() 方法

$("ul li").click(function(){$(this).clone().appendTo("ul");})復(fù)制代碼

但是這樣復(fù)制的節(jié)點(diǎn)，被復(fù)制的新元素并不具有任何行為，如果需要新元素也具有相同的行為，那么就需要在 clone() 方法中傳入?yún)?shù) true

$("ul li").click(function(){$(this).clone(true).appendTo("ul");})復(fù)制代碼

其他方法

方法名描述

replaceWith()	將所有匹配的元素都替換成 HTML 或者 DOM 元素，綁定的事件將會(huì)消失
replaceAll()	和 replaceWith() 相反
wrap()	將所有的元素單獨(dú)包裹
wrapAll()	將所有匹配的元素用一個(gè)元素來包裹 如果被包裹的元素中間有其他的元素，那么其他的元素會(huì)被放到包裹元素之后
wrapInner()	將每一個(gè)匹配的元素的字內(nèi)容（包括文本節(jié)點(diǎn)）用其他結(jié)構(gòu)化的標(biāo)記包裹起來
attr()	獲取和設(shè)置元素屬性，傳遞一個(gè)參數(shù)為獲取元素屬性，傳遞兩個(gè)參數(shù)為設(shè)置元素屬性
removeAttr()	刪除文檔中某個(gè)元素的特定屬性
addClass()	追加樣式
removeClass()	移除樣式 如果參數(shù)為空，則清空該元素的所有 class
toggleClass()	切換樣式 如果類名存在則刪除，如果類名不存在則添加
hasClass()	是否含有某個(gè)樣式，返回布爾值
html()	讀取或者設(shè)置某個(gè)元素中的 HTML 內(nèi)容 傳遞一個(gè)參數(shù)為獲取 HTML 中的內(nèi)容，傳遞兩個(gè)參數(shù)為設(shè)置 HTML 的內(nèi)容
text()	讀取或者設(shè)置某個(gè)元素中的文本內(nèi)容 傳遞一個(gè)參數(shù)為獲取文本內(nèi)容，傳遞兩個(gè)參數(shù)為設(shè)置文本內(nèi)容
val()	讀取或設(shè)置元素的值 在用于表單元素時(shí)，可以設(shè)置相應(yīng)的元素被選中
children()	獲得匹配元素的子元素的集合 （子元素非后代元素）
next()	獲得匹配元素后面緊鄰的同輩元素
prev()	獲得匹配元素前面緊鄰的同輩元素
siblings()	獲得匹配元素前后面緊鄰的同輩元
closest()	取得最近的匹配元素
parent()	獲得集合中每個(gè)元素的父級(jí)元素
parents()	獲得集合中每個(gè)元素的祖先元素
closest()	從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素

CSS DOM 操作

方法描述

css()	讀取和設(shè)置 style 對(duì)象的各種屬性（如果值是數(shù)字，將會(huì)自動(dòng)轉(zhuǎn)化為像素值，樣式名不帶

“”樣式使用駝峰寫法）
offset() | 獲取元素在當(dāng)前視窗的相對(duì)偏移，返回的對(duì)象包含兩個(gè)屬性 top、left
position() | 獲取元素相對(duì)于最近一個(gè) position 樣式屬性設(shè)置為 relation 或者 absolute 的父節(jié)點(diǎn)的相對(duì)偏移
scrollTop() 、scrollLeft() | 獲取元素滾動(dòng)條距離頂端的距離和距離左側(cè)的距離

JS 中的事件

事件綁定

bind(type [, date ], fn )復(fù)制代碼

第一個(gè)參數(shù)是事件類型，類型包括：blur focus load resize scroll unload cliock dblclick mousedown mouseup mouseover mouseout mouseenter mouseleave change select submit keyup keydown keypress keyup error

第二個(gè)參數(shù)為可選參數(shù)，作為 event.data 屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象

第三個(gè)參數(shù)是用來綁定的處理函數(shù)

jQuery 的事件處理函數(shù)比 JS 原生的事件處理函數(shù)少了個(gè) on

像 click mouseover mouseout 這類事件，可以直接簡寫

合成事件

jQuery 中有兩個(gè)合成事件，hover() toggle()

hover()

hover(enter,leave)復(fù)制代碼

hover(fn1,fn2,...fnN) 方法用于模擬光標(biāo)懸停事件，當(dāng)光標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)第一個(gè)函數(shù)（enter），當(dāng)光標(biāo)移出這個(gè)元素時(shí)會(huì)觸發(fā)第二個(gè)函數(shù)（leave）

toggle()

toggle() 方法用于模擬鼠標(biāo)的連續(xù)點(diǎn)擊事件，第一次單擊元素，觸發(fā)第一個(gè)函數(shù)，第二次單擊同一個(gè)元素，會(huì)觸發(fā)第二個(gè)函數(shù)，如果有更多的函數(shù)，則依次觸發(fā)，直到最后一個(gè)。

事件冒泡

假設(shè)網(wǎng)頁上有兩個(gè)元素，其中一個(gè)嵌套在另一個(gè)元素里面，并且都被綁定了 click 事件。同時(shí) <body> 元素上也綁定了 click 事件，這樣的話，點(diǎn)擊最內(nèi)層的元素，會(huì)觸發(fā)三次 click 事件。這是因?yàn)?JavaScript 的事件冒泡機(jī)制。

在 jQuery 中，提供了 stopPropagation() 方法來停止冒泡。

阻止默認(rèn)行為

網(wǎng)頁中有自己的默認(rèn)行為，例如單擊超鏈接會(huì)跳轉(zhuǎn)，單擊“提交”按鈕后表單會(huì)提交，有時(shí)需要阻止默認(rèn)行為。

jQuery 提供了 preventDefault() 方法來阻止元素的默認(rèn)行為。

事件對(duì)象的屬性

方法名稱描述

event.type	獲取到事件的類型
event.preventDefault()	阻止默認(rèn)的事件行為
stopPropagation()	阻止事件冒泡
event.tagent()	獲取到觸發(fā)事件的元素
event.relatedTarget()	mousover 和 mouseout 所發(fā)生的元素
event.pageX event.pageY	獲取到光標(biāo)相對(duì)于頁面的 x 坐標(biāo)和 y 坐標(biāo)
event.which()	鼠標(biāo)單擊事件中獲取到的左、中、右鍵，在鍵盤事件中獲取鍵盤的按鍵
event.metaKey()	為鍵盤事件獲取 ctrl 鍵

移除事件

unbind([type],[data])復(fù)制代碼

第一個(gè)參數(shù)是事件類型，第二個(gè)參數(shù)是要移除的函數(shù)。
如果沒有參數(shù)，則刪除所有的綁定事件

one() 方法

對(duì)于只要觸發(fā)一次，隨后要立即解除綁定的情況，jQuery 提供了 one() 方法。
當(dāng)處理函數(shù)觸發(fā)一次后，立即被刪除。

模擬操作

trigger() 方法完成模擬操作，

trigger(type,[data])復(fù)制代碼

第一個(gè)參數(shù)是要觸發(fā)的事件類型，第二個(gè)參數(shù)是要傳遞給事件處理函數(shù)的附加參數(shù)，可以通過傳遞的參數(shù)來區(qū)分這次事件是代碼觸發(fā)還是用戶觸發(fā)的

jQuery 中的動(dòng)畫

方法名說明

hide() show()	同時(shí)修改多個(gè)樣式屬性，即高度、寬度和不透明度
fadeIn() fadeOut()	只改變不透明度
slideUp() slideDown()	只改變高度
toggle()	用來代替 hide() 和 show() 方法
slideToggle()	用來代替 slideUp() 和 slideDown()
fadeToggle()	用來代替 fadeIn() 和 fadeOut()
animate()	屬于自定義動(dòng)畫的方法

jQuery 中的任何動(dòng)畫效果，都可以指定三種速度參數(shù)，slow、normal、fast，對(duì)應(yīng)的時(shí)間長度分別是 0.6 秒，0.4 秒和 0.2 秒，也可以傳入?yún)?shù)，傳入數(shù)字作為參數(shù)不需要加引號(hào)，使用關(guān)鍵字需要加引號(hào)。

動(dòng)畫隊(duì)列

當(dāng)一個(gè) animate() 方法中應(yīng)用多個(gè)屬性時(shí)，動(dòng)畫是同時(shí)發(fā)生的。
當(dāng)以鏈?zhǔn)椒椒ㄕ{(diào)用時(shí)，動(dòng)畫是按順序發(fā)生（除非 queue 選項(xiàng)為 false）。
默認(rèn)情況下，動(dòng)畫都是同時(shí)發(fā)生的。
當(dāng)以回調(diào)的形式應(yīng)用動(dòng)畫方式時(shí)，按照回調(diào)順序發(fā)生。

停止動(dòng)畫

stop([clearQueue,gotoEnd])復(fù)制代碼

clearQueue 是否要清空未執(zhí)行的動(dòng)畫隊(duì)列
gotoEnd 是否直接跳轉(zhuǎn)到末狀態(tài)

判斷元素是否處于動(dòng)畫狀態(tài)

要始終避免動(dòng)畫累計(jì)而導(dǎo)致的動(dòng)畫與用戶行為不一樣的情況。當(dāng)用戶快速在某個(gè)元素上執(zhí)行 animate() 時(shí)，就會(huì)出現(xiàn)動(dòng)畫累加。

解決方法是判斷元素是否處于動(dòng)畫狀態(tài)，如果用戶不處于動(dòng)畫狀態(tài)，才為元素添加新的動(dòng)畫，否則不添加。

延遲動(dòng)畫

在動(dòng)畫執(zhí)行的過程中，如果想對(duì)動(dòng)畫進(jìn)行延遲操作，那么可以使用 delay() 方法。

jQuery 與 Ajax

Ajax 的優(yōu)勢

• 不需要插件的支持
• 優(yōu)秀的用戶體驗(yàn)
• 提高 Web 程序的性能
• 減輕服務(wù)器和帶寬的負(fù)擔(dān)

Ajax 的不足

• 瀏覽器對(duì) XMLHttpRequest 對(duì)象的支持度不足
• 破壞瀏覽器前進(jìn)后退按鈕的正常功能
• 對(duì)搜索引擎的支持程度不夠
• 開發(fā)和調(diào)試工具的缺乏

使用原生 JS 寫一個(gè) Ajax

定義一個(gè)函數(shù)，通過該函數(shù)來獲取異步信息

function Ajax(){ // 定義一個(gè)函數(shù)，通過該函數(shù)來獲取異步信息}復(fù)制代碼

聲明一個(gè)空對(duì)象來裝入 XMLHttpRequest 對(duì)象var xmlHttpReq = null; // 聲明一個(gè)空對(duì)象來裝入 XMLHttpRequest 對(duì)象復(fù)制代碼

實(shí)例化一個(gè) XMLHttpRequest 對(duì)象 if(window.XMLHttpRequest){xmlHttpReq = new XMLHttpRequest(); // 實(shí)例化一個(gè) XMLHttpRequest 對(duì)象}復(fù)制代碼

使用 open() 方法初始化 XMLHttpRequest 對(duì)象，指定 HTTP 方法和要使用的服務(wù)器 URL;xmlHttpReq.open("GET","test.php",true); // 調(diào)用 open() 方法并采用異步方式復(fù)制代碼

使用 onreadystatechange 屬性來注冊(cè)該回調(diào)事件處理器，當(dāng) readystatus 狀態(tài)改變時(shí)，會(huì)激發(fā) onreadystatechange 事件然后調(diào)用回調(diào)函數(shù)。xmlHttpReq.onreadystatechange = RequestCallBack;復(fù)制代碼

使用 send() 方法發(fā)送請(qǐng)求，使用 GET 方式可以不指定參數(shù)或者使用 null 參數(shù)xmlHttpReq.send(null);復(fù)制代碼

當(dāng)請(qǐng)求狀態(tài)改變時(shí)，XMLHttpRequest 對(duì)象調(diào)用 onreadystatechange 屬性注冊(cè)的事件處理器，在處理響應(yīng)之前，事件處理器應(yīng)該首先檢查 readyStatus 的值和 HTTP 狀態(tài)。當(dāng)請(qǐng)求完成加載（readyStatus == 4）并且響應(yīng)已經(jīng)成功（HTTP 狀態(tài)值為 200），就可以處理響應(yīng)內(nèi)容； function RequestCallBack() {if(xmlHttpReq.readyState == 4){if(xmlHttpReq.status == 200){document.getElementById("resText").innerHTML = xmlHttpReq.responseText;}}}復(fù)制代碼

jQuery 中的 Ajax

jQuery 對(duì) Ajax 操作進(jìn)行封裝，在 jQuery 中，$.ajax() 是最底層的方法，第二層是 load()、$.get()、$.post()、$.grtJSON()。

load() 方法

載入 HTML 文檔

load( url [,data] [,callback])復(fù)制代碼參數(shù)列表類型說明

url	String	請(qǐng)求 HTML 頁面的 URL 地址
data	Object	發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)
callback	Function	請(qǐng)求完成時(shí)的回調(diào)函數(shù)，無論請(qǐng)求失敗或成功

比如說我們要將一個(gè)頁面追加到另一個(gè)頁面，被追加的文件為 inner.html，內(nèi)容如下

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><p>測試</p></body> </html>復(fù)制代碼

內(nèi)容只有一個(gè) <p> 標(biāo)簽，然后我們創(chuàng)建另一個(gè)頁面，用來觸發(fā) Ajax 事件，并用來顯示追加的 HTML，頁面內(nèi)容如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../jQuery.min.js"></script> </head> <body> <input type="button" id="send" value="獲取"> <div id="resText"></div><script>$(function () {$('#send').click(function () {$('#resText').load('inner.html')})}) </script> </body> </html>復(fù)制代碼

當(dāng)，點(diǎn)擊按鈕時(shí)，頁面如下：

load() 方法

載入部分 HTML 文檔

當(dāng)前我們也可能載入部分的 HTML 文檔，例如只需要載入 inner.html 中的 test 類，那么：

$('#resText').load('inner.html .test')復(fù)制代碼

傳遞方式，如果沒有設(shè)置傳遞方式，那么使用 GET 方式，如果有傳遞參數(shù)，那么為 POST 方式。

回調(diào)

$('#resText').load('inner.html .test', functiong(responseText,textStatus,XMLHttpRequest){// responseText : 請(qǐng)求返回的內(nèi)容// textStatus : success、error、notmodified、timeout// XMLHttpRequest : XMLHttpRequest 對(duì)象})復(fù)制代碼

$.get() 方法

$.get() 方法使用 GET 方式來進(jìn)行異步請(qǐng)求

$.get( url [, data] [, callback] [, type])復(fù)制代碼參數(shù)名稱類型說明

url	String	請(qǐng)求 HTML 頁的 URL 地址
data（可選）	Object	發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)會(huì)作為 QueryString 附加到請(qǐng)求 URL 中
callback（可選）	Function	載入成功時(shí)回調(diào)函數(shù)（只有當(dāng) Reaponse 的返回狀態(tài)是 success 才調(diào)用）自動(dòng)將請(qǐng)求的結(jié)果和狀態(tài)傳遞給方法
type（可選）	String	服務(wù)器端返回內(nèi)容的格式，包括 xml、html、script、json、text、_default

$.post() 方法

$.post() 方法使用 GET 方式來進(jìn)行異步請(qǐng)求

$.post( url [, data] [, callback] [, type])復(fù)制代碼

GET 方式和 POST 請(qǐng)求方式的區(qū)別

• GET 請(qǐng)求將參數(shù)跟在 URL 后進(jìn)行傳遞，POST 則作為 HTTP 消息的實(shí)體內(nèi)容發(fā)送給 web 服務(wù)器，
• GET 方式通常傳遞的數(shù)據(jù)不超過 2kb，POST 方式理論上沒有限制
• GET 方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來，

$.ajax() 方法

$.ajax() 方法是 jQuery 最底層的 Ajax 實(shí)現(xiàn)，

$.ajax(option)復(fù)制代碼參數(shù)名稱類型說明

url	String	發(fā)送請(qǐng)求的 URL（默認(rèn)為當(dāng)前頁面）
type	String	請(qǐng)求方式，默認(rèn)為 GET
timeout	Number	設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）
data	Object 或 String	發(fā)送到服務(wù)器的數(shù)據(jù)
dataTpye	String	預(yù)期服務(wù)器返回的數(shù)據(jù)類型
beforeSend	Function	發(fā)送請(qǐng)求前可以修改 XMLHttpResponse 對(duì)象的函數(shù)
complete	Function	請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)（請(qǐng)求失敗或者成功均調(diào)用）
success	Function	請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)
error	Function	請(qǐng)求失敗后調(diào)用的回調(diào)函數(shù)
global	Function	默認(rèn)為 true。是否觸發(fā)全局 Ajax 事件

序列化元素

serialize() 方法能夠?qū)?DOM 元素內(nèi)容序列化為字符串，用于 Ajax 請(qǐng)求。即使在表單中再增加字段，腳本仍然能夠使用。并且不需要做其他多余工作。

serializeArray() 方法，該方法不是返回字符串，是將 DOM 序列化后，返回 JSON 格式的數(shù)據(jù)。

$.param() 方法，用來對(duì)一個(gè)數(shù)組或?qū)ο蟀凑?key/value 進(jìn)行序列化。

var obj = {a:1,b:2,c:3};var k = $.param(obj);alert(k); // 輸出 a=1&b=2&c=3復(fù)制代碼

jQuery 性能優(yōu)化

使用合適的選擇器

$("#id") id 選擇器無疑是最佳提高性能的方式。因?yàn)?jQuery 底層直接調(diào)用本地方法 document.getElementById()，直接通過 id 返回對(duì)應(yīng)的元素可以有效的縮小你定位的 DOM 元素，建議從最近的 ID 元素開始往下搜索。

$("p")、$("div")、$("input") 標(biāo)簽選擇器是性能優(yōu)化第二選擇，因?yàn)?jQuery 也是直接調(diào)用 JS 原生方法

$(".class") 這是 jQuery 封裝的函數(shù)，ie9+ 以上是使用 JS 的原生方法，ie9 一下是使用 DOM 搜索方式來實(shí)現(xiàn)

$("[attribute=value]")：利用屬性來定位 DOM 元素，大部分都是使用 DOM 搜索方式來達(dá)到效果。所以性能并不是很理想

$(":hidden")：這和上面利用屬性類似，并且 jQuery 需要搜索每一個(gè)元素來定位這個(gè)選擇器，所以盡量不要使用。

緩存對(duì)象

我們可以將經(jīng)常用的對(duì)象使用變量緩存起來，因?yàn)?jQuery 會(huì)在創(chuàng)建每一個(gè)選擇器的過程中，查找 DOM。
不要讓相同的選擇器在你的代碼中出現(xiàn)多次。

循環(huán)時(shí)的 DOM 操作

在一些循環(huán)時(shí)，例如 for()、while()、$.each() 使用這些方法處理 DOM 元素時(shí)，要盡可能的減少操作 DOM，可以使用變量將來儲(chǔ)存元素，最后一次性將生產(chǎn)的 DOM 插入或者刪除。

數(shù)組方式使用 jQuery 對(duì)象

使用 jQuery 選擇器獲得的結(jié)果是一個(gè) jQuery 對(duì)象，然而，jQuery 類庫會(huì)讓你感覺你正在使用一個(gè)定義了索引和長度的數(shù)組。在性能方面，建議使用 for 或者 while 循環(huán)來處理，而不是 $.each()

事件代理

每一個(gè) JavaScript 事件（例如：click、mouseover 等）都會(huì)冒泡到父節(jié)點(diǎn)，當(dāng)我們需要給多個(gè)元素調(diào)用同個(gè)函數(shù)時(shí)會(huì)很有用。

比如，我們要單擊表格的行使得改行背景顏色改變

$("myTable td").click(function(){$(this).css("background",'red')})復(fù)制代碼

如果你是這樣寫的話，那么恭喜你，提供了一個(gè)錯(cuò)誤的示例，??。這樣的弊端是，假使總共有 100 個(gè) td，那么在使用以上方式的時(shí)候，你綁定了 100 個(gè)事件，天辣，是不是很恐怖。

正確的姿勢是，只需要向他們的父節(jié)點(diǎn)綁定一次事件，然后通過 event.target 獲取到當(dāng)前點(diǎn)擊的元素。

$("myTable").click(function(){var $clicked = $(e.target); // 捕捉到觸發(fā)的目標(biāo)元素$clicked.css("background",'red');})復(fù)制代碼

也可以這樣寫

$("myTable td").on('click','td', function(){$(this).css("background",'red')})復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的读书笔记：锋利的JQuery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。