辛苦堆砌,转载请注明出处,谢谢!
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)
让元素内容从下到上逐渐消失
fadeToggle(time),fadeToggle(time,easing),fadeToggle(time,function),