資料結構
網路
關係型資料庫管理系統
作業系統
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.com/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.com/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.com/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 次瀏覽
廣告