摘要：第二個參數是表示請求狀態的字符串，，，第三個參數是當錯誤發生時，具體的錯誤描述，等請求結束無論成功或失敗時的一個回調函數。一個參數名，默認是，一般用于指明回調函數名。的回調函數的執行順序與它們的添加順序一致。

jQuery大部分功能需要根據文檔的DOM模型來工作，首先需要正確地解析到整個文檔的DOM模型結構。使用jQuery需要在整個文檔被瀏覽器完全加載后才開始進行。

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

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

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

jQuery對象與DOM對象之間的轉換

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

從 DOM 對象轉到 jQuery 對象： $(obj)

從 jQuery 對象轉到 DOM 對象： obj[0]

比較正規地從 jQuery 對象到 DOM 的轉換，是使用 jQuery 對象的 get() 方法：

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

1. 常規選擇器

$("*") 選擇所有節點

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

$(".class") 類選擇器

$("tag") 標簽選擇器

$("子元素")

$("直接子元素")

:focus 獲取焦點元素

:first-child/:last-child 選擇第一個/最后一個元素

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

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

("pre~siblings") 兄弟元素

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

: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 可見控件，visibility:hidden和opacity:0同樣被認為是可見

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

4. 其他選擇器

[name="value"] [name2="value2"] 多個AND條件

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

:not() 否定選擇

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

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

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

:header 選擇h1,h2,h3...標題元素

:only-child 僅有一個子元素的元素

:empty 空元素，即無內容也無元素

:parent 非空元素

1. 調用鏈處理

.add() 向已有的節點序列中添加新的對象

.andSelf() 在調用鏈中，隨時加入原始序列

.eq() 指定索引選取節點，支持負數

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

.end() 節點回溯

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

2. 子節點

.children() 所有的子節點，可加入過濾條件，.children(selector)

3. 兄弟節點

.siblings() .next() .nextAll() .nextUntil() .prevAll() .prevUntil() .closet() 選擇兄弟節點

4. 父節點

.parent() .parents() .parentUntil() 父節點選擇

1. attributes和properties的區別

attributes 是XML結構中的屬性節點

properties 是DOM對象，對象屬性

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

2. 類與屬性控制

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

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

.toggleClass() 類的開關式轉換

$("img").toggleClass(); //對所有類的開關
$("img").toggleClass("test"); //對指定類的開關
$("img").toggleClass(isTrue); //根據`isTrue`判斷所有類的開關
$("img").toggleClass("test", isTrue); //根據`isTrue`判斷指定類的開關

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

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

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

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

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

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

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

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

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

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

.html() 設置或獲取元素的節點html

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

3. 樣式控制

.css() 獲取或設置指定的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() 獲取或設置元素的寬和高

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

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

.scrollLefgt() .scrollTop() 獲取或設置滾動條的位置

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

offset是相對于document，position是相對于父級元素

結構控制

1. 文本節點

.html() .text() 設置和獲取節點的文本值。設置時.text()會轉義標簽，獲取時.text()會移除所有標簽。

2. 子節點

.append() .prepend()

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

參數可以有多種形式：

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

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

3. 兄弟節點

.after() .before()

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

4. 父節點

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

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

5. 復制/刪除/替換節點

.clone() 復制節點，可選參數表示是否處理已綁定的事件與數據

.clone(true) 處理當前節點的事件與數據

.clone(true, true) 處理當前節點及所有子節點的事件與數據

.detach() 暫時移除節點，之后可以再次恢復指定位置

.remove() 永久移除節點

.empty() 清除一個節點的所有內部內容

.unwrap() 移除節點的父節點

.map() 遍歷所有成員

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

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

.slice() 序列切片，支持一個或兩個參數，支持負數

$("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()可以用于對象

$.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() 合并對象，第一個參數表示是否進行遞歸深入

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

$.merge() 合并列表

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

.grep() 過濾列表，第三個參數表示是否為取反

$.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() 類型判斷

$.noop() 空函數

$.now() 當前時間戳，值為(new Date).getTime()

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

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

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

$.type() 判斷參數的類型

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

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

$.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

當一個函數被傳遞之后，它就失去了原先的上下文。

jQuery提供了一種機制，可以把節點作為數據存儲的容器。

$.data() 往節點中獲取/設置數據

$.removeData() 刪除數據

在內部實現上，jQuery會在指定節點添加一個內部標識，以此為key，把數據存在內部閉包的一個結構中。

事實上，jQuery的事件綁定機制也使用了這套數據接口。

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

1. 事件綁定

在 jQuery1.7之后，推薦統一使用on()來進行事件綁定。

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

.off() 移除事件

.one() 綁定單次事件

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

對于handler，它默認的上下文是觸發事件的節點：

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

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

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

event參數還支持通過：

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

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

多個事件：

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

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

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

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

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

2. 事件觸發

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

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

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

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

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

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

trigger()和triggerHandler()觸發事件時，可以帶上參數：

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

3. 事件類型

行為事件：

.click() 單擊

.dbclick() 雙擊

.blur() 失去焦點時

.change() 值變化時

.focus() 獲取焦點時

.focusin() jQuery擴展的獲取焦點

.focusout() jQuery擴展的失去焦點

.resize() 調整大小

.scroll() 滾動

.select() 被選擇

.submit() 表單被提交

鍵盤事件：

.keydown() 按下鍵

.keyup() 放開鍵

鼠標事件：

.mousedown() 點下鼠標

.mouseup() 松開鼠標

.mouseover() 光標移入

.mouseout() 光標移出

.mousemove() 光標在其上移動

.mouseleave() .mouseenter() 光標移出/移入

頁面事件：

.ready() 準備就緒

.unload() 離開當前頁時，針對window對象

.error() 發生錯誤時

.load() 正在載入

4. 事件對象

event.currentTarget,event,target 事件綁定節點/事件的觸發節點（冒泡行為）

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

event.relatedTarget 相關的節點，主要用于一些轉換式的事件。比如鼠標移入，表示它從哪個節點來的

event.which 標明哪個按鈕觸發了事件，鼠標和鍵盤的鍵標識統一在這個屬性中

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

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

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

event.pageX，event.pageY 事件觸發時相對于document的鼠標位置

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

event.data 額外傳入的數據

event.result 上一個綁定函數的返回值

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

event.type 事件類型

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

1. 請求與回調

jQuery的AJAX，核心的請求處理函數只有一個，就是$.ajax()，然后就是一個簡單的上層函數。

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

jQuey.ajax(settings) settings是一個對象，里面包含了所有的配置項。

url 請求的地址。

type 請求的方法類型，GET，POST。默認是GET。

data 要發送的數據

dataType 服務器返回的數據類型，支持xml，html，script，json，jsonp，text

success 請求成功時調用的處理函數 success(data, textStatus, jqXHR)

context 回調函數執行時的上下文

cache 默認為true，是否為請求多帶帶添加一個隨機參數以防止瀏覽器緩存

error 請求錯誤時的調用函數。

error(jqXHR, textStatus, errorThrown)

第二個參數是表示請求狀態的字符串：timeout，error，abort，parsererror

第三個參數是當HTTP錯誤發生時，具體的錯誤描述：Not Found，Internal Server Error等

complete 請求結束（無論成功或失敗）時的一個回調函數。

complete(jqXHR, textStatus)

第二個參數時表示請求狀態的字符串：success，notmodified，error，timeout，abort，parsererror。

jsonp 一個參數名，默認是callback，一般用于指明回調函數名。設置成false可以讓請求沒有callback參數。

jsonpCallback callback參數值。默認是自動生成的一個隨機值。

2. 請求的狀態

對于全局的所有AJAX請求而言，可以在任意節點上綁定到全局任意AJAX請求的每一個事件：

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

.ajaxStart() 請求將要發出時

.ajaxSend() 請求將要發出時（在.ajaxStart()后）

.ajaxSuccess() 請求成功

.ajaxError() 請求錯誤

.ajaxComplete() 請求完成

.ajaxStop() 請求結束（在.ajaxComplete()后）

3. 工具函數

.serialize() 解析表單參數項，返回字符串

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

.serializeArray() 解析表單參數項，返回一個列表對象。

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

1. Deferred

Deferred對象是在jQuery1.5中引入的回調管理對象。其作用是把一堆函數按順序放入一個調用鏈，然后根據狀態來依次調用這些函數。AJAX的所有操作都是使用它來進行封裝的。

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

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

總的來說：jQuery的Deferred對象有三個狀態：done，fail，process。

- `process` 只能先于其他兩個狀態先被激發。
- `done`和`fail`互斥，只能激發一個。
- `process`可以被重復激發，而`done`和`fail`只能激發一次。

然后，jQuery提供了一些函數用于添加回調，激發狀態等。

deferred.done() 添加一個或多個成功回調

deferred.fail() 添加一個或多個失敗回調

deferred.always() 添加一個函數，同時應用于成功和失敗

deferred.progress() 添加一個函數用于準備回調

deferred.then() 依次接受三個函數，分別用于成功，失敗，準備狀態

deferred.reject() 激發失敗狀態

deferred.resolve() 激發成功狀態

deferred.notify() 激發準備狀態

如果一個Deferred已經被激發，則新添加的對應的函數會被立即執行。

jQuery還提供了一個jQuery.when()的回調管理函數，可以用于方便地管理多個事件并發的情況。

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

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

當我們需要完成，像“請求A和請求B都完成時，執行函數”之類的需求時，使用$.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，只要有一個是fail，則整體結果為fail。

Deferred的回調函數的執行順序與它們的添加順序一致。

這里特別注意一點，就是done/fail/always與then的返回值的區別。從功能上看，它們都可以添加回調函數，但是，方法的返回值是不同的。前組的返回值是原來的那個defer對象，而then返回的是一個新的defer對象。

then返回新的defer這種形式，可以用于方便地實現異步函數的鏈式調用。

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

等同于是調用了兩次 defer.done , defer.done ，注冊的兩次回調函數依次被執行后，看到的輸出是：hello，inner。

這是兩次 defer.done 的結果，第一個回調函數返回了一個新的 defer 沒任何作用。

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

它跟兩次 defer.done 是不同的。 new_defer 會在 inner 那里的 defer 被觸發時再被觸發，所以輸出結果是：inner，hello。

更一般地來說 then 的行為，就是前面的注冊函數的返回值，會作為后面注冊函數的參數值：

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);
});

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

2. Callbacks

事實上，Deferred機制，只是在Callbacks機制的上層進行了一層簡單封裝。Callbacks對象才是真正的jQuery中定義的原始的回調管理機制。

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

Callbacks對象的初始化支持一組控制參數：

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

once 回調鏈只能被激發一次

memory 回調鏈被激發后，新添加的函數被立即執行

unique 相同的回調函數只能被添加一次

stopOnFalse 當有回調函數返回false時終止調用鏈的執行

CallbackS的控制方法：

callbacks.add() 添加一個或一串回調函數

callbacks.fire() 激發回調

callbacks.remove() 從調用鏈中移除指定的函數

callbacks.empty() 清空調用鏈

callbacks.disable() 關閉調用鏈的繼續執行，新添加的函數也不會被執行

callbacks.lock() 鎖定調用鏈，但是如果打開了memory的flag，新添加的函數仍然會執行

callbacks.has() 檢查一個函數是否處于回調鏈之中

callbacks.fired() 檢查回調鏈是否被激發

callbacks.locked() 檢查回調鏈是否被鎖定