博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 中的事件和动画
阅读量:6543 次
发布时间:2019-06-24

本文共 3198 字,大约阅读时间需要 10 分钟。

一.jQuery中的事件

1.加载DOM
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。在常规JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用是$(document).ready()方法。但是要注意一下二者的区别:
执行时机:window.onload()方法是在网页中所有元素(包括所有关联文件)完全加载到浏览器后才执行。而通过jQuery中的$(document).ready()方法注册的事件处理程序在DOM完全就绪时就可以被调用(并不是所有关联文件都下载完毕)。当有时候元素的关联文件还未下载完,可以使用jQuery中另一个关于页面加载的方法—load()方法:

$(window).load(function(){

//编写代码
})
等价于JavaScript中的以下代码:

window.οnlοad=function(){

//
}
多次使用:假设网页中有两个函数,当使用window.onload方法时不能同时编写多个,那样只会执行最后那个函数,而$(document).ready()方法可以同时编写多个,就是在现有的行为上追加新的行为,且会顺序执行。例:

$(document).ready(function(){

one();
})
$(document).ready(function(){
two();
})
简写方式:

$(function(){

//
})
2.事件绑定
在文档装载完成后,可以使用bind()方法来对匹配元素进行特定事件的绑定:

bind(type [, data] , fn); //第一个参数事件类型,第二个可选参数,第三个用来绑定的处理函数

1
若要判断元素是否隐藏和显示循环出现时,可以使用jQuery中的is()方法来完成。
3.合成事件
jQuery有两个合成事件,属于自定义方法:
hover()方法—用于模拟光标悬停事件

hover(enter,leave); //光标移动在此时触发第1个函数,离开时触发第2个函数

1
toggle()方法—用于模拟鼠标连续单击事件/还可以切换元素的可见状态

toggle(fn1,fn2,...fnN); //第一次单击触发第一个函数,第二次单击触发第二个,依次触发

1
4.事件冒泡
在页面上可以有多个事件,也可以多个元素相应同一个事件,假设页面上有一个div元素,另一个span元素嵌套在里面,并且都被绑定了click事件,同时body元素上也绑定了click事件,当单击内部span元素时,会触发span元素的click事件,同时也会按照DOM的层次结构顺序响应嵌套的每一个元素,称为顺序冒泡,顺序为span—div—body。
停止事件冒泡:

event.stopPropagation();

1
阻止元素的默认行为:

event.preventDefault();

1
也可以将上面的方法换成简写方式:

return false;

1
事件捕获:事件捕获和事件冒泡是刚好相反的两个过程,事件捕获是从最外层元素开始,然后再到最里层元素。
5.事件对象的属性

event.type——获取事件类型

event.preventDefault()——阻止默认行为
event.stopPropagation()——阻止事件冒泡
event.target——获取到触发事件的元素
event.relatedTarget——访问mouseover和mouseout的相关元素
event.pageX和event.pageY——获取到光标相对于页面的x坐标和y坐标
event.which——在鼠标单击事件中获取鼠标的左、中、右键
event.metaKey——为键盘事件中获取ctrl按键
6.移除事件
在绑定事件过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。
移除按钮元素上以前注册的事件:

<button id="delAll">删除所有事件</button>

$('#delAll').click(function(){
$('#btn').unbind("click");
});
语法:unbind([type],[data]); //第一个参数事件类型,第二个参数将要移除的函数
移除元素的其中一个事件:

$('#delTwo').click(function(){

$('#btn').unbind("click",myFun2); //首先为处理函数指定一个变量myFun2,然后删除绑定函数2
});
One()方法可以为元素绑定处理函数,触发一次后立即解除:

one(type,[data],fn);

1
7.模拟操作
使用trigger()方法完成模拟操作,不需要单击页面加载完毕便会输出:

$('#btn').trigger("click"); //常用模拟

$('#btn').trigger("click"); //触发自定义事件
trigger(type,[data]) //第一个参数要触发的事件类型,第二个事件传递给事件处理函数的附加数据
$("input").trigger("focus"); //执行浏览器默认操作
$("input").triggerHandler("focus"); //只触发绑定事件,不执行浏览器默认操作
8.其他用法
绑定多个事件类型: $("div").bind("mouseover mouseout",function(){ })
添加事件命名空间,便于管理:$("div").bind("mouseover.plugin",function(){ })
相同事件名称,不同命名空间执行方法

二.jQuery中的动画

1. show()方法和hide()方法

$("element").hide(); //隐藏

$("element").show(); //显示
$("element").css("display","none"); //通过css方法隐藏
show方法和hide方法让元素动起来

$("element").show("slow"); //慢速显示

1
2.fadeIn()方法和fadeOut()方法—改变元素的不透明度
3.slideUp()方法和slideDown()方法—改变元素的高度
4.自定义动画方法animate()

animate(params,speed,callback); //一个包含样式属性及值的映射,速度,在动画完成时执行的函数

1
5.动画回调函数
6.停止动画和判断是否处于动画状态
停止元素的动画:

stop([clearQueue],[gotoEnd]); //是否清空未执行完的动画队列,是否直接将正在执行的动画跳转到末状态

1
判断元素是否处于动画状态:

if(! $(element).is(":animated")){

//如果当前没有进行动画,则添加新动画
}
延迟动画:delay();
7.其他动画方法

toggle(speed,[callback])——切换元素的可见状态

slideToggle(speed,[easing],[callback])——通过高度变化来切换匹配元素的可见性
fadeTo(speed,opacity,[callback])——把元素的不透明度以渐进方式调整到指定的值
fadeToggle(speed,[easing],[callback])——通过不透明度变化来切换匹配元素的可见性

转载于:https://www.cnblogs.com/ws1149939228/p/11039178.html

你可能感兴趣的文章
Apriori 关联算法学习
查看>>
Junit核心——测试集(TestSuite)
查看>>
MVPArms官方首发一键生成组件化,体验纯傻瓜式组件化开发
查看>>
Log4j_学习_00_资源帖
查看>>
制作iso镜像U盘自动化安装linux系统
查看>>
JSLint的使用
查看>>
命令行常用命令--软连接
查看>>
HTTP POST GET 本质区别详解
查看>>
OC继承专题
查看>>
PHP中HASH函数的优化技巧
查看>>
MD5加密
查看>>
ant
查看>>
微信,想要说爱你,却没有那么容易!
查看>>
有关sqlite与sql
查看>>
MapXtreme 2005 学习心得 概述(一)
查看>>
php进一法取整、四舍五入取整、忽略小数等的取整数方法大全
查看>>
Hibernate的拦截器和监听器
查看>>
游戏中学习Bash技能
查看>>
ubuntu 12.04系统托盘不显示ibus输入法图标的解决方法
查看>>
WSDP
查看>>