深入理解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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
vue-cli3配置与跨域处理方法
Aug 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 echo 输出字符串函数详解
2010/05/13 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
python的id()函数介绍
2013/02/10 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python实现IOU计算案例
2020/04/12 Python
python右对齐的实例方法
2020/07/05 Python
如何写一个自定义标签
2012/12/28 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
计算机大学生的自我评价
2013/10/15 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2014年管理工作总结
2014/11/22 职场文书
怎样写家长意见
2015/06/04 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis