锋利的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])通过不透明度变化来切换元素的可见性