深入理解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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jQuery构造函数init参数分析
May 13 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
详解vue中axios的封装
Jul 18 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 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&&mysql)一
2006/10/09 PHP
php self,$this,const,static,->的使用
2009/10/22 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
python复制文件代码实现
2013/12/23 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
彻底理解Python list切片原理
2017/10/27 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
比利时买床:Beter Bed
2017/12/06 全球购物
法学院方阵解说词
2014/01/29 职场文书
自荐信如何制作?
2014/02/21 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
网吧温馨提示
2015/07/17 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android