Jqury 进阶增强

代码抽象派
299 阅读1分钟

一、事件对象

A. event.currentTarget

示例：

在事件冒泡阶段中的当前
DOM
元素

$("p").click(function(event) {

alert( event.currentTarget === this ); // true

});

B. event.which

描述：

针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。

event.which

将
event.keyCode
和
event.charCode
标准化了。推荐用
event.which
来监视键盘输入

实例：

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>

<input id="whichkey" value="type something">

<div id="log"></div>

<script>

$('#whichkey').bind('keydown',function(e){

$('#log').html(e.type + ': ' + e.which ); });

</script>

</body>

</html>

二、监听JS变量的变化

三、延迟对象

C. deferred.done(doneCallbacks[,doneCallbacks])

概述

当延迟成功时调用一个函数或者数组函数
.

该参数可以是一个函数或一个函数的数组。当延迟成功时，
doneCallbacks
被调用。回调执行是依照他们添加的顺序。一旦
deferred.done()
返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加
.done()
方法。当延迟解决，
doneCallbacks
执行使用参数提供给
resolve
或
resolveWith
方法依照添加的顺序调用。有关详细信息，请参阅
Deferred object
。

参数

doneCallbacksFunction/ArrayV1.5

一个函数或者数组函数，延迟成功时调用

doneCallbacksFunction/ArrayV1.5

附加可选的函数或数组函数，延迟成功时调用

示例

描述
:

一旦
jQuery.get
方法返回一个来自延迟的对象的
jqXHR
对象，我们可以附加一个成功回调使用
.done
方法。

jQuery

代码
:

$.get("test.php").done(function() {

alert("$.get succeeded");

});

D. Objectdeferred.fail(failCallbacks[,failCallbacks])

概述

当延迟失败时调用一个函数或者数组函数
.
。

该参数可以是一个函数或一个函数的数组。当延迟失败时，
doneCallbacks
被调用。回调执行是依照他们添加的顺序。一旦
deferred.fail()
返回延迟对象，延迟对象的其它方法也可以链接到了这里，包括增加
.done()
方法。当延迟解决，
doneCallbacks
执行使用参数提供给
resolve
或
resolveWith
方法依照添加的顺序调用。有关详细信息，请参阅
Deferred object
。

参数

failCallbacksFunction/ArrayV1.5

一个函数或者数组函数，延迟失败时调用

failCallbacksFunction/ArrayV1.5

附加可选的函数或数组函数，延迟失败时调用

示例

描述
:

一旦
jQuery.get
方法返回一个
jqXHR
对象，这是从一个递延所得，可以附加的成功和失败回调使用
deferrred.done()
和
deferred.fail()
方法。

jQuery

代码
:

$.get("test.php")

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

延迟成功

.fail(function(){ alert("$.get failed!"); });//

延迟失败

E. deferred.promise([type],[target])

概述

返回一个
Promise
对象用来观察当某种类型的所有行动绑定到集合，排队与否还是已经完成。

.promise()

方法返回一个动态生成的
Promise
对象用来观察当某种类型的所有行动绑定到集合，排队与否还是已经完成。

默认情况下，
type
是
"fx"
，这意味着当选定的元素已完成所有动画是返回的
Promise
是解决的。

解决上下文和唯一的参数是哪个集合到
.promise()
被调用。

如果
target
是提供，
.promise()
将附加到它的方法，然后返回这个对象，而不是创建一个新的。这对在已经存在的对象上附加
Promise
的行为非常有用。

参数

typeStringV1.6

需要处理的字符串

targetObjectV1.5

附有
promise
方法的
Object

示例

描述
:

一个集合上使用
promise
，而没有动画解决的
promise
。

jQuery

代码
:

var div = $( "<div />" );

div.promise().done(function( arg1 ) {

// will fire right away and alert "true"

alert( this === div && arg1 === div );

F. deferred.always(alwaysCallbacks,[alwaysCallbacks])

概述

当递延对象是解决或拒绝时被调用添加处理程序。

参数

alwaysCallbacksV1.6

一个函数，或者函数数组，当递延对象是解决或拒绝时被调用。

alwaysCallbacksV1.6

附加可选的一个函数，或者函数数组，当递延对象是解决或拒绝时被调用。

示例

描述
:

jQuery.get

（）方法返回一个来自一个延迟的对象的
jqXHR
对象，我们可以附加一个成功和错误使用
deferred.always
（）方法的回调。

jQuery

代码
:

$.get("test.php").always( function() {

alert("$.get completed with success or error callback arguments");

} );

四、应用

A. 纠结请求先后的顺序的问题（非阻塞解决）

可以用于处理有着先后顺序或者依赖的多个
Ajax
请求

var promise = $.ajax("/myServerScript1");

function getStuff() {

return $.ajax("/myServerScript2");

}

promise.then(getStuff).then(function(myServerScript2Data){

// Do something

});

B. 为多个操作指定回调函数

上文提到过，
Deferred
对象允许你为多个事件指定一个回调函数，这是传统写法做不到的。请看下面的代码，它用到了一个新的方法
$.when()
：

$.when($.ajax("test1.html"), $.ajax("test2.html"))

.done(function(){ alert("

哈哈，成功了！
"); })

.fail(function(){ alert("

出错啦！
"); });

这段代码的意思是，先执行两个操作
$.ajax("test1.html")
和
$.ajax("test2.html")
，如果都成功了，就运行
done()
指定的回调函数；如果有一个失败或都失败了，就执行
fail()
指定的回调函数。

$.when()

的参数只能是
deferred
对象，如果不是，则
done
会立即执行：

var wait = function(){

var tasks = function(){

alert("

执行完毕！
");

};

setTimeout(tasks,5000);

};

$.when(wait())

.done(function(){ alert("

哈哈，成功了！
"); })

.fail(function(){ alert("

出错啦！
"); });

参考来自：

blog.csdn.net/ssisse/arti…

https://www.jquery123.com/category/deferred-object/


avatar
文章
阅读
粉丝