jquery中的事件和动画

第4章 jquery中的事件和动画

jquery中的事件

加载DOM

js中：window.onload

juqry中：$(document).ready()

可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。

执行时机

window.onload方法是在网页中所中的元素完全加载到浏览器后才执行，即js此时才可以访问网页中的任何元素。

$(document).ready()在DOM完全就绪时就可以被调用。

load()方法

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

$(window).load(function(){ ... })

等价于

window.onload=function(){ ... }

多次使用

window.onload = one;

window.onload = two;

只会执行第二个；

$(document).ready(function(){

one();

two();

})

两个都执行。

简写方式

$(document).ready(function(){ ... });

$().ready(function(){ ... });

$(function(){ ... })

事件绑定

bind()

bind(type[,data],fn);

第1个参数是事件类型，包括blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleaye,chage,select,submit,keydown,keypress,keyup和error等，也可以是自定义名称。

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

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

简写绑定事件

$(".head").bind("mouseover",function(){

$(".content").show();

})

$(".head").mouseover(function(){ ... })

合成事件

hover（）方法

hover(enter,leave)

用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数enter;当光标移出这个元素时，会触发指定的第2个函数leave。

注：hover()方法准确来说是替代jquery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")

toggle()方法

toggle(fn1,fn2,...fnN)

用于模拟连续单击事件。随后的每次单击都重复对这几个函数的轮番调用。

$(标题).toggle(function(){

//内容显示

},function(){

//内容隐藏

})

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

事件冒泡

事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

事件对象

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

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

停止事件冒泡 stopPropagation()

可以阻止事件中其他对象的事件处理函数被执行。

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

var txt=$("#msg").html(txt);

event.stopPropagation();

})

阻止默认行为

preventDefault()

event.preventDefault(); 可以改为 return false;

事件捕获

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

jquery不支持事件捕获。

事件对象的属性

event.type()方法

可以获取到事件的类型

$(“a”).click(function(event){

alert(event.type);

return false;

})

返回click

event.preventDefault()方法

阻止默认事件行为，js中在ie无效，jquery可以兼容各浏览器。

event.stopPropagation()方法

阻止事件的冒泡

event.target()方法

获取到触发事件的元素。

$(“a[href=http://google.com]”).click(function(event){

alert(event.target.href);

return false;

})

event.relatedTarget()方法

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

event.pageX()方法和event.pageY()方法

获取到光标相对于页面的X坐标和Y坐标。

$(“a”).click(function(event){

alert(“current mouse position:” + event.pageX + “,” + event.pageY); //获取鼠标当前相对于页面的坐标

return false;

})

event.which()方法

在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

$(function(){

$("body").mousedown(function(e){

alert(e.which);//显示：1 鼠标左键，2 鼠标中键，3 鼠标右键

})

})

event.metaKey()方法

键盘事件中获取ctrl按键

event.originalEvent()

指向原始的事件对象。

移除事件

unbind()

unbind([type][,data]);

第1个参数是事件类型，第2个参数是将要移除的函数。

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

one()

one(type,[data],fn)

为元素绑定处理函数。当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。

模拟操作

常用模拟

trigger()

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

$("#btn").click();

触发自定义事件

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

$("#btn").bind("myclick",function(){

$("#test").append("<p>我的绑定函数1</p>");

})

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

传递数据

trigger(type[,data])

第1个参数是要触发的事件类型

第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。

通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

执行默认操作

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

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

以上代码不仅会触发为<input>元素绑定的focus事件，也会使<input>元素本身得到焦点（这是浏览器的默认操作）。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jquery中另一个类似的方法：triggerHandler()方法。

bind()的其它用法

绑定多个事件类型

$(function(){

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

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

});

});

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

可以把为元素绑定的多个事件类型用命名空间规范起来。

$(function(){

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

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

});

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

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

})

});

删除多个事件代码也可以写为以下链式代码。

$(“div”).unbind(“click”).unbind(“mouseover”);

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

可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用。

$(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事件，如果只是单击button元素，则只触发click事件，而不触发click.plugin事件。注意，trigger(“click!”)后面的感叹号的作用是匹配所不包含在命名空间中的click方法。

如果需要两者都被触发，则$(“div”).trigger(“click”);

jqeury中的动画

show()方法和hide()方法

是jquery中最基本的动画方法。

在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为”none”

$(“element”).hide(); 同 element.css(“display”,”none”);

当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态。

$(“element”).show();

show()方法和hide()方法让元素动起来

show()方法和hide()方法在不带任何参数的情况下，相当于css(“display”,”none/block/inline”)，作用是立即隐藏或显示匹配的元素，不会有任何动画。

如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定的一个速度参数。例如指定 一个速度关键字”show”。

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

slow:600毫秒

normal:400毫秒

fast:200毫秒

还可以为显示速度指定一个数字，单位是毫秒。

$(“element”).show(1000)

fadeIn()方法和fadeOut()方法

在指定的一段时间内降低元素的不透明度，直到元素完全消失。fadeInt()相反。

slideUp()方法和slideDown()方法

只会改变元素的高度。

如果一个元素的display为none,当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。

注：jquery中的任何动画效果，都可以指定3种速度参数，即slow,normal和fast。当使用速度关键字时要加引号show(“slow”)，如果用数字作为时间参数时就不需要加引号show(1000)。

show()方法和hide()方法会同时修改元素的多个样式属性，即高度、宽度和不透明度；fadeOut()方法和fadeIn()方法只会修改元素的不透明度；slideDown()方法和slideUp()方法只会改变元素的高度。

自定义动画方法animate()

animate(params,speed,callback);

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

speed:速度参数，可选

callback:在动画完成时执行的函数，可选

自定义简单动画

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

$(this).animate({left:"500px"},3000)

})

累加、累减动画

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

$(this).animate({left:"+=500px"},1500)

})

多重动画

同时执行多个动画

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

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

})

按顺序执行多个动画

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

$(this).animate({left:"500px"},1500);

$(this).animate({height:"200px"},1500);

})

或者用链式写法

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

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

})

综合动画

单击元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%,然后再让它从上下到移动，同时它的宽度变大，当完成这些效果后，让它以淡出的方式隐藏。

$(function(){

$("#panel").css("opacity","0.5"); //设置不透明度

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

$(this).animate({left:"400px",height:"200px",opacity:"1"},1500)

.animate({top:"200px",width:"200px"},1500)

.fadeOut("slow");

})

})

动画回调函数

css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。

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

$(this).animate({left:"400px",height:"200px",opacity:"1"},1500)

.animate({top:"200px",width:"200px"},1500,function(){

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

})

})

注：callback回调函数适用于jquery所有的动画效果方法。

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

停止元素的动画stop()

stop([clearQueue][,gotoEnd]);

clearQueue和gotoEnd为都是可选参数，为Boolean值（true或false）。

clearQueue代表是否要清空未执行完的动画队列。

gotoEnd代表是否直接将正在执行的动画跳转到末状态。

stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。

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

$(this).stop().animate({height:"150",width:"300"},200);

},function(){

$(this).stop().animate({height:"22",width:"60"},300)

})

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

判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

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

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

}

其他动画方法

toggle()方法

切换元素的可见状态。如果元素是可见的，则切换为隐藏；如果元素是隐藏的，则切换为可见。

$(“#panel .head”).click(function(){

$(this).next(“div.content”).toggle();

})

相当于如下代码

$(“#panel .head“).toggle(function(){

$(this).next(“div.content”).hide();

},function(){

$(this).next(“div.content”).show();

})

slideToggle()方法

通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。

$(“#panel .head”).click(function(){

$(this).next(“div.content”).slideToggle();

})

相当于如下代码

$(“#panel .head“).toggle(function(){

$(this).next(“div.content”).slideUp();

},function(){

$(this).next(“div.content”).slideDown();

})

fadeTo()方法

可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。

$(“#panel .head”).click(function(){

$(this).next(“div.content”).fadeTo(600,0.2);

})

动画方法概括

１改变样式属性

方法名

说明

hide()和show()

同时修改多个样式属性即高度、宽度和不透明度

fadeIn和fadeOut()

只改变不透明度

slideUp和slideDown()

只改变高度

fadeTo()

只改变不透明度

toggle()

用来代替hide()方法和show方法，所以会同时修改多个样式属性即高度、宽度和不透明度

slideToggle()

用来代替slideUp()方法和slideDown()方法，所以只能改变高度

animate()

属于自定义动画的方法，以上各种动画方法实质内部都调用了animate()方法。直接使用animate()方法还能自定义其它的样式属性，如left,margin-left,srcolltop等。

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

$(“p”).animate({height:”show”,width:”show”,opacity:”show”},400);

等价于

$(“p”).show(400);

用animate()方法代替fadeIn()方法

$(“p”).animate({opacity:”show”},400);

等价于

$(“p”).fadeIn(400);

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

$(“p”).animate({height:”show”},400);

等价于

$(“p”).slideDown(400);

用animate()方法代替fadeTo()方法

$(“p”).animate({opacity:”0.6”},400);

等价于

$(“p”).fadeTo(400,0.6);

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

动画队列

一组元素上的动画效果

当在一个animate()方法中应用多个属性时，动画是同时发生的。

当以链式的写法应用动画方法时，动画是按照顺序发生的。

多组元素上的动画效果

默认情况下，动画都是同时发生的。

当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

另外，在动画方法中，要注意其他非动画方法会插队。要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中。