JQuery中的事件和动画
1.JQuery中的事件
1.1 加载DOM
以浏览器装载文档为例，在页面加载完毕后，浏览器为通过JavaScript为DOM元素添加事件。JQuery用$(document).ready()来代替JavaScript中的window.onload方法。两者具有以下区别：
-1. 执行时机
window.onload是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。
$(document).ready()在DOM完全就绪时就可以被调用。
显然，把网页解析为DOM树的速度要比把网页中的所有关联文件加载完毕来得快。但是需要注意的是由于$(document).ready()只要DOM就绪就会执行，此时关联的文件可能还没有完全加载完，如图片，如果此时获取图片高度和宽度的属性就不一定准确，解决的方法可以使用JQuery中另一个关于页面加载的方法—load()方法
$(window).load(function(){
// Your code
})
-2. 多次执行
JavaScript的onload事件一次只能保存对一个函数的引用，他会自动用后面的函数函数覆盖前面的函数。
window.onload = function1;//无效，被function2覆盖
window.onload = function2;
而每次调用$(document).ready()都会在现有的行为上追加新的行为
$(document).ready(function(){
function1();//有效
})
$(document).ready(function(){
function2();//有效
})
-3. 简写方式
以下三种方式等价：
$(document).ready(function(){
// Your Code
})
$(function(){
// Your Code
})//第一种的简写
$().ready(function(){
// Your Code
})//$(document)简写为$()
1.2 事件绑定
bind(type [,data],fn)文档装载完后，可以通过bind来绑定事件
type:事件类型，如blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mouseover, mousemove, mouseout, mouseenter, mouseleave, change, select, submit, keyperss, keyup, keydown, error等，当然也可以是自定义名称。
data:可选参数，作为event.data属性值传递给事件对象的额外数据对象；
fn:用来绑定的处理函数。
-1. 基本效果
$(function(){
$(“#head”).bind(“click”,function(){
$(this).next(“div.content”).show();
})
})
-2. 简写效果
click，mouseover，mouseout这些事件经常使用到，JQuery提供了一些简写方法，如：
$(“#head”).click(function(){
$(this).next(“div.content”).show();
}
)
-3.合成事件
·hover(enter,leave)模拟光标悬停事件，光标移动到元素上时触发enter事件，光标离开时触发leave事件，例：
$(document).ready(function(){
$("#fruit").hover(function(){
$(this).next("ul").show();
},function(){
$(this).next("ul").hide();
})
})
toggle(fn1, fn2, ... , fn)模拟鼠标连续单击事件，第一次点击触发f1事件，以此类推，例：
$(document).ready(function(){
$("#fruit").toggle(function(){
$(this).next("ul").show();
},function(){
$(this).next("ul").hide();
})
})
1.3．事件冒泡
如下图，div, li, ul 都绑定了同样的click事件F1(), 当我们点击ul元素时，就会触发函数F1三次，且顺序为ul→li→div，此即由事件冒泡引起的。
<div onclick="F1();">
<li onclick="F1();">
<ul onclick="F1();"></ul>
</li>
</div>
防止方法：
-1. 事件对象，在程序中使用事件对象很简单，只需为函数添加一个参数，如：
$(“element”).bind(“click”,function(event){ //event:事件对象
// Your code
})
这样，当单击”element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才可以访问到。事件处理函数执行完毕后，事件对象就被销毁。
2. JQuery中的动画—皆可以使用参数
2.1 show() & hide()：等同于通过设置display的样式
可以添加参数(“slow”:600ms,”normal”:400ms, “fast”:200ms,100:100ms)，采用同时增加/减少高度、宽度、透明度来实现的。
2.2 fadeIn() & fadeOut()，只改变元素的不透明度
2.3 slideUp() & slideDown()，只改变元素的高度