jQuery 使用Javascript列出已知的CSS类

在本文中，我们将介绍如何使用jQuery和Javascript来列出已知的CSS类。CSS类是用于给HTML元素添加样式的一种方式。通过列出已知的CSS类，我们可以更好地理解并管理CSS样式。

什么是CSS类

CSS类是用于给HTML元素添加样式的标识符。通过为特定的HTML元素添加一个或多个CSS类，我们可以轻松地应用相同样式到多个元素上。CSS类以.开始，后跟类名，不同的类名之间用空格分隔。

使用jQuery列出已知的CSS类

在Javascript中，我们可以通过querySelectorAll方法来获取特定元素的所有类。然而，这个方法返回的是一个包含所有类的数组，并没有提供每个元素的详细信息。jQuery提供了一个更简单的方法来列出已知的CSS类。

首先，我们需要在HTML页面中引入jQuery库。可以通过以下CDN链接引入最新版本的jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们可以使用jQuery的each方法遍历页面上的每个元素，并使用attr方法获取每个元素的class属性值。代码示例如下：

$("body *").each(function() {
  var classes = $(this).attr("class");
  if (classes !== undefined) {
    var classList = classes.split(" ");
    classList.forEach(function(className) {
      console.log(className);
    });
  }
});

在上面的代码中，我们首先使用$("body *")选择器选择页面上的所有元素。然后，使用each方法遍历每个元素，并使用attr方法获取每个元素的class属性值。我们通过split方法将获取到的类名字符串拆分成一个数组，并使用forEach方法遍历数组中的每个元素。在示例中，我们简单地打印每个类名到控制台上，你可以根据自己的需要进行进一步处理。

这样，我们就可以使用jQuery快速且简单地列出页面上所有元素的已知CSS类。

示例

假设我们有以下HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <h1 class="title">Hello, world!</h1>
    <p class="content">This is a paragraph.</p>
    <button class="btn">Click me</button>
  </div>
</body>
</html>

通过上面提到的jQuery代码，我们可以将页面上的已知CSS类列出如下：