如何在 jQuery 中使用 .on 和 .hover？

在 jQuery 中，.on() 方法用于绑定事件处理程序，.hover() 方法用于绑定鼠标移入和移出事件的处理程序。本文将介绍如何在 jQuery 中使用这两个方法。

使用 .on() 方法

.on() 方法的基本语法如下：

$(selector).on(event, childSelector, data, handler);

• selector：要绑定事件处理程序的元素。
• event：要绑定的事件类型，比如 click、mouseover、keydown 等。
• childSelector：可选，一个字符串，用于过滤子元素。
• data：可选，数据对象，传递给事件处理程序。
• handler：事件处理程序。

以下是一个例子，当用户点击按钮时，弹出提示框：

$("#myBtn").on("click", function() {
  alert("Hello World!");
});

.on() 方法还允许动态绑定事件处理程序。例如，当新加入的元素点击时，弹出提示框：

$(document).on("click", "#myBtn", function() {
  alert("Hello World!");
});

在这个例子中，我们将 .on() 方法应用于 document 对象，而不是具体的元素。这个方法将在 #myBtn 元素被点击时被触发。

使用 .hover() 方法

.hover() 方法用于绑定鼠标移入和移出事件的处理程序。它有两个参数，handlerIn 和 handlerOut，分别表示鼠标移入和移出时的处理程序。

以下是一个例子，在鼠标移入时，将元素的背景色设置为红色，在鼠标移出时，将背景色设置为白色：

$("#myDiv").hover(
  function() {
    $(this).css("background-color", "red");
  },
  function() {
    $(this).css("background-color", "white");
  }
);

.hover() 方法也允许动态绑定事件处理程序。例如，当新加入的元素鼠标移入时，将元素的背景色设置为红色，在鼠标移出时，将背景色设置为白色：

$(document).on("mouseenter", "#myDiv", function() {
  $(this).css("background-color", "red");
});

$(document).on("mouseleave", "#myDiv", function() {
  $(this).css("background-color", "white");
});

在这个例子中，我们使用了 .on() 方法动态绑定了 mouseenter 和 mouseleave 事件处理程序。这些处理程序将在 #myDiv 元素鼠标移入和移出时被触发。

结论

.on() 和 .hover() 方法是 jQuery 中常用的事件处理方法，可以方便地绑定事件处理程序。我们在项目中应该熟练地掌握它们的使用方法，以提高代码的可读性和可维护性。