jQuery 事件方法
❮ 上一篇 下一篇 ❯
jQuery 专门用于响应 HTML 页面的事件。
什么是事件？
网页可以响应的各种访问者操作都称为事件。
事件代表发生某事的精确时刻。
示例
鼠标移动到某个元素上
选择一个单选按钮
点击某个元素
事件经常使用 “触发/触发” 这个词。例如：“按键事件在按下某个键的瞬间触发”。
以下是一些常见的 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 元素。
当用户单击 HTML 元素时，该函数将被执行。
以下示例表示：当点击一个
元素时；隐藏当前的
元素。
示例
$("p").click(function(){ $(this).hide();
});
自己动手试一试 »
dblclick()
dblclick() 方法将事件处理函数附加到 HTML 元素。
当用户双击 HTML 元素时，该函数将被执行。
示例
$("p").dblclick(function(){ $(this).hide();
});
自己动手试一试 »
mouseenter()
mouseenter() 方法将事件处理函数附加到 HTML 元素。
当鼠标指针进入 HTML 元素时，该函数将被执行。
示例
$("#p1").mouseenter(function(){ alert("你进入了 p1！");
});
自己动手试一试 »
mouseleave()
mouseleave() 方法将事件处理函数附加到 HTML 元素。
当鼠标指针离开 HTML 元素时，该函数将被执行。
示例
$("#p1").mouseleave(function(){ alert("再见！你现在离开了 p1！");
});
自己动手试一试 »
mousedown()
mousedown() 方法将事件处理函数附加到 HTML 元素。
当鼠标在 HTML 元素上按下左键、中键或右键时，该函数将被执行。
示例
$("#p1").mousedown(function(){ alert("鼠标按下 p1！");
});
自己动手试一试 »
mouseup()
mouseup() 方法将事件处理函数附加到 HTML 元素。
当鼠标在 HTML 元素上释放左键、中键或右键时，该函数将被执行。
示例
$("#p1").mouseup(function(){ alert("鼠标释放 p1！");
});
自己动手试一试 »
hover()
hover() 方法接受两个函数，是 mouseenter() 和 mouseleave() 方法的组合。
第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标离开 HTML 元素时执行。
示例
$("#p1").hover(function(){ alert("你进入了 p1！");
},function(){ alert("再见！你现在离开了 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 事件参考。
❮ 上一篇 下一篇 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册