❮ 上一节
下一节 ❯
jQuery 事件
更新于 2024/1/19 8:27:00
jQuery 是为响应 HTML 页面中的事件而定制的。
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
在元素上移动鼠标
选取单选按钮
点击元素
在事件中经常使用术语"触发"（或"激发"）例如:"当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
鼠标事件
键盘事件
表单事件
文档/窗口事件
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
mouseleave
blur
unload
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$("p").click();
下一步是定义触发事件时应该发生什么。必须向事件传递函数:
$("p").click(function(){
// 动作触发后执行的代码!!
});
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在jQuery 语法 章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户单击 HTML 元素时执行
在下面的实例中，当点击事件在某个
元素上触发时，隐藏当前的
元素:
实例
$("p").click(function(){
$(this).hide();
});
亲自试一试 »
dblclick()
dblclick() 方法将事件处理程序函数附加到HTML元素。
该函数在用户双击HTML元素时执行:
实例
$("p").dblclick(function(){
$(this).hide();
});
亲自试一试 »
mouseenter()
mouseenter() 方法将事件处理程序函数附加到HTML元素。
当鼠标指针进入 HTML 元素时，将执行该函数:
实例
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
亲自试一试 »
mouseleave()
mouseleave() 方法将事件处理程序函数附加到HTML元素。
当鼠标指针离开HTML元素时，将执行该函数:
实例
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
亲自试一试 »
mousedown()
mousedown() 方法将事件处理程序函数附加到HTML元素。
当鼠标位于HTML元素上时，按下鼠标左键、中键或右键时，将执行该函数:
实例
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
亲自试一试 »
mouseup()
mouseup() 方法将事件处理程序函数附加到HTML元素。
当鼠标悬停在HTML元素上时，释放鼠标左键、中键或右键时，将执行该函数:
实例
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
亲自试一试 »
hover()
hover() 方法包含两个函数，是 mouseenter() 和 mouseleave() 方法的组合。
第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标离开 HTML 元素时执行:
实例
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
亲自试一试 »
focus()
focus() 方法将事件处理程序函数附加到HTML表单字段。
该函数在表单字段获得焦点时执行:
实例
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
亲自试一试 »
blur()
blur() 方法将事件处理程序函数附加到HTML表单字段。
表单字段失去焦点时执行该函数:
实例
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
亲自试一试 »
on() 方法
on() 方法为所选元素附加一个或多个事件处理程序。
将单击事件附加到
元素:
实例
$("p").on("click", function(){ $(this).hide();});
亲自试一试 »
将多个事件处理程序附加到
元素:
实例
$("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); },
mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow");
} });
亲自试一试 »
jQuery 实验
学习训练
练习题:
使用正确的事件通过"单击"隐藏所有
元素。
$("p").(function(){
$(this).hide();
});
提交答案 »
开始练习
jQuery 事件方法
有关完整的jQuery事件参考，请转到我们的 jQuery 事件参考 。
❮ 上一节
下一节 ❯