資料結構
網路
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+ 閱讀量
