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()方法绑定元素的一次性事件
调用trigger()方法手动触发指定的事件
文本框的focus和blur事件
下拉列表框的change事件
调用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。