以下是使用 jQuery 获取元素 CSS 类名的详细教程，涵盖基础方法、实际应用及注意事项：

一、基础方法

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);
}

---

三、注意事项

1. 类名顺序问题​

   .attr("class")返回的类名顺序可能与 HTML 中定义的顺序不同，需注意依赖顺序的场景。

2. 性能优化​

   频繁操作类名时，建议使用 classList或缓存类名字符串，减少 DOM 操作次数。

3. 兼容性​

   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 的高效性，满足不同场景需求。