锋利的jQuery之jQuery中的事件与动画

1.jQuery中的事件

 

1.1加载DOM

$(document).ready()方法与window.onload方法之间比较：

执行时机

window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行的，这时JavaScript才能访问网页中的任何元素。而$(document).ready()方法在DOM完全就绪时就可以被调用。此时网页中的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素的关联文件都已下载完毕。$(window).load(function(){})等价于window.onload.

多次使用

window.onload不能实现多次使用，只有最后一次使用有效。而$(document).ready()可以多次使用。

简写方式

window.onload没有简写方式，$(document).ready()可以简写为$().ready()或$().

1.2事件绑定

bind(type [, data], fn)

第一个参数是事件类型，类型包括：blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mouseover,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup和error等，还可以自定义名称。

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

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

1.3事件对象的属性

event.type

获取事件类型

event.preventDefault()

阻止默认的事件行为。

event.stopPropagation()

阻止事件的冒泡

event.target

获取触发事件的元素

event.relatedTarget

获取事件的相关元素

event.pageX,event.pageY

获取光标相对于页面的x坐标与y坐标

event.which

获取鼠标事件中的左，中，右键，分别返回1，2，3。

event.metaKey

键盘事件中获取<ctrl>键

1.4移除事件

unbind([type], [data])

第一个参数是事件类型，第二个参数是要移除的函数。

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

如果提供了事件类型，则删除该类型的绑定事件。

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

另外，对于只需要触发一次的事件，可以使用jQuery提供的one()方法。

one(type, [data], fn),语法与bind方法类似。

1.5模拟操作

常用模拟

$element.trigger("click")等价于$element.click()

触发自定义事件

$element.trigger("myClick")

传递数据

trigger(type [, data])

该方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。

执行默认操作

一般在触发事件时，浏览器同时会有一些默认操作，比如说获得焦点。如果只想触发绑定的事件，而不想执行浏览器的默认操作，可以使用triggerHandler()方法。

1.6其他用法

绑定多个事件类型

可以用bind方法绑定多个事件，事件之间用空格隔开。

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

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

删除多个事件类型可以用链式操作。

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

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

$element.bind("click", f1(){});

$element.bind("click.plugin", f2(){});

$element.trigger("click!"); //触发所有的不包含在命名空间中的click事件

$element.trigger("click"); //触发所有的click事件

 

 

2.jQuery中的动画

 

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

show()方法和hide()方法

用于控制元素的显示与隐藏。

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

给方法传入参数，来控制元素显示与隐藏过程的快慢或持续时间。可以传入"slow","normal","fast"或者持续时间（以毫秒为单位）。

2.2fadeIn()方法和fadeOut()方法

用于改变元素的不透明度。fadeOut会降低元素的不透明度，直至元素完全消失。fadeIn方法则刚好相反。

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

用于改变元素的高度。slideDown方法可以使元素由上至下延伸显示，slideUp则刚好相反。

2.4自定义动画方法animate()

animate(params, speed, callback)

params一个包含样式属性及值的映射，比如{p1: "v1", p2: "v2"}

speed速度参数，可选

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

自定义简单动画

$element.animate({left: "500px"}, 1000)

累加累减动画

$element.animate({left: "+=500px"}, 1000)

多重动画

同时执行多个动画 $element.animate({left: "500px", top: "100px"}, 1000)

按顺序执行多个动画 $element.animate({left: "500px"}, 1000).animate({top: "100px"}, 1000)

综合动画

$element.animate({left: "500px", top: "100px"}, 1000)

.animate({opacity: "0.5"}, 1000)

.fadeOut(slow);

2.5动画回调函数

当需要在动画结束时执行某项操作时，即可使用动画回调函数。

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

停止元素的动画

stop([clearQueue], [gotoEnd])

两个参数都是可选参数，为Boolean值。clearQueue决定是否清空未执行完的动画队列，gotoEnd决定是否将当前正在执行的动画直接跳至最终状态。

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

$element.is(":animated")

延迟动画

delay()方法，用于动画的延时。

2.7其他动画方法

toggle(speed, [callback])切换元素的可见状态

slideToggle(speed, [easing], [callback])通过高度变化切换元素的可见性

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

fadeToggle(speed, [easing], [callback])通过不透明度变化来切换元素的可见性