摘要：第二個(gè)參數(shù)是表示請(qǐng)求狀態(tài)的字符串，，，第三個(gè)參數(shù)是當(dāng)錯(cuò)誤發(fā)生時(shí)，具體的錯(cuò)誤描述，等請(qǐng)求結(jié)束無(wú)論成功或失敗時(shí)的一個(gè)回調(diào)函數(shù)。一個(gè)參數(shù)名，默認(rèn)是，一般用于指明回調(diào)函數(shù)名。的回調(diào)函數(shù)的執(zhí)行順序與它們的添加順序一致。

jQuery大部分功能需要根據(jù)文檔的DOM模型來(lái)工作，首先需要正確地解析到整個(gè)文檔的DOM模型結(jié)構(gòu)。使用jQuery需要在整個(gè)文檔被瀏覽器完全加載后才開(kāi)始進(jìn)行。

$(document).ready(function () {
    alert("Hello World!");
    $("p").click(function (event) {
        alert("Thanks for visiting!");
    })
});

$是在jQuery中使用的變量名，可以使用jQuery.noConflict()避免沖突，它的返回值就是jQuery對(duì)象。

jQuery.noConflict();
$j = jQuery.noConflict();

jQuery對(duì)象與DOM對(duì)象之間的轉(zhuǎn)換

使用$()得到的是一個(gè)jQuery對(duì)象。它封裝了很多 DOM 對(duì)象的操作，但是它和 DOM 對(duì)象之間是不同的。只有當(dāng)obj是一個(gè)DOM對(duì)象時(shí)才能使用obj.innerHTML；相應(yīng)地，如果是jQuery對(duì)象應(yīng)該使用 obj.html() 。

從 DOM 對(duì)象轉(zhuǎn)到 jQuery 對(duì)象： $(obj)

從 jQuery 對(duì)象轉(zhuǎn)到 DOM 對(duì)象： obj[0]

比較正規(guī)地從 jQuery 對(duì)象到 DOM 的轉(zhuǎn)換，是使用 jQuery 對(duì)象的 get() 方法：

$(function () {
    $("li").get();
    $("li").get(0);
    $("li").get(-1);
});

1. 常規(guī)選擇器

$("*") 選擇所有節(jié)點(diǎn)

$("#id") ID選擇器，注意其中的一些特殊字符，如.

$(".class") 類(lèi)選擇器

$("tag") 標(biāo)簽選擇器

$("子元素")

$("直接子元素")

:focus 獲取焦點(diǎn)元素

:first-child/:last-child 選擇第一個(gè)/最后一個(gè)元素

:first/:last 截取第一個(gè)/最后一個(gè)符合條件的元素

("pre+next") 直接兄弟元素

("pre~siblings") 兄弟元素

:nth-child() 索引選擇，索引從1開(kāi)始

:nth-child(odd)

:nth-child(even)

:nth-child(4n)

2. 屬性選擇器

[name~="value"] 屬性中包括某單詞

[name="value"] 屬性完全等于指定值

[name!="value"] 屬性不等于指定值

[name] 包括有指定屬性的元素

3. 控件選擇器

:checked 選擇所有被選中的元素

:selected 被選擇的元素

:disabled/:enabled 選擇被禁用/未禁用的元素

:hidden 隱藏元素，不僅是[type="hidden"]，還有displa:none

:visible 可見(jiàn)控件，visibility:hidden和opacity:0同樣被認(rèn)為是可見(jiàn)

:input :button :checkbox :file :image :password :radio :reset :submit :text 具體控件，圖像控件是[type="image"]

4. 其他選擇器

[name="value"] [name2="value2"] 多個(gè)AND條件

("selector1, selector2, selectorN") 多個(gè)OR條件

:not() 否定選擇

(":contains("text")") 包含有指定內(nèi)容的元素

:eq() :lt() :gt() :even :odd 列表索引選擇（不支持負(fù)數(shù)）

(":has(selector)") 符合條件的再次過(guò)濾

:header 選擇h1,h2,h3...標(biāo)題元素

:only-child 僅有一個(gè)子元素的元素

:empty 空元素，即無(wú)內(nèi)容也無(wú)元素

:parent 非空元素

1. 調(diào)用鏈處理

.add() 向已有的節(jié)點(diǎn)序列中添加新的對(duì)象

.andSelf() 在調(diào)用鏈中，隨時(shí)加入原始序列

.eq() 指定索引選取節(jié)點(diǎn)，支持負(fù)數(shù)

.filter() .is() .not() .find() .first() .last() .has() 序列選擇

.end() 節(jié)點(diǎn)回溯

$(function () {
    $("ul.first").find(".foo").css("background-color", "red")
        .end().find(".bar").css("background-color", "green");
});

2. 子節(jié)點(diǎn)

.children() 所有的子節(jié)點(diǎn)，可加入過(guò)濾條件，.children(selector)

3. 兄弟節(jié)點(diǎn)

.siblings() .next() .nextAll() .nextUntil() .prevAll() .prevUntil() .closet() 選擇兄弟節(jié)點(diǎn)

4. 父節(jié)點(diǎn)

.parent() .parents() .parentUntil() 父節(jié)點(diǎn)選擇

1. attributes和properties的區(qū)別

attributes 是XML結(jié)構(gòu)中的屬性節(jié)點(diǎn)

properties 是DOM對(duì)象，對(duì)象屬性

$("body").get(0).tagName;

2. 類(lèi)與屬性控制

.addCLass() .hasClass() .removeClass() 添加一個(gè)類(lèi)，判斷是否有指定類(lèi)，刪除類(lèi)

$("body").addClass("test");
$("body").addClass(function (index, current) {
    return current + "new";
});
$("body").removeClass("test");
$("body").removeClass(function (index, current) {
    return current + " " + "other";
});

.toggleClass() 類(lèi)的開(kāi)關(guān)式轉(zhuǎn)換

$("img").toggleClass(); //對(duì)所有類(lèi)的開(kāi)關(guān)
$("img").toggleClass("test"); //對(duì)指定類(lèi)的開(kāi)關(guān)
$("img").toggleClass(isTrue); //根據(jù)`isTrue`判斷所有類(lèi)的開(kāi)關(guān)
$("img").toggleClass("test", isTrue); //根據(jù)`isTrue`判斷指定類(lèi)的開(kāi)關(guān)

//同 `$("img").toggleClass("test");` 只是類(lèi)名由函數(shù)返回
$("img").toggleClass(function (index, className, isTrue) {
    return "name"
});

// `isTrue`作為函數(shù)的第三個(gè)參數(shù)傳入
$("img").toggleClass(function (index, className, isTrue) {
    return "name"
}, isTrue);

.attr() 獲取或設(shè)置一個(gè)屬性值

// $("#greatphoto").attr("alt"); //獲取屬性`
$("#greatphoto").attr("alt", "Shenzhen Brush Seller"); //設(shè)置屬性`

// 同時(shí)設(shè)置多個(gè)屬性
$("#greatphoto").attr({
    alt: "Shen Brush Seller",
    title: "photo by Kelly Clark"
});

//設(shè)置屬性為函數(shù)返回值，函數(shù)的上下文為當(dāng)前元素
$("#greatphoto").attr("title", function (i, val) {
    return val + " - photo by Kelly Clark";
})

.prop() 用法同.attr()，只是對(duì)象變成了properties

.removeAttr() .removeProp() 刪除屬性

.val() 設(shè)置或獲取元素的表單值，通常用于表單元素

$("input").val();
$("input").val("other");

.html() 設(shè)置或獲取元素的節(jié)點(diǎn)html

$("div").html();
$("div").html("
測(cè)試
");
$("div").html(function (index, old) {
    return old + "另外的內(nèi)容";
});

3. 樣式控制

.css() 獲取或設(shè)置指定的CSS樣式

$("body").css("background-color", "red");
$("body").css("background-color", function (index, value) {
    return value + "1";
});
$("body").css({color: "green", "background-color": "red"});

.width() .height() 獲取或設(shè)置元素的寬和高

$("body").width();
$("body").width(50);
$("body").width(function (index, value) {
    return value += 10;
})

.innerWidth() .innerHeight() .outerHeight() .outerWidth() 元素的其他尺寸值

.scrollLefgt() .scrollTop() 獲取或設(shè)置滾動(dòng)條的位置

.offset() .position() 獲取元素的坐標(biāo)

offset是相對(duì)于document，position是相對(duì)于父級(jí)元素

結(jié)構(gòu)控制

1. 文本節(jié)點(diǎn)

.html() .text() 設(shè)置和獲取節(jié)點(diǎn)的文本值。設(shè)置時(shí).text()會(huì)轉(zhuǎn)義標(biāo)簽，獲取時(shí).text()會(huì)移除所有標(biāo)簽。

2. 子節(jié)點(diǎn)

.append() .prepend()

$(".inner").append("
Test
");

參數(shù)可以有多種形式：

var $newdiv1 = $("
"),
    newdiv2 = document.createElement("div"),
    existingdiv1 = document.getElementById("foo");

$("body").append($newdiv1, [newdiv2, existingdiv1]);

3. 兄弟節(jié)點(diǎn)

.after() .before()

$(".inner").after("
Test
");

4. 父節(jié)點(diǎn)

.wrap() .wrap() .wrapInner()

$(".inner").wrap("
");
$(".inner").wrapAll("
");
$(".inner").wrapInner("
");

5. 復(fù)制/刪除/替換節(jié)點(diǎn)

.clone() 復(fù)制節(jié)點(diǎn)，可選參數(shù)表示是否處理已綁定的事件與數(shù)據(jù)

.clone(true) 處理當(dāng)前節(jié)點(diǎn)的事件與數(shù)據(jù)

.clone(true, true) 處理當(dāng)前節(jié)點(diǎn)及所有子節(jié)點(diǎn)的事件與數(shù)據(jù)

.detach() 暫時(shí)移除節(jié)點(diǎn)，之后可以再次恢復(fù)指定位置

.remove() 永久移除節(jié)點(diǎn)

.empty() 清除一個(gè)節(jié)點(diǎn)的所有內(nèi)部?jī)?nèi)容

.unwrap() 移除節(jié)點(diǎn)的父節(jié)點(diǎn)

.map() 遍歷所有成員

$(":checkbox").map(function () {
    return this.id;
}).get().join(",");

$(":checkbox").map(function (index, node) {
    return node.id;
}).get().join(",");

.slice() 序列切片，支持一個(gè)或兩個(gè)參數(shù)，支持負(fù)數(shù)

$("li").slice(2).css("background-color", "red");
$("li").slice(2, 4).css("background-color", "green");
$("li").slice(-2, -1).css("background-color", "blue");

$.each() $.map() 遍歷列表，$.map()可以用于對(duì)象

$.each([52, 97], function (index, value) {
    console.log((index + " : " + value));
});
$.map([0, 1, 2], function (index, n) {
    return n + 4;
});
$.map([0, 1, 2], function (n) {
    return n > 0 ? n + 1 : null;
});
$.map([0, 1, 2], function (n) {
    return [n, n + 1];
});

var dimensions = {width: 10, height: 15, length: 20};
$.map(dimensions, function (value, key) {
    return value * 2;
});

var dimensions = {width: 10, height: 15, length: 20};
$.map(dimensions, function (value, key) {
    return key;
});

$.extend() 合并對(duì)象，第一個(gè)參數(shù)表示是否進(jìn)行遞歸深入

var object = $.extend({}, object1, object2);
var object = $.extend(true, {}, object1, object2);

$.merge() 合并列表

$.merge([0, 1, 2], [2, 3, 4]);

.grep() 過(guò)濾列表，第三個(gè)參數(shù)表示是否為取反

$.grep([0, 1, 2], function (array, index) {
    return n > 0;
});//[1,2]
$.grep([0, 1, 2], function (array, index) {
    return n > 0;
}, true);//[0]

$.inArray() 存在判斷

$.inArray(value, array [, fromIndex])

$.isArray() $.isEmptyObject() $.isFunction() $.iSNumeric() $.isPainObject() $.isWindow $.isXMLDoc() 類(lèi)型判斷

$.noop() 空函數(shù)

$.now() 當(dāng)前時(shí)間戳，值為(new Date).getTime()

$.parseJson() $.parseXML() 把字符串解析為對(duì)象

var xml = "",
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc),
    $title = $xml.find("title");

$.trim() 去頭去尾 $.trim(str)

$.type() 判斷參數(shù)的類(lèi)型

$.unique() 遍歷后去重。$.unique(arraty)

$.proxy() 為函數(shù)綁定上下文

$.proxy(function,context)

$.proxy(context,name)

var o = {
    x: "123",
    f: function () {
        console.log(this.x)
    },
};
var go = function (f) {
    f()
};

o.f();// 123
go(o.f);// undefined
go($.proxy(o.f, o));//123
$.proxy(o, "f")(); //123

當(dāng)一個(gè)函數(shù)被傳遞之后，它就失去了原先的上下文。

jQuery提供了一種機(jī)制，可以把節(jié)點(diǎn)作為數(shù)據(jù)存儲(chǔ)的容器。

$.data() 往節(jié)點(diǎn)中獲取/設(shè)置數(shù)據(jù)

$.removeData() 刪除數(shù)據(jù)

在內(nèi)部實(shí)現(xiàn)上，jQuery會(huì)在指定節(jié)點(diǎn)添加一個(gè)內(nèi)部標(biāo)識(shí)，以此為key，把數(shù)據(jù)存在內(nèi)部閉包的一個(gè)結(jié)構(gòu)中。

事實(shí)上，jQuery的事件綁定機(jī)制也使用了這套數(shù)據(jù)接口。

$.data($("#data").get(0), "test", "123");
$("#data").data("test", "456");

1. 事件綁定

在 jQuery1.7之后，推薦統(tǒng)一使用on()來(lái)進(jìn)行事件綁定。

.on() 綁定事件 on()的基本使用方式是：.on(event,handler)

.off() 移除事件

.one() 綁定單次事件

$("#btn").on("click", function (eventObj) {
    console.log("Hello");
})

對(duì)于handler，它默認(rèn)的上下文是觸發(fā)事件的節(jié)點(diǎn)：

$("#btn").on("click", function (eventObj) {
    console.log(this);
})

使用$.proxy()可以隨意控制上下文：

$("#btn").on("click",
    $.proxy(function (eventObj) {
        console.log(this.a);
    }, {a: 123})); // 123

event參數(shù)還支持通過(guò)：

- 以`.`分割的子名字
- 以空格分割的多個(gè)事件

$("#btn").on("click.my", (function (eventObj) {
            console.log("123");
        }
    )
);
var f = function () {
    $("#btn").off("click.my")
};

多個(gè)事件：

$("#btn").on("click.my click.other",
    (function (eventObj) {
            console.log("123");
        }
    )
);
var f = function () {
    $("#btn").off("click.my")
}

on()的另一種調(diào)用形式：

$("#btn").on({
    "click": function (eventObj) {
        console.log("click");
    },
    "mousemove": function (eventObj) {
        console.log("move");
    }
});

off()的使用方式與on()完全類(lèi)似：

var f = function (eventObj) {
    console.log("Hello");
};
$("#btn").on("click", f);
$("#btn").off("click");

2. 事件觸發(fā)

事件的觸發(fā)有兩種方式，一是使用預(yù)定的“事件函數(shù)”（.click()，.focus()），二是使用trigger()或triggerHandler()。

$("#btn").on("click", function (eventObj) {
    console.log("hello");
});
$("#btn").click();
$("#btn").trigger("click");

trigger()與triggerHandler()不同之處在于前面是觸發(fā)事件，而后者是執(zhí)行綁定函數(shù)。

$("#btn").on("focus", function (event) {
    console.log("Hello");
});
$("#btn").triggerHandler("focus");

trigger()和triggerHandler()也用于觸發(fā)自定義事件。

$("#btn").on("my", function (event) {
    console.log("Hello");
});
$("#btn").triggerHandler("my");

trigger()和triggerHandler()觸發(fā)事件時(shí)，可以帶上參數(shù)：

$("#btn").on("my", function (event) {
    console.log(obj);
});
$("#btn").trigger("my", {a: 123});

3. 事件類(lèi)型

行為事件：

.click() 單擊

.dbclick() 雙擊

.blur() 失去焦點(diǎn)時(shí)

.change() 值變化時(shí)

.focus() 獲取焦點(diǎn)時(shí)

.focusin() jQuery擴(kuò)展的獲取焦點(diǎn)

.focusout() jQuery擴(kuò)展的失去焦點(diǎn)

.resize() 調(diào)整大小

.scroll() 滾動(dòng)

.select() 被選擇

.submit() 表單被提交

鍵盤(pán)事件：

.keydown() 按下鍵

.keyup() 放開(kāi)鍵

鼠標(biāo)事件：

.mousedown() 點(diǎn)下鼠標(biāo)

.mouseup() 松開(kāi)鼠標(biāo)

.mouseover() 光標(biāo)移入

.mouseout() 光標(biāo)移出

.mousemove() 光標(biāo)在其上移動(dòng)

.mouseleave() .mouseenter() 光標(biāo)移出/移入

頁(yè)面事件：

.ready() 準(zhǔn)備就緒

.unload() 離開(kāi)當(dāng)前頁(yè)時(shí)，針對(duì)window對(duì)象

.error() 發(fā)生錯(cuò)誤時(shí)

.load() 正在載入

4. 事件對(duì)象

event.currentTarget,event,target 事件綁定節(jié)點(diǎn)/事件的觸發(fā)節(jié)點(diǎn)（冒泡行為）

event.delegateTarget 綁定事件的對(duì)象，通常就是event.currentTarget

event.relatedTarget 相關(guān)的節(jié)點(diǎn)，主要用于一些轉(zhuǎn)換式的事件。比如鼠標(biāo)移入，表示它從哪個(gè)節(jié)點(diǎn)來(lái)的

event.which 標(biāo)明哪個(gè)按鈕觸發(fā)了事件，鼠標(biāo)和鍵盤(pán)的鍵標(biāo)識(shí)統(tǒng)一在這個(gè)屬性中

event.preventDefault() event.isDefaultPrevented() 禁止默認(rèn)行為

event.stopImmediateProgation() event.isImmediateProgationStopped() 不僅禁止冒泡。還終止綁定函數(shù)鏈的繼續(xù)進(jìn)行

event.stopPropagation()，event.isPropagationStopped() 禁止冒泡

event.pageX，event.pageY 事件觸發(fā)時(shí)相對(duì)于document的鼠標(biāo)位置

event.namespace 事件觸發(fā)時(shí)的名字空間，比如trigger("click.namespace")

event.data 額外傳入的數(shù)據(jù)

event.result 上一個(gè)綁定函數(shù)的返回值

event.timeStamp 事件觸發(fā)時(shí)的時(shí)間，其值為(new Date).getTime()

event.type 事件類(lèi)型

如果一個(gè)綁定函數(shù)最后返回了false，則默認(rèn)是event.preventDefault()和event.stopPropagation()行為。

1. 請(qǐng)求與回調(diào)

jQuery的AJAX，核心的請(qǐng)求處理函數(shù)只有一個(gè)，就是$.ajax()，然后就是一個(gè)簡(jiǎn)單的上層函數(shù)。

$.ajax() 的基本使用形式是：

jQuey.ajax(settings) settings是一個(gè)對(duì)象，里面包含了所有的配置項(xiàng)。

url 請(qǐng)求的地址。

type 請(qǐng)求的方法類(lèi)型，GET，POST。默認(rèn)是GET。

data 要發(fā)送的數(shù)據(jù)

dataType 服務(wù)器返回的數(shù)據(jù)類(lèi)型，支持xml，html，script，json，jsonp，text

success 請(qǐng)求成功時(shí)調(diào)用的處理函數(shù) success(data, textStatus, jqXHR)

context 回調(diào)函數(shù)執(zhí)行時(shí)的上下文

cache 默認(rèn)為true，是否為請(qǐng)求多帶帶添加一個(gè)隨機(jī)參數(shù)以防止瀏覽器緩存

error 請(qǐng)求錯(cuò)誤時(shí)的調(diào)用函數(shù)。

error(jqXHR, textStatus, errorThrown)

第二個(gè)參數(shù)是表示請(qǐng)求狀態(tài)的字符串：timeout，error，abort，parsererror

第三個(gè)參數(shù)是當(dāng)HTTP錯(cuò)誤發(fā)生時(shí)，具體的錯(cuò)誤描述：Not Found，Internal Server Error等

complete 請(qǐng)求結(jié)束（無(wú)論成功或失敗）時(shí)的一個(gè)回調(diào)函數(shù)。

complete(jqXHR, textStatus)

第二個(gè)參數(shù)時(shí)表示請(qǐng)求狀態(tài)的字符串：success，notmodified，error，timeout，abort，parsererror。

jsonp 一個(gè)參數(shù)名，默認(rèn)是callback，一般用于指明回調(diào)函數(shù)名。設(shè)置成false可以讓請(qǐng)求沒(méi)有callback參數(shù)。

jsonpCallback callback參數(shù)值。默認(rèn)是自動(dòng)生成的一個(gè)隨機(jī)值。

2. 請(qǐng)求的狀態(tài)

對(duì)于全局的所有AJAX請(qǐng)求而言，可以在任意節(jié)點(diǎn)上綁定到全局任意AJAX請(qǐng)求的每一個(gè)事件：

$("#loading").ajaxStart(function () {
    $(this).show();
});

.ajaxStart() 請(qǐng)求將要發(fā)出時(shí)

.ajaxSend() 請(qǐng)求將要發(fā)出時(shí)（在.ajaxStart()后）

.ajaxSuccess() 請(qǐng)求成功

.ajaxError() 請(qǐng)求錯(cuò)誤

.ajaxComplete() 請(qǐng)求完成

.ajaxStop() 請(qǐng)求結(jié)束（在.ajaxComplete()后）

3. 工具函數(shù)

.serialize() 解析表單參數(shù)項(xiàng)，返回字符串

$("form").submit(function () {
    alert($(this).serialize());
    return false;
});

.serializeArray() 解析表單參數(shù)項(xiàng)，返回一個(gè)列表對(duì)象。

$("form").submit(function () {
    alert($(this).serializeArray());
    return false;
});

1. Deferred

Deferred對(duì)象是在jQuery1.5中引入的回調(diào)管理對(duì)象。其作用是把一堆函數(shù)按順序放入一個(gè)調(diào)用鏈，然后根據(jù)狀態(tài)來(lái)依次調(diào)用這些函數(shù)。AJAX的所有操作都是使用它來(lái)進(jìn)行封裝的。

var obj = $.Deferred(function (a) {

});
obj.done(function () {
    console.log("1");
});
obj.done(function () {
    console.log("2");
});
obj.resolve();

總的來(lái)說(shuō)：jQuery的Deferred對(duì)象有三個(gè)狀態(tài)：done，fail，process。

- `process` 只能先于其他兩個(gè)狀態(tài)先被激發(fā)。
- `done`和`fail`互斥，只能激發(fā)一個(gè)。
- `process`可以被重復(fù)激發(fā)，而`done`和`fail`只能激發(fā)一次。

然后，jQuery提供了一些函數(shù)用于添加回調(diào)，激發(fā)狀態(tài)等。

deferred.done() 添加一個(gè)或多個(gè)成功回調(diào)

deferred.fail() 添加一個(gè)或多個(gè)失敗回調(diào)

deferred.always() 添加一個(gè)函數(shù)，同時(shí)應(yīng)用于成功和失敗

deferred.progress() 添加一個(gè)函數(shù)用于準(zhǔn)備回調(diào)

deferred.then() 依次接受三個(gè)函數(shù)，分別用于成功，失敗，準(zhǔn)備狀態(tài)

deferred.reject() 激發(fā)失敗狀態(tài)

deferred.resolve() 激發(fā)成功狀態(tài)

deferred.notify() 激發(fā)準(zhǔn)備狀態(tài)

如果一個(gè)Deferred已經(jīng)被激發(fā)，則新添加的對(duì)應(yīng)的函數(shù)會(huì)被立即執(zhí)行。

jQuery還提供了一個(gè)jQuery.when()的回調(diào)管理函數(shù)，可以用于方便地管理多個(gè)事件并發(fā)的情況。

var defer = $.ajax({
    url: "test.html",
    dataType: "json"
});
defer.done(function (data) {
    console.log(data);
});

done()做的事和使用success()定義是一樣的。

當(dāng)我們需要完成，像“請(qǐng)求A和請(qǐng)求B都完成時(shí)，執(zhí)行函數(shù)”之類(lèi)的需求時(shí)，使用$.when()就可以了。

var defer_1 = $.ajax({
    url: "json.html",
    dataType: "json"
});
var defer_2 = $.ajax({
    url: "jsonp.html",
    dataType: "jsonp"
});
var new_defer = $.when(defer_1, defer_2);
new_defer.done(function () {
    console.log("hello");
});

在$.when()中的Deferred，只要有一個(gè)是fail，則整體結(jié)果為fail。

Deferred的回調(diào)函數(shù)的執(zhí)行順序與它們的添加順序一致。

這里特別注意一點(diǎn)，就是done/fail/always與then的返回值的區(qū)別。從功能上看，它們都可以添加回調(diào)函數(shù)，但是，方法的返回值是不同的。前組的返回值是原來(lái)的那個(gè)defer對(duì)象，而then返回的是一個(gè)新的defer對(duì)象。

then返回新的defer這種形式，可以用于方便地實(shí)現(xiàn)異步函數(shù)的鏈?zhǔn)秸{(diào)用。

defer.done(function () {
    return $.ajax({
        url: "/json",
        dataType: "json",
        success: function () {
            console.log("inner");
        }
    })
}).done(function () {
    console.log("hello");
});

等同于是調(diào)用了兩次 defer.done , defer.done ，注冊(cè)的兩次回調(diào)函數(shù)依次被執(zhí)行后，看到的輸出是：hello，inner。

這是兩次 defer.done 的結(jié)果，第一個(gè)回調(diào)函數(shù)返回了一個(gè)新的 defer 沒(méi)任何作用。

如果換成 then 方法：defer.then(function () {...});

它跟兩次 defer.done 是不同的。 new_defer 會(huì)在 inner 那里的 defer 被觸發(fā)時(shí)再被觸發(fā)，所以輸出結(jié)果是：inner，hello。

更一般地來(lái)說(shuō) then 的行為，就是前面的注冊(cè)函數(shù)的返回值，會(huì)作為后面注冊(cè)函數(shù)的參數(shù)值：

var defer = $.ajax({
    url: "/json",
    dataType: "json"
});
defer.then(function (res) {
    console.log(res);
    return 1;
}).then(function (res) {
    console.log(res);
    return 2;
}).then(function (res) {
    console.log(res);
});

上面代碼的輸入結(jié)果是：ajax response，1，2。

2. Callbacks

事實(shí)上，Deferred機(jī)制，只是在Callbacks機(jī)制的上層進(jìn)行了一層簡(jiǎn)單封裝。Callbacks對(duì)象才是真正的jQuery中定義的原始的回調(diào)管理機(jī)制。

var obj = $.Callbacks();
obj.add(function () {
    console.log("1");
});
obj.add(function () {
    console.log("2");
});
obj.fire();

Callbacks對(duì)象的初始化支持一組控制參數(shù)：

$.Callbacks(flags) 初始化一個(gè)回調(diào)管理對(duì)象。flags是空格分割的多個(gè)字符串，以定義此回調(diào)對(duì)象的行為：

once 回調(diào)鏈只能被激發(fā)一次

memory 回調(diào)鏈被激發(fā)后，新添加的函數(shù)被立即執(zhí)行

unique 相同的回調(diào)函數(shù)只能被添加一次

stopOnFalse 當(dāng)有回調(diào)函數(shù)返回false時(shí)終止調(diào)用鏈的執(zhí)行

CallbackS的控制方法：

callbacks.add() 添加一個(gè)或一串回調(diào)函數(shù)

callbacks.fire() 激發(fā)回調(diào)

callbacks.remove() 從調(diào)用鏈中移除指定的函數(shù)

callbacks.empty() 清空調(diào)用鏈

callbacks.disable() 關(guān)閉調(diào)用鏈的繼續(xù)執(zhí)行，新添加的函數(shù)也不會(huì)被執(zhí)行

callbacks.lock() 鎖定調(diào)用鏈，但是如果打開(kāi)了memory的flag，新添加的函數(shù)仍然會(huì)執(zhí)行

callbacks.has() 檢查一個(gè)函數(shù)是否處于回調(diào)鏈之中

callbacks.fired() 檢查回調(diào)鏈?zhǔn)欠癖患ぐl(fā)

callbacks.locked() 檢查回調(diào)鏈?zhǔn)欠癖绘i定