jquery 获取当前元素的class

原创

mob649e8166858d 2023-08-23 14:25:23 ©著作权

文章标签 jQuery 选择器 javascript 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8166858d的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery获取当前元素的class

在使用jQuery时，我们经常需要获取元素的class。通过获取元素的class，我们可以执行一些特定的操作，比如修改样式、添加或删除class等。

在本文中，我们将介绍如何使用jQuery获取当前元素的class，并提供一些代码示例来帮助理解。

jQuery的class选择器

在jQuery中，要获取元素的class，我们可以使用class选择器。class选择器以点号（.）开头，后面跟着要选择的class名称。

下面是一个示例，展示了如何使用class选择器选择一个元素并获取其class：

// 选择class为my-class的元素
var element = $('.my-class');

// 获取元素的class
var className = element.attr('class');
console.log(className);

上面的代码首先使用class选择器选择了一个class为my-class的元素，并将其存储在变量element中。然后，使用attr()方法获取元素的class，并将其存储在变量className中。最后，将className输出到控制台。

请注意，attr()方法用于获取或设置元素的属性。在这里，我们使用它来获取class属性的值。

获取当前元素的class

要获取当前元素的class，我们可以使用this关键字。在jQuery中，this关键字表示当前正在操作的元素。

下面是一个示例，展示了如何使用this关键字获取当前元素的class：

// 选择所有class为my-class的元素
$('.my-class').each(function() {
  // 获取当前元素的class
  var className = $(this).attr('class');
  console.log(className);
});

上面的代码首先使用class选择器选择了所有class为my-class的元素。然后，使用each()方法遍历每个元素，并在每个元素上使用attr()方法获取class，并将其存储在变量className中。最后，将className输出到控制台。

请注意，each()方法用于遍历元素集合，并在每个元素上执行指定的函数。在这里，我们使用它来遍历所有选定的元素，并获取它们的class。

完整示例

下面是一个完整的示例，展示了如何使用jQuery获取当前元素的class并进行一些操作：

<!DOCTYPE html>
<html>
<head>
  <script src="
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <ul>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
    <li class="item">Item 4</li>
  </ul>

  <script>
    $(document).ready(function() {
      $('.item').click(function() {
        // 获取当前元素的class
        var className = $(this).attr('class');
        console.log(className);
        
        // 添加或删除class
        if ($(this).hasClass('highlight')) {
          $(this).removeClass('highlight');
        } else {
          $(this).addClass('highlight');
        }
      });
    });
  </script>
</body>
</html>

上面的代码创建了一个包含四个列表项的无序列表。每个列表项都有一个class为item。

在脚本部分，我们使用.ready()方法来确保页面加载完成后再执行代码。然后，使用.click()方法为每个列表项添加点击事件处理程序。在事件处理程序中，我们首先使用attr()方法获取当前元素的class并将其存储在变量className中。然后，使用hasClass()方法检查当前元素是否有highlight类。如果有，我们使用removeClass()方法将其移除；如果没有，我们使用addClass()方法将其添加。这样，每次点击列表项时，它的class将在highlight和无highlight之间切换。