資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery 為最後一個段落元素新增類？
jQuery 是一個著名的 JavaScript 庫，它簡化了操作 HTML 元素、處理事件以及在網頁上執行許多操作的過程。使用 jQuery 也可以新增或更改 HTML 元素的類。
使用它，我們可以輕鬆地為最後一個段落元素新增一個新類。讓我們深入瞭解本文，學習更多關於使用 jQuery 為最後一個段落元素新增類的方法。這可以透過使用 addclass() 方法和 append() 方法來實現。讓我們逐一討論它們。
jQuery addclass() 方法
addClass() 方法會將一個或多個類名新增到所選元素。此方法只會將一個或多個類名新增到 class 屬性中；不會刪除任何現有的類屬性。如果要新增多個類名，請使用空格分隔它們。
語法
以下是 addclass() 方法的語法
$(selector).addClass(classname,function(index,currentclass))
結合此方法，我們將使用 jQuery last() 方法，該方法用於返回所選元素的最後一個元素。
示例
以下是一個示例，我們將在此示例中實現 addclass() 方法以及 last() 方法並新增一個類。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.tutorial {
color: #DE3163;
font-size: 20px;
font-family: verdana;
}
body {
background-color: #E8DAEF;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green;"> TUTORIALSPOINT </h1>
<p>WELCOME..!</p>
<button>CLICK</button>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").last().addClass("tutorial");
});
});
</script>
</body>
</html>
當我們執行上述指令碼時，它將生成一個包含文字和點選按鈕的輸出。當用戶點選按鈕時，事件被觸發，並且對段落文字（最後一個元素）進行更改。
jQuery append() 方法
jQuery 的 append() 方法允許您將內容（例如 HTML 元素或文字）新增到指定元素的末尾。它特別有用，因為在許多情況下您需要立即新增資訊，例如響應特定的使用者操作。
語法
以下是 jQuery append() 方法的語法
$(selector).append(content,function(index,html))
示例
讓我們看下面的例子，我們將使用 append() 方法為最後一個元素新增類。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
body {
font-family: verdana;
text-align: center;
color: #DE3163;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h2>Welcome To</h2>
<button id="tutorial">Click!</button>
<script>
$(document).ready(function() {
$("#tutorial").click(function() {
$("h2").append(" TutorialsPoint.!");
});
});
</script>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，在網頁上顯示文字和點選按鈕。當用戶點選按鈕時，事件被觸發，文字被新增到其末尾。
更新於：2024年1月19日
65 次瀏覽
廣告