jquery获取当前点击对象

原创

mob649e81567471 2023-07-23 12:54:47 ©著作权

文章标签 jQuery html 代码示例 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81567471的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery获取当前点击对象

在Web开发中，经常需要获取用户点击的元素对象，以便进行后续的操作。jQuery是一个广泛使用的JavaScript库，提供了简单而强大的方法来处理DOM元素。本文将介绍如何使用jQuery来获取当前点击的对象，并给出相应的代码示例。

准备工作

在开始之前，我们需要确保已经引入了jQuery库。可以通过以下方式引入：

<script src="

获取当前点击对象

使用jQuery获取当前点击对象非常简单，可以通过绑定click事件来实现。以下是一种常见的方式：

$(document).ready(function() {
  $('body').on('click', function(event) {
    var currentElement = $(event.target);
    // 对currentElement进行操作
    console.log(currentElement);
  });
});

首先，我们使用$(document).ready()方法来确保页面加载完成后再执行代码。然后，使用$('body').on('click', function(event) { ... })将click事件绑定到页面的body元素上。当用户点击页面中的任何位置时，都会触发这个事件。

在事件处理函数中，我们使用event.target来获取当前点击的元素对象，并使用$(event.target)将其转换为jQuery对象。这样就可以使用jQuery提供的方法来操作这个对象。

在上面的示例中，我们只是简单地将当前点击的元素对象输出到控制台，以便查看。你可以根据实际需求对currentElement进行任何你想进行的操作，例如修改样式、添加/删除元素等等。

示例应用

下面通过一个简单的示例应用来演示如何使用jQuery获取当前点击对象。

假设我们有一个HTML页面，其中包含了多个按钮。当用户点击任何按钮时，我们要修改该按钮的文本内容为"Clicked"。可以使用以下代码实现：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery获取当前点击对象示例</title>
  <script src="
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>

  <script>
    $(document).ready(function() {
      $('button').on('click', function(event) {
        var currentButton = $(event.target);
        currentButton.text('Clicked');
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们使用$('button').on('click', function(event) { ... })将click事件绑定到所有的按钮元素上。当用户点击任何按钮时，click事件将被触发。

在事件处理函数中，我们获取当前点击的按钮对象，并使用text('Clicked')方法将按钮的文本内容修改为"Clicked"。