学习笔记《锋利的jQuery》-jQuery中的事件和动画

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的元素发生某些变化和操作时，浏览器会自动生成一个事件。例如当浏览器装载完一个文档后，会生成事件；当用户单击某个按钮时，也会生成事件。虽然利用传统的JavaScript事件能完成这些交互，但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。

一、jQuery中的事件

1、加载DOM

页面所有元素（包括元素内容）加载完毕后触发。

$(window).load(function(){

      //编写代码

})

等价于JavaScript中的以下代码：

window.onload = function(){

    //编写代码

}

页面所有DOM（不包括元素内容）加载完毕后触发。

$(document).ready(function(){

//编写代码

})

$(document).ready(function(){

//编写代码

})

$(function(){

//编写代码

})

上面三种形式等价。

2、事件绑定

bind(type,[,data],fn);

第一个参照type是事件类型，类型包括blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouselever,change,select,submit,keydow n,keypress,keyup和error等。

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

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

eg：$(function(){

$("#panel h5.head").bind("click",function(){

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

});

});

还可以简写成如下形式：

$(function(){

$("#panel h5.head").click(function(){

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

});

});

3、合成事件

hover(enter,leave)方法用于模拟光标悬停事件。当光标移入元素上时，会触发指定的enter函数；当光标移出这个元素时，会触发指定的leave函数。例如：

$(function(){

$("#panel h5.head").hover(

        function(){

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

       },

function(){

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

}

);

});

toggle(fn1,fn2,fn3......fnN)方法用于模拟鼠标连续单击事件。第一次单击时，触发指定的第一个函数fn1；第二次单击时，触发指定的第二个函数fn2；如果有更多的函数，依次触发，直到最后一个。循环触发。例如：

$(function(){

$("#panel h5.head").toggle(

        function(){

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

       },

function(){

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

}

);

});

4、事件冒泡

页面中有多个元素，元素之间是嵌套关系。当这些元素都绑定了click事件时，单击最里边元素时，会按照触发元素由里向外的click事件，这就是事件冒泡。

可以通过下面三种方式来阻止冒泡：

$("span").bind("click",function(event){

//第一种方式 停止事件冒泡

event.stopPropagation();

//第二种方式  阻止默认行为（主要用于表单校验未通过，阻止表单提交）

event.preventDefault();

//第三种方式

return false;

});

5、事件对象的属性

jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器中都能正常运行，而不需要进行浏览器的判断。

event.type属性 获取事件类型

event.preventDefault()方法 阻止默认事件行为 JavaScript在IE中无效，jQuery对其进行了封装，使之兼容各种浏览器。

event.stopPropagation方法 停止事件冒泡 JavaScript在IE中无效，jQuery对其进行了封装，使之兼容各种浏览器。 

event.target 获取触发事件的元素 eg:e.target.href

event.relatedTarget属性 在mouseover中相当于IE浏览器的event.fromElement属性，在mouseout中相当于IE浏览器的event.toElement属性。

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

event.which属性 获取鼠标单击事件中的左、中、右键；获取键盘事件中的按键。

event.metaKey属性 键盘事件中获取ctrl按键

event.originalEvent属性 指向原始的事件对象

6、移除事件

$("#btn").unbind() ;//删除所有绑定的事件

$("#btn").unbind(“click”) ;//删除所有单击事件

$("#btn").unbind(“click”,myFun2) ;//删除单击事件绑定的函数myFun2

7、模拟操作

常用模拟，两种形式：

第一种，$("#btn").trigger("click");

第二种，$("#btn").click();

触发自定义事件，例如：

$("#btn").bind("myClick",function(){ alert("I am xiaohu!"); });

$("#btn").trigger("myClick");

传递数据

trigger(type,[,data]); 第一个参数是触发的事件类型，第二个参数是传递给事件处理函数的附加数据，以数组的形式传递。例如：

$("#btn").bind("myClick",function(event,msg1,msg2){ alert("I am xiaohu!"+msg1+msg2); });

$("#btn").trigger("myClick",["我的","测试"]);

执行默认操作

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

$("input").trigger("focus");不仅仅触发了<input>元素绑定的focus事件，而会使<input>元素本身获取焦点。如果只想触发绑定的focus事件，不不想执行浏览器的默认操作，可以调用另外一个方法，triggerHandler()方法。$("input").triggerHandler("focus");

8、其它方法

绑定多个事件类型

$(function(){

$("div").bind("mouseover mouseout ",function(){

$(this).toggleClass("over");

});

});

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

$("#btn").bind("click.plugin",function(){ alert("I am xiaohu!"); });

$("#btn").bind("dblclick.plugin",function(){ alert("I am xiaohu!"); });

$("#btn").bind("mouseover",function(){ alert("I am xiaohu!"); });

$("#del").bind("click",function(){  $("#btn").unbind(".plugin"); });//只删除命名空间为plugin的函数。

相同的事件名称，不同的命名空间执行方法

$("#btn").bind("click",function(){ alert("I am xiaohu!"); });

$("#btn").bind("click.plugin",function(){ alert("I am xiaohu!"); });

$("#btn").trigger("click!");//调用不包括在命名空间内的方法，只调用第一个方法。

$("#btn").trigger("click");//调用上面两个方法

二、jQuery中的动画

动画效果也是jQuery库吸引人的地方。通过jQuery的动画方法，能够轻松地为网页添加非常精彩的视觉效果，给用户一种全新的体验。

1、show()方法和hide()方法

    当不带任何参数时，相当于css("dispaly","none/block/inline")，作用是立即隐藏或显示匹配的元素，不会执行任何动画。如果需要让元素动起来，可以在方法中加参数。例如：

    $("element").show("slow"); //slow 600ms 、normal 400ms、fast 200ms。

    如果使元素1秒钟内显示出来，还可以写成： $("element").show(1000);

2、fandIn()方法和fandOut()方法

  fandIn()方法和fandOut()方法只改变元素的不透明度。fandOut()方法只在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display:none”），fandIn()方法则相反。

3、slideUp()方法和slideDown()方法

  slideUp()方法和slideDown()方法只改变元素的高度。如果一个元素的display属性值为none，当调用slideDown()方法时会由上自下延伸显示。slideUp()方法则相反，原始会将由下向上隐藏。

4、自定义动画方法animate()

  animate(params,speed,callback);params：一个包含样式属性及值的映射；speed：速度参数，可选；callback：在动画完成时执行的函数，可选。例如：

   $("#panel").click(function(){

            $(this).animate({left:"500px;",3000}//右移500px

   }); 

   $("#panel").click(function(){

           $(this).animate({left:"+=500px;",3000}//在当前位置累加500px

     });

   $("#panel").click(function(){

          $(this).animate({left:"500px”;height:"200px"},3000);//多重动画

   });

5、动画回调函数

$("#panel").click(function(){

        $(this).animate({left:"500px;height:200px"},3000,function(){

                    $(this).css("border","5px solid blue");

             });

    });

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

 stop([clearQueue] [,gotoEnd]); 立即停止当前动画。clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

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

       //如果没有，则添加新动画

}

7、其它动画方法

toggle(speed,[callback]) //切换元素可见状态。如果元素是可见的，则切换为隐藏；如果元素是隐藏的，则切换为可见的。

sildeToggle(speed,[callback])//通过高度变化来切换匹配元素的可见性。

fadeTo(speed,opacity,[callback])//把元素的不透明度以渐进的方式调整到指定的值。

8、动画方法概括

 

动画方法说明

方法名	说明
show()和hide()	同时修改多个样式属性即高度、宽度和不透明度
fandIn()和fandOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fandTo()	只改变不透明度
toggle()	用来代替show()和hide()方法，所以会同时修改多个样式属性即高度、宽度和不透明度
sildeToggle()	用来代替slideUp()和slideDown()，所有只能改变高度
animate()	用于自定义动画，以上方法实质内部都调用了animate()方法。

 用animate()方法代替show()方法：

$("p").animate({height:"show",width:"show",opacity:"show"},400); 相当于：$("p").show(400);

用animate()方法代替fandIn()方法：

$("p").animate({opacity:"show"},400); 相当于：$("p").fandIn(400);

用animate()方法代替slideDown()方法：

$("p").animate({height:"show"},400); 相当于：$("p").slideDown(400);

用animate()方法代替fandTo()方法：

$("p").animate({opacity:"0.6"},400); 相当于：$("p").fandTo(400,0.6);

事实上，这些动画就是animate()方法的一种内置了特定样式属性的简写形式。在animate()方法中，这些特定样式的属性值可以为“show”、“hide”、“toggle”，也可以是自定义数字值。