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


Posted in Javascript onMay 18, 2016

首先,使用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中的事件与动画就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
jQuery实现滚动效果
Nov 17 jQuery
原生js检测页面加载完毕的实例
Sep 11 Javascript
vue中使用vue-cli接入融云实现即时通信
Apr 19 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 #Javascript
jQuery添加options点击事件并传值实例代码
May 18 #Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 #Javascript
深入剖析javascript中的exec与match方法
May 18 #Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 #Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 #Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 #Javascript
You might like
mysql+php分页类(已测)
2008/03/31 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
基于AngularJS的简单使用详解
2017/09/10 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
python多线程抽象编程模型详解
2019/03/20 Python
pybind11在Windows下的使用教程
2019/07/04 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
财务工作个人求职的自我评价
2013/12/19 职场文书
公司会计岗位职责
2014/02/13 职场文书
工作迟到检讨书
2014/02/21 职场文书
企业办公室岗位职责
2014/03/12 职场文书
毕业生找工作求职信
2014/08/05 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
兵马俑的导游词
2015/02/02 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers