jQuery中的链式操作

本周的日常……晚上再发，这不是日常……

我们都造，在JavaScript中通过下面的方式，可以做到链式操作。

function example(){
    //code block
    return this
}

那么……在奇技淫巧的jQuery中就更多了……以下就当是学习笔记吧 菊苣们请不要吐槽QAQ

jQuery中神奇的$操作符，能干的事好多呀……不仅可以进行元素的筛选，还可以返回一个元素(如下图)……那么机会来了。

假如需要创建一个元素并临时的赋予其一些属性，那么链式操作就很好玩啦……这里有一个小例子。

$("div#example").append(
	$("<div>").attr({"id":"examplechild","title":"some text"})
	          .css({"display":"none"})
                  .text('233');
);
//相当于
$("div#example").append("<div></div>");
$("div#example div:last").attr({"id":"examplechild","title":"some text"});
$("div#examplechild").css({"display":"none"});
$("div#examplechild").text('233');

QAQ我本来是对齐的……

这不优雅?可能吧……

jQuery还有个很厉害的东西叫.done() 可以在一个Deferred对象执行完成后链式调用。

给个jQuery官方例子

$.get("test.php").done(function() {
  alert("$.get succeeded");
});

配合.when()就更酷炫了，基本ajax队列问题就解决了……

$.when($.ajax("/page1.php"), $.ajax("/page2.php")).done(function(a1,  a2){
  /* a1 and a2 are arguments resolved for the
      page1 and page2 ajax requests, respectively */
  var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
  if ( /Whip It/.test(jqXHR.responseText) ) {
    alert("First page has 'Whip It' somewhere.");
  }
});

以上代码的作用是当两个ajax请求都成功时执行.done()中的callback function

如果想无论如何都执行callback function的话，把.done()换成.always()就行啦。

这里有关于延迟对象的说明：http://jquery.bootcss.com/category/deferred-object/