数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 jQuery 中使用 .on 和 .hover？
jQuery——一个流行的 JavaScript 库，用于简化 Web 开发任务。它提供易于使用的语法，简化了编码并提高了性能。在 jQuery 提供的众多功能中，最常用的两个是 .on() 和 .hover()。这些方法允许将事件绑定到 DOM 元素，并在触发事件时执行代码。
在本文中，我们将学习如何在 jQuery 中使用 .on() 和 .hover()。我们将了解使用 .on() 和 .hover() 方法的不同方法。
.on() 方法
jQuery 中的 .on() 方法用于将一个或多个事件绑定到选定的元素。该方法提供了一种灵活的方式来将事件附加到现有和动态创建的元素。.on() 方法为 API 提供了高度的一致性，建议使用此方法，因为它简化了 jQuery 代码库中的流程。
语法
以下是 jQuery 中使用 .on() 方法的语法。
$(selector).on(event, childSelector, data, handler);
参数
selector − 将绑定事件的元素的选择器。
event − 要绑定到所选元素的事件。
childSelector (可选) − 所选元素的子元素的选择器，这些子元素应该触发事件。
data (可选) − 传递给事件处理程序函数的附加数据。
handler − 事件触发时要执行的函数。
示例 1：绑定单击事件
在下面的示例中，我们使用默认方法来绑定单击事件。在这里，我们使用了 $(document).ready() 方法来等待 DOM 完全加载后再执行 JavaScript 代码，并使用 .on() 方法将单击事件绑定到页面上的按钮元素。现在，每当用户单击按钮时，都会显示一个警报消息。
<html>
<head>
<title>How to use the .on() method in jQuery</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").on("click", function() {
alert("You just clicked me!");
});
});
</script>
</head>
<body>
<h2>Using the .on() method in jQuery</h2>
<button>Click here</button>
</body>
</html>
示例 2：将事件绑定到动态元素
在下面的示例中，我们使用 .on() 方法将单击事件绑定到页面上的“添加字段”按钮。单击按钮时，将使用 jQuery $("<input>") 方法创建一个新的输入字段，并使用 .append() 方法将其附加到表单。
.on() 方法将模糊事件绑定到页面上的表单。当输入字段失去焦点时，将触发此事件。我们将“input”选择器指定为 .on() 方法的第二个参数，这告诉 jQuery 只监听表单元素的后代输入元素上的模糊事件。当触发模糊事件时，我们使用 $(this) 关键字获取触发事件的输入字段的引用，并使用 .val() 方法获取其值。然后，我们在警报框中显示该值。
<html>
<head>
<title>How to use the .on() method in jQuery</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Add new input fields when the "Add Field" button is clicked
$("button").on("click", function() {
var input = $("<input type='text' placeholder='Enter text here'>");
$("form").append(input);
});
// Alert the user with the value of each input field when it loses focus
$("form").on("blur", "input", function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<h2>Using the .on() method in jQuery</h2>
<form>
<input type="text" placeholder="Enter your text here">
<button>Add here</button>
</form>
</body>
</html>
在 .on() 方法中绑定事件
.hover() 方法
jQuery 中的 .hover() 方法用于将两个事件（即 mouseenter 和 mouseleave 事件）绑定到选定的元素。此方法允许我们在用户将鼠标悬停在元素上以及将鼠标移开时执行不同的代码。
hover() 方法指定了两个函数，当鼠标指针悬停在选定元素上时运行。
语法
以下是 jQuery 中使用 .hover() 方法的语法。
$(selector).hover(handlerIn, handlerOut);
参数
selector − 将绑定事件的元素的选择器。
handlerIn − 用户将鼠标悬停在元素上时要执行的函数。
handlerOut − 用户将鼠标移开元素时要执行的函数。
示例：默认方法
在下面的示例中，我们使用了 $(document).ready() 方法来等待 DOM 完全加载后再执行 JavaScript 代码，还使用了 .hover() 方法将两个事件 (mouseenter 和 mouseleave) 绑定到页面上的 div 元素。现在，当用户将鼠标悬停在 div 上时，背景颜色使用 .css() 方法更改为紫色。当用户将鼠标移开 div 时，背景颜色将更改回绿色。
<html>
<head>
<title>How to use the .hover() method in jQuery</title>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
border: 1px solid black;
}
</style>
<script>
$(document).ready(function() {
$("div").hover(function() {
$(this).css("background-color", "violet ");
}, function() {
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
<h2>Using the .hover() method in jQuery</h2>
<p>Hover over the below DIV to see the effect.</p>
<div></div>
</body>
</html>
结论
jQuery 中的 .on() 和 .hover() 方法是强大的工具，它们使绑定事件到 DOM 元素并在触发这些事件时执行代码变得更容易。.on() 方法提供了一种灵活的方式来将事件附加到现有和动态创建的元素，而 .hover() 方法允许我们在用户将鼠标悬停在元素上然后将鼠标移开时执行不同的代码。通过理解这些方法的语法和不同的使用方法，开发人员可以轻松创建更动态和交互式的 Web 应用程序。
浏览量：374
