一、基础方法
1. 使用 .attr()方法
通过 jQuery 的 .attr()方法直接获取元素的 class属性值，返回一个包含所有类名的字符串（多个类名用空格分隔）。
示例代码：
// 获取单个元素的类名
var className = $(".my-element").attr("class");
console.log(className); // 输出："class1 class2 class3"
// 遍历多个元素并获取类名
$(".my-elements").each(function() {
console.log($(this).attr("class"));
});特点：
-
简单直接，适用于快速获取类名字符串。
-
返回值为字符串，需手动分割处理多类名（如
split(" ")）。
2. 使用原生 JavaScript 的 className属性
通过 jQuery 对象转换为原生 DOM 元素后，访问 className属性。
示例代码：
var element = $(".my-element")[0]; // 转换为原生元素
var className = element.className;
console.log(className); // 输出："class1 class2 class3"特点：
-
兼容性强，适用于需要原生操作的场景。
-
返回值与
.attr("class")相同，仍需字符串处理。
3. 使用 classList对象（推荐）
通过原生 DOM 的 classList属性获取类名集合（DOMTokenList对象），支持动态操作类名。
示例代码：
var element = $(".my-element")[0];
var classList = element.classList;
// 遍历类名
classList.forEach(function(className) {
console.log(className);
});
// 转换为数组
var classNamesArray = Array.from(classList);特点：
-
提供
add()、remove()、toggle()等方法，便于类名操作。 -
需手动转换 jQuery 对象为原生元素。
二、实际应用场景
1. 点击事件中获取类名
$(".btn").click(function() {
var currentClass = $(this).attr("class");
console.log("当前按钮类名：", currentClass);
});2. 动态切换类名
结合 .toggleClass()方法实现样式切换：
$(".box").click(function() {
$(this).toggleClass("active");
var newClass = $(this).attr("class");
console.log("切换后类名：", newClass);
});3. 条件判断类名
if ($("#element").attr("class")) {
var hasClass = $("#element").hasClass("highlight");
console.log("是否包含 highlight 类：", hasClass);
}三、注意事项
-
类名顺序问题
.attr("class")返回的类名顺序可能与 HTML 中定义的顺序不同，需注意依赖顺序的场景。 -
性能优化
频繁操作类名时，建议使用
classList或缓存类名字符串，减少 DOM 操作次数。 -
兼容性
classList在 IE9 及以下版本不支持，需使用className或引入 polyfill。
四、方法对比
| 方法 | 返回值类型 | 操作便利性 | 兼容性 |
|---|---|---|---|
.attr("class") |
字符串 | 中等 | 所有浏览器 |
className |
字符串 | 中等 | 所有浏览器 |
classList |
DOMTokenList 对象 | 高 | IE10+ |
五、扩展：类名操作完整示例
<!DOCTYPE html>
<html>
<head>
<style>
.active { color: red; }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box highlight">示例元素</div>
<button id="toggleClass">切换高亮</button>
<script>
$(document).ready(function() {
// 获取初始类名
var initialClass = $(".box").attr("class");
console.log("初始类名：", initialClass);
// 点击切换类名
$("#toggleClass").click(function() {
$(".box").toggleClass("active");
var updatedClass = $(".box").attr("class");
console.log("切换后类名：", updatedClass);
});
});
</script>
</body>
</html>通过上述方法，您可以灵活获取并操作元素的类名，结合 jQuery 的简洁语法和原生 JavaScript 的高效性，满足不同场景需求。