jQuery是一種受歡迎的JavaScript函式庫，它提供了一些非常方便的方法來處理HTML元素和頁面互動。在很多情況下，我們需要取得目前元素的類別名稱（class name）以進行各種操作，例如新增、刪除或切換類別名稱。本文將介紹如何使用jQuery來取得目前類別名，並提供一些範例。
一、基本上取得目前類別名稱的方法
要取得目前元素的類別名，可以使用jQuery的.attr()方法，並將"class"作為參數傳入：
var className = $("element").attr("class");其中，"element"是一個jQuery選擇器字串，可以是任何有效的CSS選擇器，例如類別名稱、ID、標籤名稱等。此程式碼將傳回一個包含目前元素所有類別名稱的字串，多個類別名稱之間以空格分隔。
例如，我們有以下HTML程式碼：
<div class="box small"></div>
我們可以使用以下程式碼來取得目前元素的類別名稱：
var className = $("div.box.small").attr("class");
console.log(className); // 输出 "box small"二、使用classList屬性取得目前類別名
除了使用jQuery的.attr()方法，也可以使用原生JavaScript的classList屬性來取得目前類別名，例如：
var className = $("element")[0].classList;其中，"[0]"將jQuery物件轉換為DOM節點。此程式碼將傳回一個包含所有類別名稱的DOMTokenList對象，可以方便地新增、刪除和切換類別名稱。
例如，我們有以下HTML程式碼：
<div class="box small"></div>
我們可以使用以下程式碼來取得目前元素的類別名稱：
var classList = $("div.box.small")[0].classList;
console.log(classList); // 输出 ["box", "small"]三、基本操作類別名稱
1.新增類別名稱
要透過jQuery新增類別名，可以使用.addClass()方法。例如：
$("element").addClass("new-class");其中，"new-class"是要新增的類別名稱。此程式碼將在目前元素中新增一個名為"new-class"的類別名稱。
例如，我們有以下HTML程式碼：
<div class="box small"></div>
我們可以使用以下程式碼來新增一個新的類別名稱：
$("div.box.small").addClass("big");這將在目前元素中新增一個名為"big"的類別名，更新後的HTML程式碼如下：
<div class="box small big"></div>
2.刪除類別名稱
要透過jQuery刪除類別名，可以使用.removeClass()方法。例如：
$("element").removeClass("old-class");其中，"old-class"是要刪除的類別名稱。此程式碼將從目前元素中刪除一個名為"old-class"的類別名稱。
例如，我們有以下HTML程式碼：
<div class="box small"></div>
我們可以使用以下程式碼來刪除一個類別名稱：
$("div.box.small").removeClass("small");這將從目前元素中刪除一個名為" small"的類別名，更新後的HTML程式碼如下：
<div class="box"></div>
3.切換類別名稱
要透過jQuery切換類別名，可以使用.toggleClass()方法。例如：
$("element").toggleClass("class1 class2");其中，"class1 class2"是要切換的類別名，多個類別名稱之間以空格分隔。此程式碼將在當前元素中切換兩個類名，如果當前元素已經存在這些類名，則刪除它們，否則會添加它們。
例如，我們有以下HTML程式碼：
<div class="box small"></div>
我們可以使用以下程式碼來切換兩個類別名稱：
$("div.box.small").toggleClass("small big");這將從目前元素中刪除一個名為"small"的類別名，並且新增一個名為"big"的類別名，更新後的HTML程式碼如下：
<div class="box big"></div>
四、應用範例
下面是一些範例，展示如何使用jQuery取得目前類別名稱：
1.在點選元素時輸出目前類別名稱：
$("div").click(function() {
var className = $(this).attr("class");
console.log(className);
});2.當捲動視窗時切換導覽列的樣式：
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 100) {
$("nav").addClass("fixed-top");
} else {
$("nav").removeClass("fixed-top");
}
});3.在輪播圖中切換圖片時更新圖像標題：
$(".carousel-item").on("slide.bs.carousel", function() {
var captionText = $(this).find(".carousel-caption h4").text();
var className = $(this).attr("class");
console.log("当前类名：" + className);
$(".slider-title").text(captionText);
});總結
透過本文，我們了解如何使用jQuery獲取當前類別名，並使用一些範例展示如何操作類名。直接透過.attr()方法可以取得目前類別名，而使用.classList屬性則可以方便地新增、刪除和切換類別名稱。掌握這些知識可以讓我們在編寫JavaScript程式碼時更容易處理HTML元素和樣式。
以上是jquery怎麼取得目前類別名的詳細內容。更多資訊請關注PHP中文網其他相關文章！
