jQuery读书笔记（四）——jQuery 中的事件和动画

1.jQuery 中的事件

1.1 加载 DOM

JS 中用 window.onload 方法 ——慢

在 jQuery 中，使用 $(document).ready() 方法 ——快

以下介绍两种方法的区别

 

1.1.1 执行时机

 

window.onload 是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行。而通过 $(document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。

jQuery 中的 load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容（包括窗口、框架、对象和图像等）加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

$(window).load(function(){

// 编写代码

})

等价于 JS 代码：

window.onload = function(){

       // 编写代码

}

       1.1.2 多次使用

 

JS 中的 onload 事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数，因此不能在现有的行为上添加新的行为。

每次调用 jQuery 的 $(document).ready() 方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

 

       1.1.3 简写方式

 

              三种方式：

              （ 1 ） $(document).ready(function(){

       // 编写代码；

})

              （ 2 ） $(function(){

       // 编写代码；

})

              （ 3 ） $().ready(function(){

       // 编写代码；

}

1.2 事件绑定

 

       bind() 绑定方法：   bind （ type [, data] , fn ）

       bind() 方法有 3 个参数。

       第 1 个参数是事件类型，包括： blur, focus, load, resize, scroll, unload, click, dblclick,

mousedown, ouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup 和 error 等。

       第 2 个参数为可选参数，座位 event.data 属性值传递给事件对象的额外数据对象。

       第 3 个参数则是用来绑定的处理函数。

              $(function(){

       $(“p”).bind(“click”,function(){

// 编写代码；

})

})

              可以简写成：

              $(function(){

       $(“p”). click(function(){

// 编写代码；

})

})

1.3 合成事件

       jQuery 有两个合成事件—— hover() 方法和 toggle() 方法。

（1）        hover() 方法

结构： hover(enter,leave);

$(function(){

       $(“p”).hover (function(){

$(this).next().show();

},function(){

$(this).next().hide();

});

});

等价于：

$(function(){

       $(“p”).mouseover (function(){

$(this).next().show();

});

$(“p”).mouseout(function(){

$(this).next().hide();

});

});

（2）        toggle() 方法

结构：   toggle(fn1, fn2, ……， fnN);

toggle() 方法用于模拟鼠标连续单击事件。

$(function(){

       $(“p”).toggle (function(){

$(this).next().show();

},function(){

$(this).next().hide();

});

});

toggle() 方法在 jQuery 中还有另外一个作用：切换元素的可见状态。如果元素是可见的，单击切换后则隐藏，如果元素是隐藏的，单击切换后则可见。

 

1.4 事件冒泡

 

       在页面上可以有多个事件，也可以多个元素响应同一个事件。

       点击内层的元素，同时触发外层元素的点击事件。

       为了解决这个问题，介绍以下内容：

（1）        事件对象

$(“element”).bind(“click”,function(event){    //event: 事件对象

})

当单击“ element “元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

（2）        停止事件冒泡

jQuery 中提供了 stopPropagation() 方法来停止事件冒泡。

$(“element”).bind(“click”,function(event){    //event: 事件对象

……

event.stopPropagation();   // 停止事件冒泡

})

（3）        阻止默认行为

单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。

在 jQuery 中 ， 提供了 preventDefault() 方法来阻止元素的默认行为。

如果像同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回 false 。这是对在事件对象上同时调用 stopPrapagation() 方法和 preventDefault() 方法的一种简写方式。

event.stopPropagation();    // 停止事件冒泡  

改写为： return false;

event.preventDefault();    // 阻止默认行为  

改写为： return false;

（4）        事件捕获

事件捕获和事件冒泡刚好相反的两个过程，事件捕获是从最顶端往下开始触发。

并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过 JS 来修复。 jQuery 不支持事件捕获，如需要，直接使用原生的 JS 。

 

1.5 事件对象的属性

 

       （ 1 ） event.type 属性 获取事件的类型

       （ 2 ） event.preventDefault() 方法 阻止默认事件行为

       （ 3 ） event.stopPropagation() 方法 阻止事件的冒泡

       （ 4 ） event.target 属性 获取到触发事件的元素

       （ 5 ） event.relatedTarget 属性

              在标准 DOM 中， mouseover 和 mouseset 所发生的元素可以通过 event.target() 方法来访问，相关元素是通过 event.relatedTarget 属性来访问。

（ 6 ） event.pageX/event.pageY 属性   获取到光标相对于页面的 x 坐标和 y 坐标。

（ 7 ） event.which 属性 在鼠标事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

（ 8 ） event.metaKey 属性 指向原始的事件对象

 

1.6 移除事件

 

       不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

（1）        移除按钮元素上以前注册的事件

unbind （ [type][, data] ） ;

第 1 个参数的事件类型，第 2 个参数是将要移除的函数。具体说明如下

（a）        如果没有参数，则删除所有绑定的事件

（b）        如果提供了事件类型作为参数，则只删除该类型的绑定事件。

（c）        如果把在绑定时传递的处理函数作为第 2 个参数，则只有这个特定的事件处理函数会被删除。

（2）        移除 <button> 元素的其中一个事件

需将这些匿名处理函数指定一个变量。  

myfun1 = function(){ …… }

然后就可以单独删除某一个事件了

         $(‘btn’).unbind(“click”,myfun1);  // 删除“绑定函数 1 ”

（3）        one() 方法 只需要触发一次，随后就立即解除绑定

结构： one （ type, [data], fn ） ;

1.7 模拟操作

 

       （ 1 ）常用模拟

trigger() 方法 模拟操作

$(‘#btn’).trigger(“click”);

可以简写： $(‘#btn’).click();

（ 2 ）触发自定义事件

       trigger() 方法不仅能触发浏览器支持的具有相同名称的事件，也可以出发自定义名称的事件。

$(‘#btn’).trigger(“myclick”);

（ 3 ）传递数据

       trgger （ type [,data] ）方法有两个参数，第 1 个参数是要触发的事件类型，第 2 个参数是要传递给事件处理函数的附加数据，以数据形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

$(‘#btn’).trigger(“myclick”, [ “我的自定义”，“事件” ]);

（ 4 ）执行默认操作

trigger() 方法触发事件后，会执行浏览器默认操作。

$(‘input’).trigger(“focus”);

triggerHandler() 方法

只触发绑定事件，不执行浏览器默认操作

 

1.8 其他方法

 

       （ 1 ）绑定多个事件类型

              $(function(){

                     $(“div”).bind(“mouseover mouseset”, function(){

       $(this).toggleClass(“over”);

});

});

（ 2 ）添加事件命名空间，便于管理

       $(“div”).bind(“click.plugin”,function(){

              $(“body”).append(“<p>click 事件 </p>”);

})

在所绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。

$(“div”).unbind(“.plugin”);

       （ 3 ）相同事件名称，不同命名空间执行方法

              $(function(){

              $(“div“).bind(“click“,function(){

       $(“body“).append(“<p>click 事件 </p>“);

});

$(“div“).bind(“click.plugin“,function(){

       $(“body“).append(“<p>click.plugin 事件 </p>“);

});

$(“button“).click(function(){

       $(“div“).trigger(“click!“);  // 注意 click 后面的感叹号

});

})

当单击 <div> 元素后 ， 会同时出发 click 事件和 click.plugin 事件。只触发 click 事件而不触发 click.plugin 事件， trigger(“click!“) 后面的感叹号的作用是匹配所有不包含在命名空间中的 click 方法。如果两个都出发，去掉感叹号 $(“div“).trigger(“click“) 。

 

2. jQuery 中的动画

2.1 show() 方法和 hide() 方法

 

       $(“element”).show();

       $(“element”).hide();

$(“element”).show(“fast”);

$(“element”).show(200);  // 可以加时间参数

       速度参数： fast （ 200 ）， normal （ 400 ）， slow （ 600 ）

 

2.2    fadeln() 方法和 fadeOut() 方法

 

fadeln() 方法和 fadeOut() 方法改变元素的不透明度。 fadeOut() 方法在指定的一段时间内降低元素的不透明度，直到元素完全消失。 fadeIn() 方法则相反。可以加速度参数

 

2.3    slideUp() 方法和 slideDown() 方法

 

slideUp() 方法和 slideDown() 方法只会改变元素的高度。当调用 slideDown() 方法是，这个元素将由上至下延伸显示。 slideUp() 方法正好相反，元素将由下到上缩短隐藏。可以加速度参数

 

2.4    自定义动画方法 animate()

结构： animate(params, speed, callback);

参数说明：

（ 1 ） params ：一个包含样式属性及值的映射，比如： {property1:”value1”, property2:”value2”, …… }

（ 2 ） speed ：速度参数，可选。

（ 3 ） callback ：在动画完成时执行的函数，可选。

 

2.4.1 自定义简单动画

 

        $(this).animate({left:”500px”},300);

2.4.2 累加、累减动画

 

        $(this).animate({left:”+=500px”},300);

2.4.3 多重动画

 

（ 1 ）同时执行多个动画

        $(this).animate({left:”+=500px”,height:”200px”},300);

（ 2 ）按顺序执行多个动画

$(this).animate({left:”+=500px”},300);

$(this).animate({height:”200px”},300);

2.5    动画回调函数

 

callback 回调函数适用于 jQuery 所以的动画效果方法

$(“#element”).slideDown(“normal”,function(){

// 在效果完成做其它的事情

})

2.6    停止动画和判断是否处于动画状态

 

2.6.1 停止元素的动画

 

stop([clearQueue][, gotoEnd]);

参数 clearQueue 和 gotoEnd 都是可选的参数，为 Boolean 值（ true 或 false ）。 clearQueue 代表是否要清空未执行完的动画队列， gotoEnd 代表是否直接将正在执行的动画跳转到末状态。

 

       2.6.2 判断元素是否处于动画状态

 

              if(!$(element).is(“:animated”)){     // 判断元素是否正处于动画状态

       // 如果当前没有进行动画，则添加新动画

}

2.7    其他动画方法

 

（ 1 ） toggle() 方法

        切换元素的可见状态。

（ 2 ） slideToggle() 方法

        通过高度变化来切换匹配元素的可见性。

        $(“p”).click(function(){

               $(this).next().slideToggle();

})

等价于：

$(“p”).toggle(function(){

               $(this).next().slideUp();

} ， function(){

               $(this).next().slideDown();

});

       （ 3 ） fadeTo() 方法

              把元素的不透明度以渐进方式调整到指定的值。

        $(“p”).click(function(){

               $(this).next().fadeTo(600,0.2);

})

内容会渐渐调整到指定的不透明度（ 20% ）