一.jQuery中的事件
1.加载DOM
| $(document).ready(); | $(window).load(function(){} |
| 只要DOM加载完就 | 页面所有内容（包括窗口、框架、 对象和图像等）加载完 |
| 多次使用 | 只能使用一次 |
$(document).ready(function(){}); 简写为 $(function(){})
$(window).load(function(){
//编写代码
})
等价于JavaScript中的以下代码
window.onload = function(){
//编写代码
}
2.事件绑定
bind()方法的调用格式为
bind(type,fn);
第一个参数是事件类型
包括：blur、focus、load、resize scroll unload click等等
第二个参数是用来绑定的处理函数
注：jQuery中关键字this是js对象，所以经常见到$(this)
3.合成事件
jQuery中有两个合成事件--------hover()方法和toggle()方法
（1）hover()方法
语法：hover(fn1,fn2)
用于模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数fn1，当光标移出这个元素时，触发第二个函数fn2
（2）toggle()方法
语法：toggle(fn1,fn2,...fnN);
用于模拟鼠标连续单击事件。第一次单击，触发fn1,第二次单击，触发fn2,....。随后的每次单击都重复对这几个函数的轮番调用
4.移除事件
可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件
unbind();
二.jQuery中的动画
1.show()方法和hide()方法
在html文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”
$("element").hide(); //通过hide()方法隐藏元素
与用css()方法设置display属性效果相同
element.css("display","none");
设置显示的速度
$("element").show(“slow”);
关键字还有“normal” 与 “fast”
或
$("element").show(1000); //元素在1000毫秒内显示出来
$("element").hide(1000); //元素在1000毫秒内隐藏
2.fadeIn方法和fadeOut()方法
改变元素的不透明度
fadeOut方法会在指定的一段时间内降低元素的不透明度，直到完全消失（"display : none"）
3.slideUp()方法和slideDown()方法
只改变元素的高度
4.自定义动画方法animate()
animate(params,speed,callback);
参数说明：
（1）params：一个包含样式属性及值的映射
（2）speed：速度参数，可选。
（3）callback：在动画完成时执行的函数，可选。
1.自定义简单动画
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="app/framework/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"}, 3000);
});
});
</script>
<style type="text/css">
#panel {
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050D0;
background: #96E555;
cursor: pointer;
}
</style>
</head>
<body>
<div id="panel"></div>
</body>
</html>
2.累加、累减动画
在之前的代码中，设置了{left：”500px“}作为动画参数。如果在之前加上”+=“或”-=“符号即表示在当前位置累加或者累减
$(function(){
$("#panel").click(function(){
$(this).animate({left:"+=500px"}, 3000);
});
});
3.多重动画
（1）同时执行多个动画
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px",height:"200px"}, 3000);
});
});（2）按顺序执行多个动画
上例中两个动画效果是同时发生的，如果要按顺序执行动画，只需要把代码拆开，然后按照顺序写就可以了
$(this).animate({left:"500px"}, 3000);
$(this).animate({height:"200px"}, 3000);或者写成链式的
$(this).animate({left:"500px"}, 3000);
.animate({height:"200px"}, 3000);
4.综合动画
接下来完成更复杂的
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"}, 3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
});
});
5.动画回调函数
想在上例中切换元素的css样式
css("border","5px solid blue");
对比下面的效果
（1）
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
//alert("dd");
$(this).animate({left:"400px",height:"200px",opacity:"1"}, 3000)
.animate({top:"200px",width:"200px"},3000)
.css("border","5px solid blue");
});
});
（2）
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
//alert("dd");
$(this).animate({left:"400px",height:"200px",opacity:"1"}, 3000)
.animate({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
});
});
});发现第二种可以实现想要的效果，第一种不可以，出现这样的原因是css()方法不会加入到动画队列中。
callback回调函数适用于jQuery所有的动画效果方法