jQuery之第4章 jQuery中的事件和动画

1、jQuery中的事件：

　　一、加载DOM：

　　　　jQuery：$(document).ready();

　　　　JavaScript:window.onload();

　　　　$(window).load(function(){

　　　　})　　等价于

　　　　window.onload = function(){}

　　简写方式：

　　（1）$(document).ready(functon(){})

　　（2）$().ready(functon(){})

　　（3）$(function(){})

　　二、事件绑定：

　　　　bind();

　　三、合成事件：

　　（1）hover() ：用于模拟光标悬停事件。

　　（2）toggle() ：用于模拟鼠标连续单击事件。另外一做用，切换元素的可见状态。

　　四、事件冒泡：

　　　　event.stopPropagation();　　//中止事件冒泡

　　　　event.preventDefault();　　//阻止默认行为

　　　　改写为：

　　　　return false;

　　　事件捕获：

　　　　jQuery不支持事件捕获，须要使用JavaScrip原生实现。

　　五、事件对象的属性：

　　（1）event.type

　　（2）event.stopPropagation();

　　（3）event.preventDefault();

　　（4）event.target

　　（5）event.relatedTarget

　　（6）event.pageX、event.pageY

　　（7）event.which

　　（8）event.metaKEY

　　六、移除事件：

　　　　unbind();

　　　　one();

　　七、模拟操做：

　　　　trigger(type,[data]);　　//参数：类型、传递的数据

　　　　$("btn").trigger("click");　　简化写法：

　　　　$("btn").click();

　　　　注意：经常使用模拟、触发自定义事件、传递数据、具备执行默认操做的功能，例如：

　　　　　　   $("input".trigger("focus");　　//触发元素绑定的focus事件，也会使input元素自己获得焦点（浏览器的默认操做）

　　　　　　  triggerHandler() ：只触发绑定的focus事件，不执行浏览的默认操做。

　　八、其它用法：

　　　　bind();

　　　　（1）绑定多个事件类型。

　　　　（2）添加事件命名空间，便于管理。

　　　　（3）相同事件名称，不一样命名空间执行方法，trigger("click!");。

2、jQuery中的动画：

　　（1）show();　　//同时修改元素的多个样式属性，高度、宽度、不透明度。

　　　　　　将元素的display样式设置为先前的显示状态（block 或 inline，或其余除了 none 以外的值）

　　　　　　.show("slow") ：元素将在600毫秒内慢慢的显示出来。其它的关键字还有 normal 和 fast（长度分别为400毫秒和200毫秒），还能够指定一个数字，单位是毫　　　　　　　秒。方法 hide();也是适用的。show(600)方法会从上到下增大内容的高度，从左到右增大内容的宽度，同时增长内容的不透明度，直到内容彻底显示。

　　（2）hide();

　　　　　　将元素设置css样式，display/none，等价于，.css("display","none")

 

　　（3）fadeIn();　　//改变元素的不透明度。增长不透明度。

　　（4）fadeOut　　//在指定的时间内下降元素的不透明度，直到元素彻底消失（display:none）。

 

　　（5）slideUp();　　//改变元素的高度。元素又下到上缩短隐藏。　　

　　（6）slideDown();　　//若是一个元素的display属性为none，调用该方法，这个元素将从上至下延伸显示

　　注意：jQuery中的任何动画效果，均可以指定3种速度参数，即 slow 、normal 和 fast（时间分别是0.6秒、0.4秒、0.2秒），当使用速度关键字时要加引号，例如：show("slow");若是用数字做为时间的参数，不须要加引号，单位是毫秒，例如：show(1000);。

 

二、自定义动画方法：

　　animate();

　　//简单动画、累加累减动画、多重动画（[1]、同时执行多个动画，[2]、按顺序执行多个动画，动画队列。）、综合动画。

三、动画回调函数：

　　回调函数适用于jQuery中全部的动画效果方法。

四、中止动画和判断是否处于动画状态：

　　（1）中止元素的动画：

　　　　stop([clearQueue],[gotoEnd]);

　　　　　　参数clearQueue和gotoEnd都是可选参数，为Boolean值（true或false）。

　　　　　　参数clearQueue表明是否要状况未执行完的动画队列。

　　　　　　参数gotoEnd表明是否直接将正在执行的动画跳转到末状态。

　　（2）判断元素是否处于动画状态：

　　　　$("element").is(":animate");

　　（3）延迟动画：

　　　　delay();

五、其余动画方法：

　　（1）toggle(); ：切换元素的可见状态。

　　（2）slideToggle(); ：经过高度变化来切换匹配元素的可见性。只调整元素的高度。

　　（3）faseTo(); ：把元素的不透明度以渐进方式调整到指定的值。只调整元素的不透明度。

　　（4）fadeToggle(); ：经过不透明度变化来切换匹配元素的可见性。只调整元素的不透明度。

六、动画方法归纳：

　　改变样式属性：

方法名	说明
hide() 和 show()	同时修改多个样式属性，即高度、宽度、不透明度
fadeIn() 和 fadeOut()	只改变不透明度
slideUp() 和 slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle()	用来代替hide()和show()方法，因此会同时修改多个样式属性，即高度、宽度和不透明度
slideToggle()	用来代替slideUp() 和 slideDown()，因此只能改变高度
fadeToggle()	用来代替fadeIn() 和 fadeOut()方法，因此只能改变不透明度

　　　　　　　　　特别注意：

animate()

自定义动画方法，能够用它代替因此的动画方法