[jQuery] 事件和动画详解

1. 事件

 1.1 加载DOM

在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。在JavaScript代码中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素完全加载到浏览器后才执行，而$(document).ready()方法注册的事件处理程序，在DOM完成就绪时就可以被调用。

由于在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。要解决这个问题，可以使用jQuery中另一个关于页面加载的方法load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，例如：

$(window).load(function(){});

每次调用$(document).ready()方法都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。它也可以简写为：

$(function(){});

另外，$(document)也可以简写为$()，例如：

$().ready(function(){}); 

1.2 事件绑定

在文档装载完成后，如果要为元素绑定事件来完成某些操作，可以使用bind()方法来对匹配元素进行特定事件的绑定，例如：

bind(type[,data],fn);

第一个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。

第三个参数则是用来绑定的处理函数。

例如：

$("#mydiv").bind("click",function(){ $(this).next("div.content").show();});

与ready()方法一样，bind()方法也可以多次调用。像click、mouseover和mouseout这类事件，在程序中经常用到，jQuery为此也提供了一套简写方法，例如：

$("#mydiv").mouseover(function(){ $(this).next("div.content").show();});

1.3 合成事件

jQuery有两个合成事件：hover()方法和toggle()方法。hover()方法的语法结构为：

hover(enter,leave);

hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数。

toggle(fn1,fn2,...fnN);

toggle()方法用于模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数，当再次单击同一个元素时，则触发指定的第2个函数，以此类推，直到最后一个。