jquery_事件与动画
事件绑定
bind(type[,data],fn)(无限触发)
type:事件类型包括jquery中已有事件也可以自定义事件
data:可选参数,作为event.data属性传递给事件对象的额外数据对象
fn:是用来绑定的处理函数
one(type[,data],fn)(只触发一次)
合成事件
hover(enter,leave);用于模拟光标悬停事件
toggle(fn1,fn2,...fn);模拟鼠标连续单击事件
事件冒泡
如果内外元素绑定了同一事件,那么点击里面事件外面事件也会触发
解决方法:添加事件对(event) event.stopPagation()停止事件冒泡
阻止默认行为 :
网页中的元素都有自己的默认行为 (单击超链接之后会跳转,表单的提交)
event.preventDefault() (return false) 阻止默认行为
事件对象属性:
event.type()获取到事件的类型
event.target()获取触发事件的元素
event.pageX()和event.pageY() 获取光标相对于页面的x坐标和y坐标
event.which()在鼠标单击事件中获取到鼠标的左,中,右键,在键盘事件中获取键盘的案件(1:鼠标左键:2鼠标中键:3鼠标右键)
event.metaKey()获取<ctrl>按键
event.originalEvent()指向原始的事件对象
移除事件:
unbind([type],[,data])
data:将要移除的函数
如果没有参数则删除所有绑定事件
模拟操作:
tigger(type[,data]) 可自定义也可以用jquery里本身的方法
动画
show()显示 可填参数
hide()隐藏 可填参数
fadeIn() fadeOut()改变元素的不透明度
slideUp() slideDown()改变元素高度 到0为止
slow :0.6秒
normal:0.4秒
fast:0.2秒
自定义动画
animate(params,speed,callback)
params:一个包含样式属性及值的映射
speed:速度,可选
callback:在动画完成时执行的参数 可选
累加 ,减: +=,-=
多重动画:后面在添加
animate({left:"500px"},3000).animate({height:"500px"},5000)
停止动画
stop([clearQueue][gotoEnd]):
clearQueue:是否清空未执行的动画队列
gotoEnd:是否直接将正在执行的动画跳转到末状态
直接调用stop()停止正在执行的动画
判断元素是否处于动画状态
$(element).is(":animated")
toggle() 切换元素可见状态
slideToggle() 高度
fadeTo(600,0.2) 透明度
动画队列
一组元素上的动画效果
当在以一个animate()方法中应用多个属性时,动画是同时发生的
链式,按顺序发生
多组元素上的动画效果
默认情况下,动画都是同时发生的
回调,按顺序