JavaScript和HTML 之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件。例如当浏览器装载完一个文档后,会生成事件;当用户单击某个按钮时,也会生成事件。虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力。
1.$(document).ready()
$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机是有区别的。window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行。而通过jQuery中的$(document).ready()方法是在网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完。
使用方法:
(1)$(document).ready(function(){ //代码 })
(2)$(function(){ //代码})
(3)$().ready(function(){ //代码})
2.事件绑定bind()
在文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定。
使用方法:
bind(type [,data],fn); 简写 $('#...").type(function(){ //代码});
第一个参数是事件类型;
第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象;
第三个参数则是用来绑定的处理函数。
3.合成事件 hover()和toggle()
(1)hover()方法
hover(enter,leave);
hover()方法用于模拟光标悬停事件。当光标移动到元素上时,会触发指定的第一个函数(enter);当光标移出这个元素时,会触发指定的第二个函数(leave).
注:hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover")和bind("mouseout")
(2)toggle()
toggle(fn1,fn2,fn3,...fnN);
toggle()方法用于模拟鼠标连续单击事件。第一次单击元素,触发指定的第一个函数(fn1);当在此单击同一元素时,则触发指定的第二个函数(fn2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。