1. jQuery 是如何工作的

1.1. 开始使用jQuery

jQuery 本身只有一个 js 文件，所以，要使用它，就和使用其它的 js 文件一样，直接将它引入就可以使用了。

<script type="text/javascript" src="jquery-1.8.3.js"></script>

但是，要注意一点，因为 jQuery 大部分功能需要根据文档的 DOM 模型来工作，所以，它首先需要正确地解析到整个文档的 DOM 模型结构。为此，一般，我们使用 jQuery 所做的工作都需要在整个文档被浏览器完全加载完毕后才开始进行：

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

$ 是在 jQuery 中被定义的一个函数，它可以简单方便地取到相关结点。 $(document).ready是一个事件绑定，这在文档加载完毕后被调用。

事实上 $() 等于 jQuery() 即 jQuery 的核心函数的一个简写。

之后的 javascript 代码，都默认是写在 $(document).ready 这个事件绑定当中的。

当然， $(document).ready() 可以简写成 $() 。

前面说了， $ 是一个在 jQuery 中被使用了的一个变量名，如果因为某些原因，你不能让 jQuery 使用它，那么你可以使用 jQuery.noConflict() 做到这一点，它的返回值就是 jQuery 这个对象。

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

1.2. jQuery对象与DOM对象之间的转换

通常，使用 $() 得到的是一个 jQuery 对象。它封装了很多 DOM 对象的操作，但是，它和 DOM 对象之间是不同的。比如，如果你要使用 obj.innerHTML ，那只有当 obj 是一个 DOM 对象时才能用，相应地，如果是 jQuery 对象你应该使用 obj.html() 。

从 DOM 对象转到 jQuery 对象： $(obj) 。

从 jQuery 对象转到 DOM 对象： obj[0] 。

比较正规地从 jQuery 对象到 DOM 的转换，是使用 jQuery 对象的 get() 方法：

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

$('li').get();
//[<li id="foo">, <li id="bar">]

$('li').get(0);
//<li id="foo">

$('li').get(-1);
//<li id="bar">

2. 丰富的选择器

完整的列表在 http://api.jquery.com/category/selectors/ 。

2.1. 常规选择器

$("*"): 选择所有结点
(“#id”): ID选择器，注意其中的一些特殊字符，比如 .
(“.class”): 类选择器
(“tag”): 按标签选择
(“ancestor descendant”): 选择子元素
(“parent > child”): 选择直接子元素
:focus: 获取焦点元素
:first-child :last-child: 选择第一个/最后一个子元素
:first :last: 截取第一个/最后一个符合条件的元素
(“prev + next”): 直接兄弟元素
(“prev ~ siblings”): 兄弟元素
:nth-child(): 索引选择，索引从 1 开始 :nth-child(odd) :nth-child(even) :nth-child(4n)

2.2. 属性选择器

[name~="value"]: 属性中包括某单词
[name="value"]: 属性完全等于指定值
[name!="value"]: 属性不等于指定值
[name]: 包括有指定属性的元素

2.3. 控件选择器

:checked: 选择所有被中的元素
:selected: 被选择了的元素
:disabled :enabled: 选择被禁用/未禁用的元素
:hidden: 选择隐藏元素，不仅是 [type="hidden"] ，还有 display: none
:visible: 可见控件， visibility: hidden 和 opacity: 0 同样被认为是可见。
:input :button :checkbox :file :image :password :radio :reset :submit :text: 具体控件，图像控件是 [type="image"]

2.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: 非空元素

3. 节点漫游

完整列表在 http://api.jquery.com/category/traversing/

通过上面的选择器，我们可以得到希望处理的节点。但是通常，我们还希望得到当前节点的一些相对节点，以便下一步处理，比如“所有子节点”，“下一个兄弟节点”之类的东西。

3.1. 调用链处理

.add(): 向已有的节点序列中添加新的对象
.andSelf(): 在调用链中，随时加入原始序列
.eq(): 指定索引选取节点，支持负数
.filter() .is() .not() .find() .first() .last() .has(): 序列选择
.end(): 链点回溯

<ul class="first">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>
<ul class="second">
   <li class="foo">list item 1</li>
   <li>list item 2</li>
   <li class="bar">list item 3</li>
</ul>

$('ul.first').find('.foo').css('background-color', 'red')
  .end().find('.bar').css('background-color', 'green');

3.2. 子节点

.children(): 所有的子节点，可加入过滤条件， .children(selector)

3.3. 兄弟节点

.siblings() .next() .nextAll() .nextUntil() .prev() .prevAll() .prevUntil() .closest(): 兄弟节点选择

3.4. 父节点

.parent() .parents() .parentsUntil(): 父节点选择

4. 元素控制相关

4.1. attributes和properties的区别

attributes 是 XML 结构中的属性节点概念范畴：

<body onload="prettyPrint()"></body>

上面的代码表示了 body 这个节点，有一个名为 onload 的 attributes 。

properties 则是对于 DOM 对象的，对象属性概念范畴。这一般就没有直观的表现，但是它总是可以被访问到的，比如：

$('body').get(0).tagName;
//BODY

虽然 attributes 与 properties 是不同的概念范畴，但是它们对于某些特殊的属性是有共同的访问属性名的，比如 id 。

4.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 class="test other" />

$('img').toggleClass(); //对所有类的开关
$('img').toggleClass('test'); //对指定类的开关
$('img').toggleClass(isTrue); //根据isTrue判断所有类的开关
$('img').toggleClass('test', isTrue); //根据isTrue判断指定类的开关

//同 $('img').toggleClass('test') 只是类名由函数返回
$('img').toggleClass(function(index, class, isTrue){return 'name'});

//isTrue会作为函数的第三个参数传入
$('img').toggleClass(function(index, class, isTrue){return 'name'}, isTrue);

.attr(): 获取或者设置一个属性值，它的使用方法有多种：

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

$('#greatphoto').attr('alt'); //获取属性
$('#greatphoto').attr('alt', 'Beijing Brush Seller'); //设置属性

//同时设置多个属性
$('#greatphoto').attr({
  alt: 'Beijing 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 type="hidden" value="test" />

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

.html(): 设置或获取元素的节点文件本值。

<div><span>测试</span></div>

$('div').html();
$('div').html('<div>测试</div>');
$('div').html(function(index, old){return old + '<span>另外的内容</span>'});

4.3. 样式控制

.css(): 获取或设置指定的 css 样式：

$('body').css('background-color');
$('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(): 元素的其它尺寸值
.scrollLeft() .scrollTop(): 获取或设置滚动条的位置
.offset() .position(): 获取元素的坐标。 offset 是相对于 document ， position 是相对于父级元素

4.4. 结构控制

4.4.1. 文本节点

.html() .text(): 设置和获取节点的文值。设置时 .text() 会转义标签，获取时 .text() 会移除所有标签。

4.4.2. 子节点

.append() .prepend()

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').append('<p>Test</p>');

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

参数可以有多种形式：

var $newdiv1 = $('<div id="object1"/>'),
    newdiv2 = document.createElement('div'),
    existingdiv1 = document.getElementById('foo');

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

4.4.3. 兄弟节点

.after() .before()

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').after('<p>Test</p>');

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

4.4.4. 父节点

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

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrap('<div class="new" />');

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>


$('.inner').wrapAll('<div class="new" />');

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>


$('.inner').wrapInner('<div class="new" />');

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

4.4.5. 复制/删除/替换节点

.clone()

复制节点，可选参数表示是否处理已绑定的事件与数据

.clone(true): 处理当前节点的事件与数据
.clone(true, true): 处理当前节点及所有子节点的事件与数据

.detach()

暂时移除节点，之后可以再次恢复了指定位置。

.remove()

永久移除节点。

.empty()

清除一个节点的所有内部内容。

.unwrap()

移除节点的父节点。

5. 工具函数

5.1. jQuery对象序列

.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', 'red');
$('li').slice(-2, -1).css('background-color', 'red');

5.2. 通用工具

$.each() $.map(): 遍历列表, $.map() 可以作用于对象。

$.each([52, 97], function(index, value) { 
  alert(index + ': ' + value); 
});

$.map( [0,1,2], function(index, n){
  return n + 4;
});
//[4, 5, 6]

$.map( [0,1,2], function(n){
  return n > 0 ? n + 1 : null;
});
//[2, 3]

$.map( [0,1,2], function(n){
  return [ n, n + 1 ];
});
//[0, 1, 1, 2, 2, 3]

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

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

$.extend(): 合并对象，第一个参数表示是否进行递归深入

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

$.merge(): 合并列表

$.merge( [0,1,2], [2,3,4] )
//[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() $.isPlainObject() $.isWindow() $.isXMLDoc(): 类型判断
$.noop(): 空函数
$.now(): 当前时间戳，值为 (new Date).getTime()
$.parseJson() $.parseXML(): 把字符串解析为对象

var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$title = $xml.find( "title" );

$.trim(): 去头去尾， $.trim(str)
$.type(): 判定参数的类型

# If the object is undefined or null,
#then "undefined" or "null" is returned accordingly.

* jQuery.type(undefined) === "undefined"
* jQuery.type() === "undefined"
* jQuery.type(window.notDefined) === "undefined"
* jQuery.type(null) === "null"

# If the object has an internal [[Class]] equivalent to
#one of the browser's built-in objects, the associated name is returned.
#(More details about this technique.)

* jQuery.type(true) === "boolean"
* jQuery.type(3) === "number"
* jQuery.type("test") === "string"
* jQuery.type(function(){}) === "function"
* jQuery.type([]) === "array"
* jQuery.type(new Date()) === "date"
* jQuery.type(/test/) === "regexp"

$.unique(): 遍历后去重， $.unique(array)

6. 上下文绑定

上下文绑定在函数型的语言当中起着非常重要的作用。不过， jQuery 中对此似乎并没有怎么强调，它的很多函数都默认处理了上下文，文档中也会告诉你，在某个函数当中， this 是什么东西，我觉得这种做法不太好。

jQuery 中有一个函数专门用于处理上下文绑定，虽然我觉得把 context 放在后面的格式非常别扭，不过好过没有吧。

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

当一个函数被传递之后，它就失去原先的上下文了。

7. 把数据存到节点中

jQuery 提供了一种机制，可以把节点作为数据存储的容器。

$.data(): 往节点中获取/设置数据
$.removeData(): 删除数据

在内部实现上， jQuery 会在指定节点添加一个内部标识，以此为 key ，把数据存在内部闭包的一个结构当中。事实上， jQuery 的事件绑定机制也使用了这套数据接口。

$.data($('#data').get(0), 'test', '123');
$('#data').data('test', '456');
console.log($.data($('#data').get(0), 'test'));
console.log($('#data').data('test'));

8. 事件处理

8.1. 事件绑定

在 jQuery1.7 之后，推荐统一使用 on() 来进行事件绑定。

在讲事件绑定之前，需要首先明确一个概念。通常，我们是需要对具体的节点的相关事件作处理，比如一个按钮被点击了之类的。但这里有一个问题，如果我们能获取到具体的节点，当然没什么说的。不过有时，我们要处理的节点却还没有存在，但是我们又要预定义它的事件处理。比如，我们说在一个 UL 中，每一个 LI 被点击时，都要执行一个函数。但是， UL 中的内容本身可能是变化的，开始时它只有两个 LI ，之后又变成了三个 LI ，多出的那一个 LI 也要能响应事件才行。

上述的情况是一个普遍的需求。我们可以利用事件的冒泡机制来实现目的。我们把事件处理绑定在UL 上，这样，当 LI 被点击时，会冒泡到上级的 UL ，这样在处理事件时就可以判断出具体是哪个节点的事件，以便作下一步处理。

当然，原理是这样，具体操作时， on() 这个方法已经把一切都封装好了。

.on(): 绑定事件
.off(): 移除绑定
.one(): 绑定单次事件

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

最基本的使用：

$('#btn').on('click',
  function(eventObj){
    console.log('haha')；
  }
);

对于 handler ，它默认的上下文是触发事件的节点（与行为节点无关）：

<div id="btn">
  <div>哈哈</div>
  <div id="btn2">哈哈</div>
  <div>哈哈</div>
</div>

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

你看到是 div#btn 。

当然，使用 $.proxy() 你可以随意控制上下文：

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

event 参数还支持通过：

以 . 分割的子名字，这些名字父子的名字空间效果。
以空格分割的多个事件。

名字空间效果：

$('#btn').on('click.my',
  function(eventObj){
    console.log('123');
  }
);

var f = function(){
  $('#btn').off('click.my');
}

$('#btn').on('click.my.other',
  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() 的扩展使用方式为： .on( events [, selector] [, data], handler(eventObject) ) 。

其中的 data 是一个数据存储空间，在 eventObj.data 中访问到。

$('#btn').on('click', {a: 123},
  function(eventObj){
    console.log(eventObj.data.a);
  }
);

而 selector 则是一个过滤规则，这对于在前面讲过的，在父级节点预定义不存在节点的行为很有用。

<div id="btn">
  <span>哈哈</span>
</div>

$('#btn').on('click', 'p',
  function(eventObj){
    console.log('here');
  }
);
var f = function(){
  $('#btn').append('<p>新的</p>');
}

on() 的另外一种调用形式： .on( events-map [, selector] [, data] ) ：

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

off() 的使用方式与 on() 完全类似：

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

8.2. 事件触发

事件的触发有两种方式，一是使用预定的“事件函数”，二是使用 trigger() 或triggerHandler() 。

预定的“事件函数”就是类似于 .click() .focus() 这些。

<input id="btn" />

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

$('#btn').click();
$('#btn').trigger('click');

trigger() 还可以直接接受一个 Event 对象，比如一个死循环：

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

trigger() 与 triggerHandler() 的不同之处在于前面是触发事件，而后者是执行绑定函数。这在一些有原生行为的事件上就有明显区别了：

$('#btn').on('focus',
  function(eventObj){
    console.log('here');
  }
);

//$('#btn').trigger('focus');
$('#btn').triggerHandler('focus');

trigger() 和 triggerHandler() 也用于触发自定义事件：

$('#btn').on('my',
  function(eventObj){
    console.log('here');
  }
);

$('#btn').trigger('my');

trigger() 和 triggerHandler() 触发事件时，可以带上参数：

$('#btn').on('my',
  function(eventObj, obj){
    console.log(obj);
  }
);

$('#btn').trigger('my', {a: 123});

8.3. 事件类型

行为事件：

.click(): 单击
dblclick(): 双击
.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(): 正在载入

8.4. 事件对象

每一个事件的绑定函数，都接受一个事件对象为参数。这个事件对象当中，包括了很多事件的信息。

event.currentTarget , event.target: 事件绑定节点 / 事件的触发节点(冒泡行为)
event.delegateTarget: 绑定事件的对象，通常就是 event.currentTarget
event.relatedTarget: 相关的节点，主要用于一些转换式的事件。比如鼠标移入，表示它从哪个节点来的
event.which: 标明哪个按键触发了事件，鼠标和键盘的键标识统一在这个属性中了
event.preventDefault() , event.isDefaultPrevented(): 禁止默认行为
event.stopImmediatePropagation() , event.isImmediatePropagationStopped(): 不光禁止冒泡，还终止绑定函数链的继续进行。
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() 行为。

9. AJAX

jQuery 对 AJAX 的封装参数比较多，而且，大部分在普通 Web 应用中用得很少，如果真是需要控制到那么精细的地步，我觉得首先应该反思一下设计。jQuery 的 AJAX 封装中，已经包括了两种异步请求类型， XHR ， script , 还差一种 iframe 就齐全了。同时， jQuery 的 AJAX 封装中，包括了对 jsonp 形式的支持。

9.1. 请求与回调

jQuery 的 AJAX ，核心的请求处理函数只有一个，就是 $.ajax() ，然后就是一个简单的上层函数。

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

jQuery.ajax( settings ): 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 参数值。默认是自动生成的一个随机值。

对于整套应用来说，其资源请求通常有一套约定的规则，使用 $.ajaxSetup() 可以配置参数的默认值，参数就是上面介绍的那些（不完整）。

$.ajax(options): AJAX 请求的默认配置。

前面提到过， $.ajax() 是一个核心函数，在其之上，有一些现成的封装，常用的是：

$.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ): GET 请求
$.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] ): POST 请求

9.2. 请求的状态

一个 AJAX 请求可以看成是一个触发了一连串事件的总事件。这样，对于全局的所有 AJAX 请求而言，我们可以在任意节点上，绑定到全局任意 AJAX 请求的每一个事件：

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

.ajaxStart(): 请求将要发出时
.ajaxSend(): 请求将要发出时(在 .ajaxStart() 后)
.ajaxSuccess(): 请求成功
.ajaxError(): 请求错误
.ajaxComplete(): 请求完成
.ajaxStop(): 请求结束(在 .ajaxComplete() 后)

上面这几个 ajax 的全局事件，一般只在 document 上处理。

9.3. 工具函数

.serialize(): 解析表单参数项，返回字符串。

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});
//a=1&b=2

.serializeArray(): 解析表单参数项，返回一个列表对象。

$('form').submit(function() {
  console.log($(this).serializeArray());
  return false;
});

//
[
  {name: 'a', value: '1'},
  {name: 'b', value: '2'}
]

10. 泛化回调

前面已经介绍过的 AJAX 是一种典型的异步回调的过程，我们发出请求，然后定义了当请求返回时要做什么事。显然，同样的机制可以应用于任何的地方，特别是在于 javascript 这种本来大部分时候都处于异步的运行环境中时，回调的方式更是大有用武之地。

好了，其实我要说的就是在除 AJAX 之外的地方，也应该有机制来支持我们使用异步回调。

10.1. Deferred

Deferred 对象是在 jQuery1.5 中引入的回调管理对象。其作用，大概就是把一堆函数按顺序放入一个调用链，然后根据状态，来依次调用这些函数。 AJAX 的所有操作都是使用它来进行封装的。比如我们定义的，当请求正常返回时，会调用 success 定义的函数，失败时，会调用 error定义的函数。这里的“失败”，“正常”就是状态，而对应的函数，只是调用链中的一个而且。

先来看一个直观的例子：

var obj = $.Deferred(function(a){});
obj.done(function(){console.log('1')});
obj.done(function(){console.log('2')});
obj.resolve();

这样，我们就可以按顺序看到 1 , 2 这两个输出了。

总的来说， 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() 的回调管理函数，可以用于方便地管理多个事件并发的情况，先看一个 AJAX 的“原始状态”例子：

var defer = $.ajax({
  url: '/json.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('haha')});

在 $.when() 中的 Deferred ，只要有一个是 fail ，则整体结果为 fail 。

Deferred 的回调函数的执行顺序与它们的添加顺序一致。

这里特别注意一点，就是 done / fail / always 与 then 的返回值的区别。从功能上看，它们都可以添加回调函数，但是，方法的返回值是不同的。前组的返回值是原来的那个 defer 对象，而 then 返回的是一个新的 defer 对象。

then 返回新的 defer 这种形式，可以用于方便地实现异步函数的链式调用。

比如对于：

var defer = $.ajax({
    url: '/json',
    dataType: 'json'
});

如果使用 done 方法：

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

等同于是调用了两次 defer.done , defer.done ，注册的两次回调函数依次被执行后，我们看到的输出是：

here
inner

这是两次 defer.done 的结果，第一个回调函数返回了一个新的 defer 没任何作用。

如果换成 then 方法的话：

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

上面的代码相当于：

var new_defer = defer.then(...);
new_defer.done(...);

它跟两次 defer.done 是不同的。 new_defer 会在 inner 那里的 defer 被触发时再被触发，所以输出结果是：

inner
here

更一般地来说 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

10.2. Callbacks

讲了 Deferred ，现在再来看 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(): 检查调用链是否被锁定

jQuery学习笔记