锋利的jQuery（5）事件和动画
1. 加载DOM
$(document).ready(function(){
//code
});
//简写
$(function(){
})
与window.onload的区别：jquery的ready函数在DOM树加载完后即可执行，而window.onload则必须等待网页中所有元素加载完后才执行。window.onload只能执行一次，而ready可执行多次。
window.onload=function(){
};
jquery中与window.onload等同的函数是：
$(window).load(function(){
});
2. 事件绑定：为某个元素绑定事件而完成相应的功能。
bind(type,[,data],fn)
2.1 函数说明：
第一参数type是事件类型：可以是：click,dbclick,blur,focus,load,resize,scroll,unload,mouseup,mousedown,
mousemove,mouseenter,mouseout,mouseleave,changeselect,submit,keydown,keyup,keypress,error等,也可以是自定义事件。
第二个参数是可选参数：作为event.data属性值传递给事件对象。
第三个参数是用来绑定的处理函数。
例如：$("#pannel h5.head).bind("click",function(){
//code 为id=panel的div内的且class=head的H5元素绑定click事件
});
2.2. 简写事件绑定：
$("#panel h5.head").click(function(){
//code
});
3. 合成事件
3.1 hover方法：模拟鼠标悬停事件
eg:
$("#panel h5.head").hover(function(){
//code 鼠标划过
},function(){
//code鼠标划出
}
3.2 toggle()方法：用于模拟鼠标连续单击事件 ;还可以用于切换的元素的可见状态。
toggle(fn1,fn2,fn3,...)
4. 事件冒泡：网页中存在嵌套元素，且其中的元素绑定了同一个事件，内层嵌套元素触发该事件，外层嵌套元素也会跟着触发该事件，且顺序为内层到外层。
4.1 事件冒泡引发的问题：
4.1.1 使用事件对象
$("element").bind("click",function(event){
//...事件对象
});
4.1.2 停止冒泡事件：
$("element").bind("click",function(event){
event.stopPropagation();
//或者return false;
});
4.1.3 阻止默认行为：
$("element").bind("click",function(){
event.preventDefault();
//或者用：return false;
})
5. 事件对象的属性：
5.1 event.type()方法：获取到事件的类型：
$("a").click(function(event){
alert(event.type()); //获取事件的类型，返回"click"
return false;
});
5.2 event.target()：获取到触发事件的元素
5.3 event.pageX()和event.pageY：获取到光标相对与页面的x坐标和y坐标。
5.4 event.which()：在鼠标单击事件中获取鼠标的左中右键；在键盘事件中获取键盘的按键；
$("body").mousedown(function(event){
alert(event.which); //1=鼠标左键，2=鼠标中键，3=鼠标右键；
});
6. 移除事件
6.1 移除按钮元素以前注册的事件
$("#btn").bind("click",myfun1=function(){}.bind("click",myfun2=function(){});
$("#delAll").click(function(){
$("#btn").unbind("click");
});
6.2 移除按钮元素其中的一个事件：
$("#del").click(function(){
$("#btn").unbind("click",myFun1);
})
7. 模拟操作：
7.1 常用模拟函数：trigger()方法，注意该方法应用于绑定函数之后。
$("#btn").trigger("click"); // 用户进入页面后，就触发click事件，而不需要用户主动点击。
简写：$("#btn").click();
7.2 触发自定义事件：
$("#btn").bind("myClick",function(){
$("#test").append("<p>我的自定义事件.</p>");
});
触发事件：
$("#btn").trigger("myClick");
7.3 传递数据：
trigger("type"[,data])，第一个参数为事件类型，第二个参数为传递给事件处理函数的附加数据，以数组形式传递。
$("#ben").bind("myClick",function(event,message1,message2){
$("#test").append("<p>+message1+message2+"</p>");
});
触发事件：
$("#btn").trigger("myClick",["我的自定义”,"事件"]);
7.4 执行默认操作：trigger()方法执行后，会执行浏览器的默认操作。
$("input").trigger("focus"); //不仅会触发<input>元素绑定的focus事件，浏览器也会使<input>元素得到焦点
如果执行触发绑定的事件，而不想执行浏览器的默认操作，可用:
$("input").triggerHandler("focus"); //不会得到焦点；
8. 其他用法：
8.1 绑定多个事件：
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});// 当光标滑入<div>元素时，该元素的class切换为”over"；当光标滑出<div>时切换为先前的值。等同与下面的代码：
$("div).bind("mouseover",function(){
$(this).toggleClass("over");
}).bind("mouseout",function(){
$(this).toggleClass("over");
});
8.2 添加事件命名空间，便于管理。如删除事件时，只需指定命名空间即可，而不存在命名空间的事件不受影响。
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});bind("mouseover.plugin",function(){
$("body").append("<p>mouseover事件</p>");
});bind("dbclick",function(){
$("body").append("<p>dbclick事件</p>");
});
$("button").click(function(){
$("div").unbind(".plugin");
});
8.3 相同事件名称，不同命名空间执行方法。
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
}).bind("click.plugin",function(){
$("body").append("<p>click.plugin事件</p>");
});
$("button").click(function(){
$("div").trigger("click!"); //点击<button>会触发click事件，不会触发click.plugin事件，trigger("click!")后面的感叹号的作用时匹配不包含在命名空间中的click事 //件。要触发两者，改成trigger("click")即可。
});
9. jQuery中的动画：用jQuery做动画要求要在标准模式下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9.1 show()方法和hide()方法：同时修改元素的高度，宽度和不透明度。
$("element").show("slow"); //运行代码后，元素将在600ms内慢慢显示出来。"normal"=400ms，"fast”=200ms，如果用时间作为参数就不需要加引号。
9.2 fadeIn()方法和fadeOut()方法:只改变元素的不透度。
9.3 slideUp()方法和slideDown()方法:只改变元素的高度。
9.4 自定义动画 animate()
animate(params,speed,callback);
params:一个包含样式属性及值的映射，比如{property1:"value1",property2,"value2",...}
speed:速度参数，可选。
callback:在动画完成后执行的函数，可选。
9.4.1 自定义简单动画：
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
});// 移动该元素需设置该元素的position为“relative"或"absolute"。
9.4.2累加、累减动画：
$(this).animate({left:"+=500px"},3000);
9.4.3 同时执行多个动画：
$(this).animate({left:"500px",height:"200px"},3000); // 该元素向右滑动的同时，增大高度。
9.4.4 动画回调函数：依次列出动画函数会加入到动画序列中，其他函数并不会加入到动画序列中，需在动画完成时通过函数调用才执行。
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).fadeOut("show").animate({top:"200px",width:"300px"},3000,function(){
$(this).css("border","5px solid blue");
});
9.4.5 停止动画和判断是否处于动画状态
1. 停止动画。stop()只会停止正在进行的动画；stop(true)会把当前元素接下来尚未停止的动画队列清空。
$("#panel").hover(function(){
$(this).stop()
.animate({height:"150px",width:"300px"},200);
},function(){
.animate({heigth:"22px",width:"60px"},300);
});
2. 判断是否处于动画状态：
$(this).is(":animated")
