jQuery是度身订造,以在HTML页面响应事件。
什么是事件?
所有这些网页可以响应不同访问者的行动被称为事件。
事件代表了精确时刻有事时。
例子:
- 移动鼠标在一个元素
- 选择单选按钮
- 点击一个元素
术语"fires/fired"往往与事件使用。 例如:“该keypress事件被触发,此刻的你按一个键”。
下面是一些常见的DOM事件:
鼠标事件 | 键盘事件 | 活动形式 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
jQuery的语法对于事件的方法
在jQuery中,大多数DOM事件都有一个等效的jQuery方法。
在页面上指定一个click事件的所有段落,你可以这样做:
$("p").click();
下一步是定义事件触发时会发生什么。 你必须通过事件的函数:
$("p").click(function(){
// action goes here!!
});
常用的jQuery事件方法
$(document).ready()
在$(document).ready()方法可以让我们执行一个功能时,该文件是满载。 此事件在已经解释的jQuery语法章节。
click()
在click()方法附加一个事件处理函数的HTML元素。
当用户点击的HTML元素上执行的功能。
下面的例子说:当点击事件触发<p>元素; 隐藏当前<p>元素:
dblclick()
该dblclick()方法附加一个事件处理函数的HTML元素。
执行函数时,HTML元素的用户双击:
mouseenter()
该mouseenter()方法附加一个事件处理函数的HTML元素。
当鼠标指针进入HTML元素执行函数:
mouseleave()
该mouseleave()方法附加一个事件处理函数的HTML元素。
当鼠标指针离开HTML元素执行函数:
mousedown()
该mousedown()方法附加一个事件处理函数的HTML元素。
该功能被执行,当左,中,右鼠标按钮被按下,而鼠标移动到HTML元素:
mouseup()
该mouseup()方法附加一个事件处理函数的HTML元素。
该功能被执行,当左,中,右鼠标按钮被释放,而鼠标移动到HTML元素:
hover()
该hover()方法有两个功能,是结合mouseenter()和mouseleave()方法。
当鼠标进入HTML元素当鼠标离开HTML元素执行第一功能,并执行第二功能:
例
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
试一试» focus()
该focus()方法附加一个事件处理函数的HTML表单字段。
当表单域获得焦点执行的功能:
blur()
该blur()方法附加一个事件处理函数的HTML表单字段。
当表单字段失去焦点时执行的功能:
该on()方法
在on()方法附加所选元素的一个或多个事件处理程序。
附加click事件到<p>元素:
附加多个事件处理程序,以一个<p>元素:
例
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color",
"yellow");
}
});
试一试» 自测练习用!
jQuery的事件方法
对于一个完整的jQuery的事件引用,请访问我们的jQuery事件参考 。