jQuery学习笔记(四) 事件及特效

辛苦堆砌，转载请注明出处，谢谢！



1.事件注册及撤销

(1)事件注册

bind(eventType,function)，bind(eventType,data,function)，bind(map)，bind(eventType,boolean)

上面四个函数用来注册事件，其中boolean参数的比较特殊，它可以用来阻止事件执行默认行为。这四个方法不会对之后新添加的DOM元素进行事件绑定。

one(eventType,function)，one(eventType,data,function)

同bind，不同之处是事件处理函数只执行一次，之后自动撤销绑定。

on(events,selector,function)，on(events,selector,data,function)，on(map,selector,data)

on方法和bind作用基本类似，但是on方法通过传递的选择器参数(selector)，可以自动的为之后新添加的匹配选择器的元素绑定事件。如下例：

$(".A").on("mouseenter",  "img", function(e) {...});

$(".B").append($("<img src="a.png"/>"));

由于.B中新添加的img元素满足on中的选择器img，所以，会自动为.B中添加的img绑定事件。

delegate(selector,eventType,function)，delegate(selector,eventType,data,function)，delegate(selector,map)

delegate方法与on方法作用相同，不同之处在于delegate只会为调用delegate的元素集的中添加的新的符合选择器的元素自动绑定事件。

$(".A").delegate("mouseenter",  "img", function(e) {...});

$(".B").append($("<img src="a.png"/>"));

$(".A").append($("<img src="a.png"/>"));

虽然.B中新添加的img元素满足on中的选择器img，但是由于.B没有调用delegate，不会为.B中添加的img绑定事件。但是.A中的可以。

(2)事件撤销

unbind()，unbind(eventType)，unbind(eventType，boolean)，unbind(Event)

用来撤销使用bind注册的事件。其中boolean参数的方法，用来恢复默认行为。

off(events,selector,function)，off(map,selector)

用来撤销由on注册的事件，注意selector要与on中一致。

undelegate()，undelegate(selector,eventType)

撤销由delegate注册的事件，注意selector要与delegate中一致。

(3)一些快捷方法，如mouseenter(function)，mouseout(function)等。

2.jQuery特效

使用特效，尽可能防止在回调function中再去调用相同的动画函数，避免产生循环动画，逼不得已，可以借助于setTimeout方法。

(1)隐藏与显示(利用css的hidden属性)

hide()，hide(time)，hide(time,easing)，hide(time,function)，

hide(time, easing, function)

隐藏jQuery对象中的元素

show()，show(time)，show(time,easing)，show(time,function)，

show(time, easing, function)

显示jQuery对象中的元素

toggle()，toggle(time)，toggle(time,easing)，toggle(time,function)，

toggle(time, easing, function)

切换jQuery对象中的元素的显示和隐藏

toggle(boolean)

设置单向切换，当boolean为true时，只完成从隐藏到显示的切换，为false只完成从显示到隐藏的切换

(2)滑动(通过裁剪元素实现)

slideDown()，slideDown(time)，slideDown(time,easing)，slideDown(time,function)，

slideDown(time, easing, function)

让元素内容从上到下逐渐显示

slideUp()，slideUp(time)，slideUp(time,easing)，slideUp(time,function)，

slideUp(time, easing, function)

让元素内容从下到上逐渐消失

slideToggle()，slideToggle(time)，slideToggle(time,easing)，slideToggle(time,function)，

slideToggle(time, easing, function)
切换滑动特效。

(3)淡入淡出(通过修改透明度实现)
fadeOut()，fadeOut(time)，fadeOut(time,easing)，fadeOut(time,function)，

fadeOut(time, easing, function)
以淡出的方式隐藏元素，当透明度变为完全透明时，隐藏元素

fadeIn()，fadeIn(time)，fadeIn(time,easing)，fadeIn(time,function)，

fadeIn(time,
easing, function)
以淡入的方式显示元素

fadeTo(time,opacity)，fadeTo(time,opacity, easing, function)
增减透明度到指定大小，当减少到完全透明时，不会自动隐藏元素，所以元素位置还保留

fadeToggle(time)，fadeToggle(time,easing)，fadeToggle(time,function)，

fadeToggle(time, easing, function)
切换淡入淡出状态

(4)属性动画，通过修改css属性值实现动画，只能针对属性是值的进行设置
animate(properties)，animate(properties,time)，animate(properties,time,function)，

animate(properties,time,easing,function)，animate(properties,options)

(5)jQuery的动画都会被放入动画队列
queue()
获取jQuery对象的动画队列

queue(function)
在动画队列插入一个动画，动画由function(nextFunction)指定，最后记得在function中调用nextFunction方法或调用$(this).dequeue()取出待执行的下一个动画，否则后面的动画不会执行

dequeue()
取出正在执行的动画队列的第一个动画并执行

stop()，stop(clear)，stop(clear,jumpToEnd)
停止当前动画，clear用来控制是否删除队列中其他动画，jumpToEnd控制是否将css属性值设置为动画终点值，stop调用后，当前动画的回调函数不会执行，如果clear为true，所有动画的回调都不会执行。

finish()
停止当前动画并清理动画队列，与stop不同，finish为了能达到终点值，会调用所有的回调函数。

delay(time)
在动画之间插入延时