jQuery 如何获取被点击元素的类名

在本文中，我们将介绍如何使用jQuery来获取被点击元素的类名。

有时候，在网页开发中我们需要获取用户点击的元素的类名，以便进行一些特定操作或者针对特定类名的样式改变。使用jQuery，我们可以通过几个简单的步骤来实现这个目标。

使用jQuery的click()方法获取被点击元素的类名

jQuery提供了一个方便的方法来获取被点击元素的类名。首先，我们需要使用click()方法来绑定一个点击事件处理程序，并在其中获取被点击元素的类名。

下面是一个简单的示例代码：

$(document).ready(function(){
  $("body").click(function(event){
    var elementClass = $(event.target).attr("class");
    console.log("被点击元素的类名是：" + elementClass);
  });
});

在上述代码中，我们首先使用$(document).ready()方法来确保文档加载完成后再执行代码。然后，我们使用click()方法来绑定一个点击事件处理程序。

在事件处理程序中，我们通过event.target来获取被点击的元素，然后使用attr()方法来获取其class属性的值。最后，我们将获取到的类名打印到控制台上。

现在，当你点击网页上的任意元素时，你将在控制台上看到被点击元素的类名。

示例说明

让我们通过一个更具体的示例来说明如何获取被点击元素的类名。

假设我们有一个包含多个div元素的页面，每个div元素都有一个不同的类名。当用户点击任意一个div元素时，我们想要获取被点击元素的类名，并将其显示在一个预先设置的文本框中。

以下是示例代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){$ ("div").click(function(event){
    var elementClass =  $(event.target).attr("class");$ ("#result").val(elementClass);
  });
});
</script>
</head>
<body>

<div class="red">红色的div</div>
<div class="blue">蓝色的div</div>
<div class="green">绿色的div</div>

输入框：<input type="text" id="result">

</body>
</html>

在上述代码中，我们在页面中添加了三个不同类名的div元素，并为其添加了点击事件处理程序。

在事件处理程序中，我们获取被点击元素的类名，并将其赋值给id为”result”的文本框。

现在，当你在页面上点击任意一个div元素时，被点击元素的类名将显示在文本框中。