深入理解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 相关文章推荐
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 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
php 运行效率总结(提示程序速度)
2009/11/26 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
一个JS翻页效果
2007/07/23 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
apache部署python程序出现503错误的解决方法
2017/07/24 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python: 传递列表副本方式
2019/12/19 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
农场厂长岗位职责
2013/12/28 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
微信营销策划方案
2014/02/24 职场文书
新品发布会策划方案
2014/06/08 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
社团活动总结格式
2014/08/29 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
导游词之大雁塔景区
2019/09/17 职场文书