最新资讯当前位置:鸿宇娱乐 > 最新资讯 > >

[JQuery动画]深入理解JQuery中的事件与动画

  

[JQuery动画]深入理解JQuery中的事件与动画

  

首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性。

  

  

事件:  

  

基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述。

  

  

事件绑定:  

  

在文档加载完成后,使用bind(type,[data],func())方法绑定事件.

  

  

合成事件:  

  

hover(enter-func,leave-func)相当于bind("mouseover")和bind("mouseleave").

  

  

toggle()模拟鼠标连点情况下的显示与隐藏事件toggle(show-func,hide-func).

  

  

事件冒泡:  

  

在学习js高程(三)时,曾提及到大部分浏览器的事件处理机制是事件冒泡,也就是事件是逐级向上发生的。如果给你个内嵌元素绑定了事件,给他的父元素也绑定了一个相同type的事件,那么当事件处理内嵌元素时,父元素的事件也会随之触发,JQuery用一个方法可以阻止事件冒泡,使用event(事件对象).stopPropagation().

  

  

既让可以阻止事件冒泡,那么也可以阻止事件的默认行为,比如锚点元素a,当我们为a绑定一个click事件时,他不仅会实现我们绑定的事件函数,也会跳转到指定的href,那么要阻止这一跳转行为,需要用到event.preventDefault()来实现。这个方法也经常用在表单验证的过程中,当验证的字段不通过是,使用event.preventDefault()来阻止表单的submit。

  

  

当然,对于阻止事件冒泡和阻止默认行为,我们也可以使用return false,当我们要知道,return false同时阻止了冒泡与默认行为,所以要慎用。

  

  

事件对象:  

  

写在回调函数中的参数event即为事件对象。

  

  

type属性,获取事件的类型。

  

  

preventDefault()方法,阻止默认行为  

  

stopPropagation()方法,阻止事件冒泡  

  

target属性,获取事件触发的元素  

  

pageX,pageY属性,获取光标相对于页面的坐标  

  

mataKey属性,获取crtl按键  

  

事件移除:  

  

unbind(type,func-name)  

  

第一个参数是移出事件的类型,第二个为移除事件的变量名,如果没有参数,删除该元素的所有事件,如果提供了type,则删除该元素所有类型为type的事件,若制订鸿宇娱乐平台了第二个参数,则删除指定事件。

  

  

事件模拟:  

  

trigger(),利用该函数实现进入页面时就触发指定事件(这个事件的类型是可以自定义的),trigger()有连个参数,第一个为type,第二个为[data],这个是可选的,用于传递数据。我认为trigger()实际是上调用事件的过程。

  

  

动画:  

  

Jquery中的动画用起来十分的方便。jquer所有的动画效果都可以添加时间参数。

  

  

show()与hide():  

  

显示与隐藏元素,hide()相当于display:none,而show()则把他还原(之前的display属性是什么,还原后还是什么)。可以通过设置参数来实现动画效果,show(),hide()接收关键字和时间值(ms),关键字有slow(0.6s),fast(.2s),nomal(.4s),他会同时改变元素的高度,宽度和不透明度。

  

  

fadeIn()与fadeOut():  

  

改变元素的不透明度,fadeIn()提高不透明度,fadeOut()降低不透明度,直到display:none.

  

  

slideDown与SlideUp()  

  

改变元素的高度,slideDown()元素自上到下延伸,slideUp()元素自下向上收缩。

  

  

animate()  

  

当上面的方法实现的动画无法满足我们时,可以使用animate()来自定义动画。

  

  

animate(params,speed,callback)  

  

params:包含样式的映射,如{left:"100px",heiget:"100px"}  

  

speed:动画实现需要的事件(ms)  

  

callback:动画完成时执行的函数。

  

  

像上面所写的params的栗子,实现的时left与height的同时改变,若不想同时改变,使用链式写法分开写。需要注意一点,css()不算动画,要想在动画执行完成后改变样式,需要把css()写入callback中.

  

  

判断元素是否处于动画状态is(":animated").

  

  

延迟操作:animate().delay(time).

  

  

其他动画:  

  

toggle()显示与隐藏  

  

slideToggle()改变高度的显示与隐藏。

  

  

fadeTo(time,op)通过指定时间将元素的不透明度变为op  

  

fadeToggle()改变不透明度的显示与隐藏。

  
  

  

以上这篇深入理解JQuery中的事件与动画就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

  

(责任编辑:admin)

上一篇:JavaScript如何自定义trim方法

下一篇:鸿宇娱乐平台:javascript中break,continue和return语句

推荐内容

客户服务热线

010-400-12345

在线客服