jquery进阶(一)

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情

Jquery的事件对象,最简单也最容易被忽略。学会了原生的事件,对于封装一些工具类就很方便了

一、事件对象

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>
复制代码

二、延迟对象

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

概述

当延迟成功时调用一个函数或者数组函数。 该参数可以是一个函数或一个函数的数组。当延迟成功时,doneCallbacks被调用。回调执行是依照添加的顺序。一旦deferred.done()返回延迟对象,延迟对象的其它方法也可以链接到了这里,包括增加.done()方法。当延迟解决,doneCallbacks执行使用参数提供给resolveresolveWith方法依照添加的顺序调用。

参数

doneCallbacksFunction,一个函数或者数组函数,延迟成功时调用,附加可选的函数或数组函数,延迟成功时调用

描述

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

代码

$.get("test.php").done(function() {
  alert("$.get succeeded");
});
复制代码

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

概述

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

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

参数

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

描述

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

代码

$.get("test.php")
  .done(function(){ //延迟成功
  alert("$.get succeeded"); 
}).fail(function(){ 
  alert("$.get failed!"); 
});//延迟失败
复制代码

猜你喜欢

转载自juejin.im/post/7128195962429767694