jQuery 中的事件和动画

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

$(window).load(function(){
//编写代码
})
等价于JavaScript中的以下代码：

window.onload=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])——通过不透明度变化来切换匹配元素的可见性