| 标题 | 深入理解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中的事件与动画就是小编分享给大家的全部内容了，希望能给大家一个参考 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。