使用 jQuery 在每个具有类名的元素上触发事件

在前端开发中，我们常常需要给具有某个类名的元素绑定事件，比如点击事件、 hover 事件等等。使用 jQuery，我们可以很方便地实现这一需求。

准备工作

在开始之前，我们需要引入 jQuery 库。可以通过以下方式进行引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

代码实现

以下是一个示例代码，它会在每个具有 .target 类名的元素上绑定点击事件，并弹出提示框：

$(document).ready(function() {
  $('.target').on('click', function() {
    alert('你点击了一个具有 .target 类名的元素');
  });
});

让我们来逐行解释这个代码：

$(document).ready(function() {

这一行代码表示当文档加载完成后执行代码。也可以写成以下简易形式：

$(function() {

$('.target').on('click', function() {

这一行代码表示选取所有具有 .target 类名的元素，并在它们上面绑定 click 事件。

alert('你点击了一个具有 .target 类名的元素');

这一行代码表示在点击事件发生时弹出提示框。

总结

使用 jQuery，在每个具有类名的元素上触发事件非常简单，只需要使用 $ 函数选中元素，并调用 on 方法绑定事件即可。