数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律学如何使用 jQuery 获取点击元素的类名？
概述
我们可以轻松地找到被点击元素的类名，jQuery 提供了多种方法，在元素被点击时返回元素的类名。jQuery 的 "attr()" 方法和 "this.className" 属性可以帮助我们找到元素的类名。为了更深入地了解这些方法，我们将通过一些示例来演示这两种方法。类名是一个属性，它定义了标签内数据的组或类型。不同的标签或元素可以包含相同的类名，但对于 ID 名来说，只能有一个标签包含唯一的 ID 名，因为 ID 名不能在多个标签或元素中重复。
语法
下面显示了查找被点击元素类名的语法：
$(this).attr("class");
$(selector).text(this.className);
this − 在上面的语法中，“this”是一个关键字，它将当前元素作为引用变量。
attr("class) −此方法返回属性键的值。其中，attr() 方法传递了 "class" 属性，因为 attr() 将返回元素的类名。
selector − 选择器是用户点击的任何元素，可以是任何标签，例如 p、div 或 button 或任何其他标签。
this.className − 它返回被点击元素的类名，因为被点击元素的引用将存储在 "this" 关键字中，而 className 将返回元素的类名。
算法 1
步骤 1 − 在您的文本编辑器中创建一个 HTML 文件，并在文件中添加 HTML 基本结构。
步骤 2 − 现在将 jQuery CDN（内容分发网络）链接添加到 HTML 文件的 head 标签中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
步骤 3 − 现在创建一些 HTML 按钮，并分别为它们添加类名。
<button class="reset">Reset Button</button> <button class="submit">Submit Button</button> <button class="clear">Clear Button</button> <button class="close">Close Button</button> <div></div>
步骤 4 − 现在添加 style 标签来设置页面的布局。
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
步骤 5 − 现在将 script 标签添加到 body 标签中。
<script></script>
步骤 6 − 现在使用 jQuery 选择器选择 button 标签，并添加 click 函数。
$("button").click(function(){})
步骤 7 − 现在使用 attr() 方法获取类名，并将类名设置为 div。
$("div").text($(this).attr("class"));
步骤 8 − 该函数已准备好返回被点击元素的类名。
示例 1
在本例中，我们将使用 jQuery 的 attr("class") 方法来获取被点击元素的类名。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>find class of clicked element</title>
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<h3>Click on the button to get their respective class.</h3>
<button class="reset">Reset Button</button>
<button class="submit">Submit Button</button>
<button class="clear">Clear Button</button>
<button class="close">Close Button</button>
<div></div>
<script>
$("button").click(function(){
$("div").text($(this).attr("class"));
})
</script>
</body>
</html>
下图显示了上述示例的输出，其中显示了 HTML 按钮，例如重置按钮、提交按钮、清除按钮和关闭按钮。这些元素还包含了各自名称的 class 属性。因此，当用户点击特定按钮时，它将返回类名，如下图所示，以绿色显示。因此，在下图中，用户点击提交按钮，它将以绿色显示类名“submit”。
算法 2
步骤 1 − 在您的文本编辑器中创建一个 HTML 文件，并在文件中添加 HTML 基本结构。
步骤 2 − 现在将 jQuery CDN（内容分发网络）链接添加到 HTML 文件的 head 标签中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
步骤 3 − 现在创建有序列表，使用列表标签和各自的类名。
<ol> <li class="Frontend Technology">HTML, CSS and JavaScript</li> <li class="Backend Technology">NodeJs, ExpressJs</li> <li class="Programming Language">Java, Python and C++</li> <li class="API Testing">Postman</li> </ol> <div></div>
步骤 4 − 现在添加 style 标签来设置页面的布局。
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
步骤 5 − 现在将 script 标签添加到 body 标签中。
<script></script>
步骤 6 − 现在使用 jQuery 选择器选择列表标签，并添加 click 函数。
$("li").click(function(){})
步骤 7 − 现在使用 "this.className" 方法获取类名，并将类名设置为 div。
$("div").text(this.className);
步骤 8 − 该函数已准备好返回被点击元素的类名。
示例 2
在本例中，我们将使用 "this" 关键字引用和 className 方法，该方法将在点击时返回当前元素的类名。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>find class of clicked element</title>
<style>
div{
font-size: 2rem;
font-weight: 800;
color: green;
}
</style>
</head>
<body>
<h3>Click on the list to get their class</h3>
<ol>
<li class="Frontend Technology">HTML, CSS and JavaScript</li>
<li class="Backend Technology">NodeJs, ExpressJs</li>
<li class="Programming Language">Java, Python and C++</li>
<li class="API Testing">Postman</li>
</ol>
<div></div>
<script>
$("li").click(function(){
$("div").text(this.className);
})
</script>
</body>
</html>
下图是上述示例的输出，其中显示了一些包含技术的列表。这些列表标签包含各自的类名，例如前端技术、后端技术、编程语言和 API 测试。因此，当用户点击第一个包含 HTML、CSS 和 JavaScript 的列表标签时，它将以绿色显示其类名“前端技术”。
结论
此功能在许多页面中用于提供动态行为，例如，在某些情况下，开发人员可能希望在点击特定类元素时触发函数，这简化了 HTML 中的 DOM 操作，作为 JavaScript 函数。在上面的示例中，text() 方法在浏览器窗口上显示输出作为类名方面也起着重要作用。
2K+ 阅读量
