最新的Web开发教程
 

jQuery事件方法


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>元素:

$("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()方法附加所选元素的一个或多个事件处理程序。

附加click事件到<p>元素:

$("p").on("click", function(){
    $(this).hide();
});
试一试»

附加多个事件处理程序,以一个<p>元素:

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});
试一试»

自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»


jQuery的事件方法

对于一个完整的jQuery的事件引用,请访问我们的jQuery事件参考