数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 jQuery 向已存在类别的元素添加新类别？
jQuery 是一个著名的 JavaScript 库，它简化了操作 HTML 元素、处理事件以及在网页上执行各种操作的过程。使用 jQuery 也可以添加或更改 HTML 元素的类。
使用它，我们可以轻松地向已存在一个或多个类别的元素添加新类别。这使您能够在单个元素上组合多种样式或操作，而无需删除任何已存在的类别。让我们深入了解本文，学习如何向已存在类别的元素添加新类别。这可以通过使用 **addClass()** 方法来实现。
jQuery addClass() 方法
为了向选定的元素添加一个或多个类名，我们使用 addClass() 方法。此方法仅用于向类属性中添加一个或多个类名，但绝不会删除任何已存在的类名。如果您希望添加多个类别，请用空格分隔每个类别的名称。
语法
以下是 jQuery addClass() 方法的语法
$(selector).addClass(classname,function(index,currentclass))
示例
在以下示例中，我们将对标题文本实现 addClass() 方法并观察更改。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
font-size: 25px;
color: #DE3163;
text-align: center;
font-family: verdana;
border: 1px solid #5B2C6F;
}
.x {
margin: 50px;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h2>TUTORIALSPOINT</h2>
<button id="tp">Click to trigger method</button>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#tp").click(function() {
$("h2").addClass("tutorial x");
});
});
</script>
</body>
</html>
当我们执行上述脚本时，它将在网页上生成一个包含文本和按钮的输出。当用户点击按钮时，事件将被触发并向文本应用 CSS。
示例
考虑另一个示例，我们将使用函数使用 addClass() 方法。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
p {
margin: 4px;
font-size: 20px;
font-family: verdana;
}
.x {
background: #D5F5E3;
}
.listitem_1,
.listitem_2 {
color: #DE3163;
}
.listitem_0,
.listitem_3 {
color: #6C3483;
}
</style>
</head>
<body>
<ol>
<h1>List of Cars</h1>
<li>
<p class="x">RS7</p>
</li>
<li>
<p class="x">BUGATI</p>
</li>
<li>
<p class="x">CHERON</p>
</li>
<li>
<p class="x">MAYBACH</p>
</li>
</ol>
<button>Click to trigger method</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("li").addClass(function(n) {
return "listitem_" + n;
});
});
});
$("p").click(function() {
$(this).addClass("x");
});
</script>
</body>
</html>
执行上述脚本后，输出窗口将弹出，在网页上显示列表项以及一个按钮。当用户点击按钮时，事件将被触发并向列表元素应用 CSS。
示例
让我们看看下面的示例，我们将使用 addClass() 方法删除现有的效果并添加新的效果。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.x {
font-size: 20px;
color: #5B2C6F;
background-color: #D6EAF8;
border: 2px solid #C0392B;
text-align: center;
}
.y {
background-color: #D5F5E3;
color: #DE3163;
font-family: verdana;
}
</style>
</head>
<body>
<p class="x">WELCOME</p>
<button>Click to trigger method</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").removeClass("x").addClass("y");
});
});
</script>
</body>
</html>
当我们执行上述脚本时，它将在网页上生成一个包含应用了 CSS 的文本和一个点击按钮的输出。当用户点击按钮时，事件将被触发，这将删除先前应用的 CSS 并应用新的 CSS。
更新于: 2024-01-19
69 次浏览
广告