📌  相关文章
📜  jQuery UI | addClass() 方法(1)

📅  最后修改于: 2023-12-03 14:43:12.431000             🧑  作者: Mango

jQuery UI | addClass() 方法

简介

jQuery UI 是对 jQuery 的扩展，提供了许多常用的 UI 控件和交互组件，使得网页开发变得更加直观和快捷。addClass() 方法是其中一个 CSS 类名操作函数，主要用于向指定的元素添加一个或多个 CSS 类名。

语法
$(selector).addClass(classname, function(index, currentclass))
参数
  • selector：jQuery 选择器，用于选择要添加类名的元素。
  • classname：一个或多个需要添加的 CSS 类名，多个类名之间用空格分隔。
  • function(index, currentclass)：可选参数，用于返回一个或多个要添加的类名。
返回值

此函数没有返回值，可以链式地对元素进行操作。

示例
$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass("bg-color border-color"); // 向所有 p 元素添加两个类名
  });
});
jQuery UI 实例

下面是一个点击按钮之后，在指定的 DIV 元素中添加 CSS 类名的 jQuery UI 示例。

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>jQuery UI addClass() Method Example</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    .add-class {
      text-align: center;
      padding: 20px;
    }
    .bg-color {
      background-color: #eee;
    }
    .border-color {
      border: 1px solid #cfcfcf;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#add-class-div").addClass("bg-color border-color");
      });
    });
  </script>
</head>
<body>
  <div class="add-class" id="add-class-div">这是一个添加 CSS 类名的示例。</div>
  <button>添加类名</button>
</body>
</html>
注意事项
  • 如果要在添加类名时执行某些操作（如设置样式），可以把函数作为 addClass() 的第二个参数传入。
  • 如果需要添加多个 CSS 类名，需要用空格隔开，如 .class1.class2，可以添加多个类名，但必须是单个参数。
  • 如果某个元素已经存在某个类名，再次添加将不起任何作用，因为类名不能重复。
  • 如果需要删除一个或多个 CSS 类名，可以使用 removeClass() 方法来实现。
  • toggleClass() 方法可以在需要时添加或删除类名，使得元素在点击时可以切换类名。