jQuery 学习笔记（三）—

页面载入时触发ready()事件

ready()事件类似于onLoad()事件。但前者仅仅要页面的DOM结构载入后便触发。而后者必须在页面所有元素载入成功才触发，ready()能够写多个，按顺序运行。此外，下列写法是相等的：

$(document).ready(function(){})等价于$(function(){});

比如，当触发页面的ready()事件时，在<div>元素中显示一句话。例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，当页面的DOM框架完毕载入后，便触发ready()事件，在该事件中。通过id号为“tip”的元素，调用html()方法在页面中显示一段字符。

使用bind()方法绑定元素的事件

bind()方法绑定元素的事件很方便，绑定前，须要知道被绑定的元素名。绑定的事件名称，事件中运行的函数内容就能够，它的绑定格式例如以下：

$(selector).bind(event,[data] function)

參数event为事件名称。多个事件名称用空格隔开。function为事件运行的函数。

比如。绑定button的单击事件。单击button时，该button变为不可用。例如以下图所看到的：

在浏览器中显示的效果：

能够看出，因为使用bind()方法，绑定了button的单击事件，在该事件中将button本身的“disabled”属性值设为“true”。表示不可用。当点击时触该事件。

使用bind()方法绑定元素的事件

bind()方法绑定元素的事件很方便。绑定前，须要知道被绑定的元素名，绑定的事件名称，事件中运行的函数内容就能够，它的绑定格式例如以下：

$(selector).bind(event,[data] function)

參数event为事件名称，多个事件名称用空格隔开。function为事件运行的函数。

比如，绑定button的单击事件，单击button时，该button变为不可用。例如以下图所看到的：

在浏览器中显示的效果：

能够看出，因为使用bind()方法。绑定了button的单击事件，在该事件中将button本身的“disabled”属性值设为“true”。表示不可用，当点击时触该事件。

使用hover()方法切换事件

hover()方法的功能是当鼠标移到所选元素上时，运行方法中的第一个函数，鼠标移出时。运行方法中的第二个函数，实现事件的切实效果，调用格式例如以下：

$(selector).hover(over。out);

over參数为移到所选元素上触发的函数，out參数为移出元素时触发的函数。

比如，当鼠标移到<div>元素上时。元素中的字体变成金黄色，例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，使用hover()方法运行两个函数。当鼠标移在元素上时调用addClass()方法添加一个样式。移出时，调用removeClass()方法移除该样式。

使用toggle()方法绑定多个函数

toggle()方法能够在元素的click事件中绑定两个或两个以上的函数，同一时候，它还能够实现元素的隐藏与显示的切换，绑定多个函数的调用格式例如以下：

$(selector).toggle(fun1(),fun2(),funN(),...)

当中。fun1。fun2就是多个函数的名称

比如，使用toggle()方法，当每次点击<div>元素时，显示不同内容，例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，每次点击<div>元素时，都依次运行toggle()方法绑定的函数。当运行到最后一个函数时，再次点击将又返回运行第一个函数。

注意：toggle()方法支持眼下主流稳定的jQuery版本号1.8.2，在1.9.0之后的版本号是不支持的。

使用unbind()方法移除元素绑定的事件

unbind()方法能够移除元素已绑定的事件，它的调用格式例如以下：

$(selector).unbind(event,fun)

当中參数event表示须要移除的事件名称，多个事件名用空格隔开，fun參数为事件运行时调用的函数名称。

比如，点击button时，使用unbind()方法移除<div>元素中已绑定的“dblclick”事件。例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，当使用unbind()方法移除已绑定的“dblclick”事件时，再次双击<div>元素，样式和文字都没有不论什么变化，表明移除事件成功。

假设没有规定參数，unbind() 方法会删除指定元素的全部事件处理程序。

使用one()方法绑定元素的一次性事件

one()方法能够绑定元素不论什么有效的事件。但这样的方法绑定的事件仅仅会触发一次，它的调用格式例如以下：

$(selector).one(event,[data],fun)

參数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时运行的函数。

比如，使用one方法绑定<div>元素的单击事件，在事件运行的函数中，累计运行的次数，并将该次数显示在页面中，例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，由于使用了one()方法绑定<div>元素的单击事件，由于事件函数仅仅能运行一次。运行完毕后，不管怎样单击，都不再触发。

调用trigger()方法手动触发指定的事件

trigger()方法能够直接手动触发元素指定的事件，这些事件能够是元素自带事件，也能够是自己定义的事件。总之，该事件必须能运行，它的调用格式为：

$(selector).trigger(event)

当中event參数为须要手动触发的事件名称。

比如。当页面载入时，手动触发文本输入框的“select”事件，使文本框的默认值处于所有被选中的状态。例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，因为文本输入框调用trigger()方法触发了“select”事件，因此。当页面载入完毕后，文本框中的默认值处于所有被选中的状态。

文本框的focus和blur事件

focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发。如点击除文本框的不论什么元素。都会触发该事件。

比如。在触发文本框的“focus”事件时。<div>元素显示提示内容。例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，当点击文本框时，触发文本框的“focus”事件，在该事件中，页面中的<div>元素显示提示信息。

下拉列表框的change事件

当一个元素的值发生变化时。将会触发change事件，比如在选择下拉列表框中的选项时，就会触change事件。

比如，当在页面选择下拉列表框中的选项时。将在<div>元素中显示所选择的选项内容，例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出，因为使用bind()方法绑定了下拉列表的“change”事件，因此，当选择列表中的选项时。在<div>元素中显示所选择的选项内容。

调用live()方法绑定元素的事件

与bind()方法同样。live()方法与能够绑定元素的可运行事件，除此同样功能之外，live()方法还能够绑定动态元素。即使用代码加入的元素事件，格式例如以下：

$(selector).live(event,[data],fun)

參数event为事件名称，data为触发事件时携带的数据。fun为触发该事件时运行的函数。

比如，使用live()方法绑定，页面中button元素的单击事件。而这个button是通过追加的方式加入至页面的。例如以下图所看到的：

在浏览器中显示的效果：

从图中能够看出。尽管button元素是在事件绑定声明之后，而且是通过追加的方式加入至页面的。但因为使用的是live()方法绑定元素的事件，因此，仍然生效。

注意：从 jQuery 1.7 開始，不再建议使用 .live() 方法。1.9不支持.live()，本节代码编辑器里的js引用版本号改为了1.8。