【讀書筆記】鋒利的 jQuery

02-02

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

本文首發於我的個人網站： http://cherryblog.site/
本文作者： Cherry
本文鏈接： http://cherryblog.site/sharp-jquery.html

版權聲明： 本博客所有文章除特別聲明外，均採用 CC BY-NC-SA 3.0 許可協議。轉載請註明出處！！

書名：《鋒利的 jQuery》

簡介：這本書適合初學 JS 的童靴看~內容比較基礎，我是想看 JQ 源碼，然後發現和源碼沒有半毛錢關係，只是比較全的介紹 jQuery 的用法。對沒有系統看過 jQuery 用法的，或者 js 的初學者還是有一定幫助的，但是如果你有一定的 js 基礎，還是不要浪費時間了。其實 jQuery 好多的用法我們並不清楚，只是將 jQuery 當做方便的元素選擇器來使用，其實 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();n

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

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

jQuery 對象和 DOM 對象

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

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

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

$("#id").innerHTMLn $("#id").checkedn document.getElementById("id").html()n

jQuery 對象和 DOM 對象相互轉換

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

jQuery 對象轉化為 DOM 對象

[index] 方法，就是在 jQuery 對象後面加上索引，比如：

var $cr = $(#cr); // jQuery 對象n var cr = $cr[0]; // 將 jQuery 轉化為 DOM 對象n alert( cr.checked ); // 檢查是否轉化成功n

get(index) 方法

var $cr = $(#cr); // jQuery 對象n var cr = $cr.get(0); // 將 jQuery 轉化為 DOM 對象n alert( cr.checked ); // 檢查是否轉化成功n

DOM 對象轉化為 jQuery 對象

DOM 對象轉化為 jQuery 對象很簡單，只需要用 $() 將 DOM 對象包裝起來就好。

var cr = document.getElmentByID("cr"); // DOM 對象n var $cr = $(cr) // 將 DOM 對象轉為 jQuery 對象n

解決 jQuery 和其他庫的衝突

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

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

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

jQuery 庫在其他庫之後導入

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

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

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

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

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

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

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) ){n dosomethingn }n

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

if( $(#tt).length > 0 ){n dosomethingn }n

或者轉化為 DOM 元素來判斷

if( $(#tt)[0] ){n dosomethingn }n

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> 元素節點後，將它從網頁中刪除n $li.appendTo("ul"); // 把剛才刪除的元素添加到 <ul> 元素中n

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

detach()

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

empty()

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

複製節點

複製節點可以使用 clone() 方法

$("ul li").click(function(){n $(this).clone().appendTo("ul");n })n

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

$("ul li").click(function(){n $(this).clone(true).appendTo("ul");n })n

其他方法

方法名描述replaceWith()將所有匹配的元素都替換成 HTML 或者 DOM 元素，綁定的事件將會消失replaceAll()和 replaceWith() 相反wrap()將所有的元素單獨包裹wrapAll()將所有匹配的元素用一個元素來包裹 如果被包裹的元素中間有其他的元素，那麼其他的元素會被放到包裹元素之後wrapInner()將每一個匹配的元素的字內容（包括文本節點）用其他結構化的標記包裹起來attr()獲取和設置元素屬性，傳遞一個參數為獲取元素屬性，傳遞兩個參數為設置元素屬性removeAttr()刪除文檔中某個元素的特定屬性addClass()追加樣式removeClass()移除樣式 如果參數為空，則清空該元素的所有 classtoggleClass()切換樣式如果類名存在則刪除，如果類名不存在則添加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 )n

第一個參數是事件類型，類型包括：blur focus load resize scroll unloadcliock dblclick mousedown mouseup mouseover mouseout mouseentermouseleave change select submit keyup keydown keypress keyup error
第二個參數為可選參數，作為 event.data 屬性值傳遞給事件對象的額外數據對象
第三個參數是用來綁定的處理函數

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

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

合成事件

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

hover()

hover(enter,leave)n

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])n

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

one() 方法

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

模擬操作

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

trigger(type,[data])n

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

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])n

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

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

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

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

延遲動畫

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

jQuery 與 Ajax

Ajax 的優勢

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

Ajax 的不足

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

使用原生 JS 寫一個 Ajax

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

function Ajax(){ // 定義一個函數，通過該函數來獲取非同步信息n n }n

聲明一個空對象來裝入 XMLHttpRequest 對象

var xmlHttpReq = null; // 聲明一個空對象來裝入 XMLHttpRequest 對象n

實例化一個 XMLHttpRequest 對象

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

使用 open() 方法初始化 XMLHttpRequest 對象，指定 HTTP 方法和要使用的伺服器 URL;

xmlHttpReq.open("GET","test.php",true); // 調用 open() 方法並採用非同步方式n

使用 onreadystatechange 屬性來註冊該回調事件處理器，當 readystatus 狀態改變時，會激發 onreadystatechange 事件然後調用回調函數。

xmlHttpReq.onreadystatechange = RequestCallBack;n

使用 send() 方法發送請求，使用 GET 方式可以不指定參數或者使用 null 參數

xmlHttpReq.send(null);n

當請求狀態改變時，XMLHttpRequest 對象調用 onreadystatechange 屬性註冊的事件處理器，在處理響應之前，事件處理器應該首先檢查 readyStatus 的值和 HTTP 狀態。當請求完成載入（readyStatus == 4）並且響應已經成功（HTTP 狀態值為 200），就可以處理響應內容；

function RequestCallBack() {n if(xmlHttpReq.readyState == 4){n if(xmlHttpReq.status == 200){n document.getElementById("resText").innerHTML = xmlHttpReq.responseText;n }n }n }n

jQuery 中的 Ajax

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

load() 方法

載入 HTML 文檔

load( url [,data] [,callback])n

參數列表類型說明urlString請求 HTML 頁面的 URL 地址dataObject發送至伺服器的 key/value 數據callbackFunction請求完成時的回調函數，無論請求失敗或成功

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

<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <title>Title</title>n</head>n<body>nn<p>測試</p>nn</body>n</html>n

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

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

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

載入部分 HTML 文檔

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

$(#resText).load(inner.html .test)n

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

回調

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

$.get() 方法

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

$.get( url [, data] [, callback] [, type])n

參數名稱類型說明urlString請求 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])n

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

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

$.ajax() 方法

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

$.ajax(option)n

參數名稱類型說明urlString發送請求的 URL（默認為當前頁面）typeString請求方式，默認為 GETtimeoutNumber設置請求超時時間（毫秒）dataObject 或 String發送到伺服器的數據dataTpyeString預期伺服器返回的數據類型beforeSendFunction發送請求前可以修改 XMLHttpResponse 對象的函數completeFunction請求完成後調用的回調函數（請求失敗或者成功均調用）successFunction請求成功後調用的回調函數errorFunction請求失敗後調用的回調函數globalFunction默認為 true。是否觸發全局 Ajax 事件

序列化元素

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

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

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

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

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(){n $(this).css("background",red)n })n

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

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

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

也可以這樣寫

$("myTable td").on(click,td, function(){n $(this).css("background",red)n })n