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

前一段在當當和京東上趁著打折買了十幾本編程的書，勵志要全部看完！在此立一個 flag，最近也是一直在讀書，發現書中更能深入的學到系統的知識。并且如果再能將書中的內容用自己的語言表達出來那就更好了。

書名：《鋒利的 jQuery》
推薦指數：☆☆☆

鋒利的jQuery

簡介：這本書適合初學 JS 的童靴看~內容比較基礎，我是想看 JQ 源碼，然后發現和源碼沒有半毛錢關系，只是比較全的介紹 jQuery 的用法。對沒有系統看過 jQuery 用法的，或者 js 的初學者還是有一定幫助的，但是如果你有一定的 js 基礎，還是不要浪費時間了。其實 jQuery 好多的用法我們并不清楚，只是將 jQuery 當做方便的元素選擇器來使用，其實 jQuery 能做的遠比這多得多?？赐瓯酒恼?#xff0c;jQuery 的功能你就了解的差不多了。

jQuery 的優勢

• 強大的選擇器
• 出色的 DOM 操作的封裝
• 可靠的事件處理機制
• 完善的 Ajax
• 不污染頂級變量
• 出色的瀏覽器兼容性
• 鏈式操作方式
• 隱式迭代
• 行為層與結構層分離
• 豐富的插件支持
• 完善的文檔
• 開源

不污染頂級變量

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

鏈式操作方式

jQuery 的鏈式操作方式：對放生在同一個 jQuery 對象上的一組動作，可以直接連寫而無需重復獲取對象。

隱式迭代

當用 jQuery 找到帶有 “.myClass” 類的全部元素，然后隱藏它們時，無需循環遍歷每一個返回的元素。jQuery 里的方法都被設計成自動操作對象集合，而不是單獨的對象

jQuery 代碼的編寫

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

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

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

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

jQuery 的鏈式操作風格

jQuery 的鏈式操作方式：對放生在同一個 jQuery 對象上的一組動作，可以直接連寫而無需重復獲取對象。
例如：

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

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

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

jQuery 對象和 DOM 對象

DOM 對象就是 DOM 樹種的節點，通過原生 JavaScript 的 getElementsByTagName 或者 getElementsByTagId 等獲取，DOM 對象可以使用 JavaScript 中的方法。

jQuery 對象是通過 jQuery 包裝 DOM 過后的對象。

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

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

jQuery 對象和 DOM 對象相互轉換

為了能更好的區分哪些是 jQuery 哪些是 DOM 對象，我們約定俗成使用 jQuery 獲取的對象我們在變量前面加上 $ 符號。

jQuery 對象轉化為 DOM 對象

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

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

DOM 對象轉化為 jQuery 對象

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

解決 jQuery 和其他庫的沖突

之前遇到過類似的問題，是使用的插件需要較低版本的 jQuery（因為不進行維護了），然后和項目中使用的較高版本的 jQuery 不兼容，所以在網上查到了一個項目中是可以使用兩個不同版本的 jQuery 的。

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

默認情況下，jQuery 用 $ 作為自身的快捷方式。

jQuery 庫在其他庫之后導入

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

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

也可以自定義一個快捷方式：

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

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

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

jQuery 庫在其他庫之前導入

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

jQuery 選擇器

基本選擇器

選擇器描述返回

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

層次選擇器

選擇器描述返回

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

過濾選擇器

選擇器描述返回

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

內容過濾選擇器

選擇器描述返回

: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 結束的元素	集合元素
[attribute*=value]	屬性的值含有 value 的元素	集合元素
[attribute\	=value]	屬性的值等于或者以該字符串為前綴（該字符后跟 - 字符）的元素 value 的元素	集合元素
[attribute~=value]	屬性的用空格分隔的值中包含一個給定的 value	集合元素
[attribute][attrubute][attribute]	用屬性選擇器合并成一個復合屬性選擇器，滿足多個條件，每選擇一次，縮小一次范圍	集合元素

子元素過濾選擇器

選擇器描述返回

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

表單過濾選擇器

選擇器描述返回

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

表單選擇器

選擇器描述返回

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

jQuery 選擇器完善的處理機制

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

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

而是根據元素是否有長度判斷：

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

或者轉化為 DOM 元素來判斷

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

jQuery 中的 DOM 操作

HTML DOM 操作

插入節點

方法描述示例

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

刪除節點

remove()

從 DOM 中刪除所有匹配的元素，傳入的參數用于根據 jQuery 表達式來刪選元素

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

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

detach()

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

empty()

清空元素中所有的后代節點。注意是清空元素內的所有節點，并不清除選中的元素

復制節點

復制節點可以使用 clone() 方法

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

但是這樣復制的節點，被復制的新元素并不具有任何行為，如果需要新元素也具有相同的行為，那么就需要在 clone() 方法中傳入參數 true

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

其他方法

方法名描述

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

CSS DOM 操作

方法描述

css()	讀取和設置 style 對象的各種屬性（如果值是數字，將會自動轉化為像素值，樣式名不帶

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

JS 中的事件

事件綁定

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

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

第二個參數為可選參數，作為 event.data 屬性值傳遞給事件對象的額外數據對象

第三個參數是用來綁定的處理函數

jQuery 的事件處理函數比 JS 原生的事件處理函數少了個 on

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

合成事件

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

hover()

hover(enter,leave)復制代碼

hover(fn1,fn2,...fnN) 方法用于模擬光標懸停事件，當光標移動到元素上時，會觸發第一個函數（enter），當光標移出這個元素時會觸發第二個函數（leave）

toggle()

toggle() 方法用于模擬鼠標的連續點擊事件，第一次單擊元素，觸發第一個函數，第二次單擊同一個元素，會觸發第二個函數，如果有更多的函數，則依次觸發，直到最后一個。

事件冒泡

假設網頁上有兩個元素，其中一個嵌套在另一個元素里面，并且都被綁定了 click 事件。同時 <body> 元素上也綁定了 click 事件，這樣的話，點擊最內層的元素，會觸發三次 click 事件。這是因為 JavaScript 的事件冒泡機制。

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

阻止默認行為

網頁中有自己的默認行為，例如單擊超鏈接會跳轉，單擊“提交”按鈕后表單會提交，有時需要阻止默認行為。

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

事件對象的屬性

方法名稱描述

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

移除事件

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

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

one() 方法

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

模擬操作

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

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

第一個參數是要觸發的事件類型，第二個參數是要傳遞給事件處理函數的附加參數，可以通過傳遞的參數來區分這次事件是代碼觸發還是用戶觸發的

jQuery 中的動畫

方法名說明

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

jQuery 中的任何動畫效果，都可以指定三種速度參數，slow、normal、fast，對應的時間長度分別是 0.6 秒，0.4 秒和 0.2 秒，也可以傳入參數，傳入數字作為參數不需要加引號，使用關鍵字需要加引號。

動畫隊列

當一個 animate() 方法中應用多個屬性時，動畫是同時發生的。
當以鏈式方法調用時，動畫是按順序發生（除非 queue 選項為 false）。
默認情況下，動畫都是同時發生的。
當以回調的形式應用動畫方式時，按照回調順序發生。

停止動畫

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

clearQueue 是否要清空未執行的動畫隊列
gotoEnd 是否直接跳轉到末狀態

判斷元素是否處于動畫狀態

要始終避免動畫累計而導致的動畫與用戶行為不一樣的情況。當用戶快速在某個元素上執行 animate() 時，就會出現動畫累加。

解決方法是判斷元素是否處于動畫狀態，如果用戶不處于動畫狀態，才為元素添加新的動畫，否則不添加。

延遲動畫

在動畫執行的過程中，如果想對動畫進行延遲操作，那么可以使用 delay() 方法。

jQuery 與 Ajax

Ajax 的優勢

• 不需要插件的支持
• 優秀的用戶體驗
• 提高 Web 程序的性能
• 減輕服務器和帶寬的負擔

Ajax 的不足

• 瀏覽器對 XMLHttpRequest 對象的支持度不足
• 破壞瀏覽器前進后退按鈕的正常功能
• 對搜索引擎的支持程度不夠
• 開發和調試工具的缺乏

使用原生 JS 寫一個 Ajax

定義一個函數，通過該函數來獲取異步信息

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

聲明一個空對象來裝入 XMLHttpRequest 對象var xmlHttpReq = null; // 聲明一個空對象來裝入 XMLHttpRequest 對象復制代碼

實例化一個 XMLHttpRequest 對象 if(window.XMLHttpRequest){xmlHttpReq = new XMLHttpRequest(); // 實例化一個 XMLHttpRequest 對象}復制代碼

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

使用 onreadystatechange 屬性來注冊該回調事件處理器，當 readystatus 狀態改變時，會激發 onreadystatechange 事件然后調用回調函數。xmlHttpReq.onreadystatechange = RequestCallBack;復制代碼

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

當請求狀態改變時，XMLHttpRequest 對象調用 onreadystatechange 屬性注冊的事件處理器，在處理響應之前，事件處理器應該首先檢查 readyStatus 的值和 HTTP 狀態。當請求完成加載（readyStatus == 4）并且響應已經成功（HTTP 狀態值為 200），就可以處理響應內容； function RequestCallBack() {if(xmlHttpReq.readyState == 4){if(xmlHttpReq.status == 200){document.getElementById("resText").innerHTML = xmlHttpReq.responseText;}}}復制代碼

jQuery 中的 Ajax

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

load() 方法

載入 HTML 文檔

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

url	String	請求 HTML 頁面的 URL 地址
data	Object	發送至服務器的 key/value 數據
callback	Function	請求完成時的回調函數，無論請求失敗或成功

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

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

內容只有一個 <p> 標簽，然后我們創建另一個頁面，用來觸發 Ajax 事件，并用來顯示追加的 HTML，頁面內容如下：

<!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>復制代碼

當，點擊按鈕時，頁面如下：

load() 方法

載入部分 HTML 文檔

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

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

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

回調

$('#resText').load('inner.html .test', functiong(responseText,textStatus,XMLHttpRequest){// responseText : 請求返回的內容// textStatus : success、error、notmodified、timeout// XMLHttpRequest : XMLHttpRequest 對象})復制代碼

$.get() 方法

$.get() 方法使用 GET 方式來進行異步請求

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

url	String	請求 HTML 頁的 URL 地址
data（可選）	Object	發送至服務器的 key/value 數據會作為 QueryString 附加到請求 URL 中
callback（可選）	Function	載入成功時回調函數（只有當 Reaponse 的返回狀態是 success 才調用）自動將請求的結果和狀態傳遞給方法
type（可選）	String	服務器端返回內容的格式，包括 xml、html、script、json、text、_default

$.post() 方法

$.post() 方法使用 GET 方式來進行異步請求

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

GET 方式和 POST 請求方式的區別

• GET 請求將參數跟在 URL 后進行傳遞，POST 則作為 HTTP 消息的實體內容發送給 web 服務器，
• GET 方式通常傳遞的數據不超過 2kb，POST 方式理論上沒有限制
• GET 方式請求的數據會被瀏覽器緩存起來，

$.ajax() 方法

$.ajax() 方法是 jQuery 最底層的 Ajax 實現，

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

url	String	發送請求的 URL（默認為當前頁面）
type	String	請求方式，默認為 GET
timeout	Number	設置請求超時時間（毫秒）
data	Object 或 String	發送到服務器的數據
dataTpye	String	預期服務器返回的數據類型
beforeSend	Function	發送請求前可以修改 XMLHttpResponse 對象的函數
complete	Function	請求完成后調用的回調函數（請求失敗或者成功均調用）
success	Function	請求成功后調用的回調函數
error	Function	請求失敗后調用的回調函數
global	Function	默認為 true。是否觸發全局 Ajax 事件

序列化元素

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

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

$.param() 方法，用來對一個數組或對象按照 key/value 進行序列化。

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

jQuery 性能優化

使用合適的選擇器

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

$("p")、$("div")、$("input") 標簽選擇器是性能優化第二選擇，因為 jQuery 也是直接調用 JS 原生方法

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

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

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

緩存對象

我們可以將經常用的對象使用變量緩存起來，因為 jQuery 會在創建每一個選擇器的過程中，查找 DOM。
不要讓相同的選擇器在你的代碼中出現多次。

循環時的 DOM 操作

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

數組方式使用 jQuery 對象

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

事件代理

每一個 JavaScript 事件（例如：click、mouseover 等）都會冒泡到父節點，當我們需要給多個元素調用同個函數時會很有用。

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

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

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

正確的姿勢是，只需要向他們的父節點綁定一次事件，然后通過 event.target 獲取到當前點擊的元素。

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

也可以這樣寫

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。