jQuery 事件方法

❮ 上一页下一个 ❯

jQuery 是专门为响应 HTML 页面中的事件而设计的。

什么是事件？

网页可以响应的所有不同访问者的行为称为事件。

事件表示某件事发生的精确时刻。

例子：

将鼠标移到元素上
选择单选按钮
点击元素

期限 “解雇/被解雇” 通常与事件一起使用。例如：“按下某个键时，将触发 keypress 事件”。

以下是一些常见的 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
点击	按键	提交	加载
双击	按下	改变	调整大小
鼠标进入	键向上	重点	滚动
鼠标离开		模糊	卸下

事件方法的 jQuery 语法

在 jQuery 中，大多数 DOM 事件都有等效的 jQuery 方法。

要为页面上的所有段落分配点击事件，您可以执行以下操作：

$("p").click();

下一步是定义事件触发时应该发生什么。您必须将一个函数传递给事件：

$(“p”).click(函数(){
// 行动就从这里开始！！
});

常用的 jQuery 事件方法

$(文件).ready()

这 $(document).ready() 方法允许我们在文档完全加载时执行一个函数。此事件已在jQuery 语法章节。

点击（）

这 click() 方法将事件处理函数附加到 HTML 元素。

当用户点击 HTML 元素时执行该函数。

以下示例表示：当点击事件在 <p> 元素；隐藏当前<p> 元素：

例子

$(“p”).click(函数(){
$(这个).隐藏();
});

亲自尝试 »

双击()

这 dblclick() 方法将事件处理函数附加到 HTML 元素。

当用户双击 HTML 元素时执行该函数：

例子

$("p").dblclick(函数(){
$(这个).隐藏();
});

亲自尝试 »

鼠标进入()

这 mouseenter() 方法将事件处理函数附加到 HTML 元素。

当鼠标指针进入 HTML 元素时执行该函数：

例子

$("#p1").mouseenter(function(){
alert("您已进入p1！");
});

亲自尝试 »

鼠标离开()

这 mouseleave() 方法将事件处理函数附加到 HTML 元素。

当鼠标指针离开 HTML 元素时执行该函数：

例子

$("#p1").mouseleave(函数(){
alert("再见！您现在离开 p1！");
});

亲自尝试 »

鼠标按下（）

这 mousedown() 方法将事件处理函数附加到 HTML 元素。

当鼠标位于 HTML 元素上时，按下鼠标左键、中键或右键，将执行此函数：

例子

$("#p1").mousedown(function(){
alert("鼠标在 p1 上按下！");
});

亲自尝试 »

鼠标移开()

这 mouseup() 方法将事件处理函数附加到 HTML 元素。

当鼠标位于 HTML 元素上且释放鼠标左键、中键或右键时，将执行此函数：

例子

$("#p1").mouseup(函数(){
alert("鼠标移到 p1 上！");
});

亲自尝试 »

徘徊（）

这 hover() 方法采用两个函数，是mouseenter() 和mouseleave() 方法。

第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标离开 HTML 元素时执行：

例子

$("#p1").hover(函数(){
alert("您已进入p1！");
},
功能（）{
alert("再见！您现在离开 p1！");
});

亲自尝试 »

重点（）

这 focus() 方法将事件处理程序函数附加到 HTML 表单字段。

当表单字段获得焦点时执行该函数：

例子

$("输入").focus(函数(){
$(this).css("背景颜色", "#cccccc");
});

亲自尝试 »

模糊（）

这 blur() 方法将事件处理程序函数附加到 HTML 表单字段。

当表单字段失去焦点时执行该函数：

例子

$(“输入”).blur(函数(){
$(this).css("背景颜色", "#ffffff");
});

亲自尝试 »

on() 方法

这 on() 方法为所选元素附加一个或多个事件处理程序。

将点击事件附加到 <p> 元素：

例子

$("p").on("click", 函数(){
$(这个).隐藏();
});

亲自尝试 »

将多个事件处理程序附加到 <p> 元素：

例子

$(“p”).on({
鼠标进入：函数（）{
$(this).css("背景颜色", "浅灰色");
  },
鼠标离开：函数（）{
$(this).css("背景颜色", "浅蓝色");
  },
点击：函数（）{
$(this).css("背景颜色", "黄色");
  }
});

亲自尝试 »

jQuery 练习