<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery中的事件和动画</title>
<meta charset="UTF-8"/>
</head>
<body>
<script type="text/javascript">
$(window).load(function () {
//code
})
window.onload = function () {
//code
}
$(function () {
$("head").bind("click",function () {
if($(this).next().is(":visible")){
$(this).next().hide();
}else {
$(this).next().show();
}
})
})
//简写绑定事件
$(function () {
$("head").mouseover(function () {
$(this).next().show();
}).mouseout(function () {
$(this).next().hide();
})
})
//使得元素在3秒内右移500像素
$(function () {
$("#panel").click(function () {
$(this).animate({left:"500px"},3000);
});
});
//累加累减动画
$(function () {
$("#panel").click(function () {
$(this).animate({left:"+=500px"},3000);
});
});
//判断元素是否处于动画状态
if(!$(element).is(":animated")){//判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新的动画
}
</script>
</body>
</html>
<!--
一.jQuery中的事件
1.加载DOM
（1）执行时机：$(documnet).ready()方法和window.onload方法有类似功能，但是在执行时机方面是有区别的。window.onload是在网页中所有
的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即js此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()
方法注册的事件处理程序，在DOM完全就绪时就可以被调用，此时网页的所有元素对jQuery来说都是可以访问的。
（2）页面加载的一个方法load().load()方法会在元素的onload事件绑定一个处理函数。如果处理函数绑定给window对象，则会 在所有内容（
窗口，框架，对象和视图）加载完后出发。如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
（js的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数）
2.事件绑定
（1）在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配的元素进行特定事件的绑定，bind()方法的调用
格式为：bind(type[,data],fn)
第一个参数是事件类型，类型包括:blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,
mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，也可以是自定义名称
第二个参数可选，作为even.data属性值传递给事件对象的额外数据对象
第三个参数是用来绑定的处理函数。
3.合成事件
jQuery有两个合成事件hover()和toggle()方法。
（1）hover():hover(enter.leave)
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）
;当光标移出这个元素时，会触发指定的第2个函数(leave)
（2）toggle():toggle(fn1,fn2,,,fnN)
toggle()方法用于模拟鼠标连续点击事件。第一次单击元素，触发指定的第一个函数；当再次单击同一个元素时，则触发指定的第二个函数；如果有
更多的函数，则依次触发，知道最后一个。随后的每次单击都重复对这几个函数的轮番调用。
该方法还有另外一个作用，就是切换元素的可见状态。如果元素是可见的，单击切换后则为隐藏；如果元素是隐藏的，单击切换后则为可见的。
4.事件冒泡
（1）事件会按照DOM的层次结构像水泡一样不断向上至顶端。
（2）事件对象
在程序中使用事件对象非常简单，只需要为函数添加一个参数：
$("element").bind("click",function(event){
//code
});
当单击element元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。
（3）停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡
（4）阻止默认行为
在jQuery中，提供了preventDefault()，来阻止元素的默认行为。
（5）事件捕获
事件捕获和事件冒泡是刚好相反的两个过程。事件捕获是从最顶端往下开始触发。（从最外层元素开始，然后到最里层元素）。其中jQuery是不支持事件
捕获的。
5.事件对象的属性
（1）event.type
该方法的作用是可以获取到事件的类型。
$("a").click(function(event){
alert(event.type);//获取事件类型
return false;//阻止链接跳转
})
（2）event.preventDefault()方法
该方法的作用是阻止默认的事件行为。在IE中是失效的。
（3）event.stopPropagation()
该方法的作用是阻止事件的冒泡。
（4）event.target
该方法的作用是获取到触发事件的元素
（5）event.relatedTarget
在标准的DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget
在mouseover中相当于IE中的event.fromElement.mouseout相当于IE中的event.toElement.
（6）event.pageX和event.pageY
该方法的作用是获取到光标相对于页面的x坐标和y坐标，如果没有使用JQ，那么IE重使用event.x和event.y，火狐浏览器中是event.pageX或者event.pageY.
如果页面上有滚动条，则还要加上滚动条的宽度或者高度。
（7）event.which
该方法的作用是鼠标单击事件中获取到鼠标的左中右键。在键盘事件中获取键盘的按键。
（8）event.metaKey
针对不同浏览器对键盘中的<ctrl>按键解释不同，jQuery也进行了封装，并规定event.metaKey为键盘事件中获取<ctrl>按键。
6.移除事件
在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件
（1）移除按钮元素上以前注册的事件
unbind([type],[data])
第一个参数是事件类型，第二个参数是将要移除的函数
如果没有参数，则删除所有绑定的事件
如果提供了事件类型作为参数，则只删除该类型的绑定事件
如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除
（2）移除元素的其中一个事件
使用匿名处理函数指定一个变量
（3）one()：只需要触发一次，随后就要立即解除绑定的情况。该方法可以为元素绑定处理函数。当处理函数被触发一次后，立即被删除，即在
每个对象上，事件处理函数只会被执行一次。
one(type,[data],fn)
7.模拟操作
（1）常用模拟
使用trigger()方法，$("#btn").trigger("click");或者$("#btn").click();
（2）触发自定义事件
trigger()方法不仅能触发浏览器支持的具有同名的事件，也可以触发自定义名称的事件。
（3）传递数据
trigger(type,[data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组的形式传递
。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发还是用户触发。
（4）执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作
（5）如果只想绑定触发事件但是不想执行浏览器默认操作，可以采用triggerHandler()方法
8.其他用法
（1）绑定多个事件类型
（2）天假事件命名空间，便于管理
（3）相同事件名称，不同命名空间的执行方法
9.jQuery中的动画
（1）show()
调用该方法可以使得隐藏的元素显示出来。
（2）hide()
在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为none.
隐藏元素：$("element").hide()等价于$("element").css("display","none");
可以为show()和hide()方法添加速度参数，$("element").show("slow");表示执行后，元素会在600毫秒内慢慢显示出来。normal表示400毫秒，
fast表示200毫秒，此外，还可以为速度指定一个数字，单位是毫秒，1秒=1000毫秒
其中hide()和show()方法可以同时修改多个样式的属性高度，宽度和不透明度
（3）fadeIn()和fadeOut()方法
fadeIn()和fadeOut()方法只改变元素的不透明度，fadeOut()方法在指定的一段时间内降低元素的不透明度，直到元素完全消失即display:none.
fadeIn()方法类似。
（4）slideUp()和slideDown()
这两个方法只会改变元素的高度，如果一个元素的display属性值为none,当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()
刚好相反，元素将由下到上缩短隐藏。
（5）自定义动画方法animate()
animate(params,speed,callback)
params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度参数，可选
callback:在动画完成时执行的函数,可选。该回调函数适用于jQuery所有的动画效果。
（6）停止元素的动画
如果需要在某处停止动画，需要使用stop()方法，语法结构stop([clearQueue].[gotoEnd]);
clearQueue和gotoEnd都是可选参数，为Boolean值（true或者false），
clearQueue代表是否要清空未执行的动画序列，
gotoEnd代表是否直接将正在执行的动画跳转到末状态。
（7）延迟动画 delay()
该方法允许我们将队列中的函数延时执行，它既可以推迟动画队列中函数的执行，也可以用于自定义队列。
（8）jQuery中有4个专门用于交互的动画方法
toggle(speed,[callback]):
该方法可以切换元素的可见状态，如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。
slideToggle(speed,[easing],[callback])
该方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度
fadeTo(speed,opacity,[callback])
该方法可以吧元素的不透明度以渐进的方法调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会变化
fadeToggle(speed,[easing],[callback])
该方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。
（9）动画队列
a)一组元素上的动画效果
当在一个animate()方法中应用多个属性时，动画是同时发生的
当以链式的写法应用动画方法时，动画是按照顺序发生的（除非queue选项值为false）
b)多组元素上的动画效果
默认情况下，动画都是同时发生的。
当以回调的形式应用动画方式时（包括动画的回调函数和queue()方法的回调函数），动画是按照回调顺序发生的。
-->
本文详细介绍了jQuery中的事件处理机制，包括DOM加载、事件绑定、合成事件、事件冒泡及阻止，默认行为的处理等。同时深入探讨了jQuery提供的动画方法，如show/hide、fadeIn/fadeOut、slideUp/slideDown及自定义animate方法等。
扫一扫
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
