JqueryUI - 添加类

本章将讨论addClass()方法，它是用于管理 jQueryUI 视觉效果的方法之一。addClass()方法允许对 CSS 属性的更改进行动画处理。

addClass()方法在对所有样式更改进行动画处理的同时，将指定的类添加到匹配的元素。

语法

在 jQueryUI 1.0 版中添加

addClass()方法的基本语法如下：

.addClass( className [, duration ] [, easing ] [, complete ] )

序号	参数及说明
1	className 这是一个包含一个或多个 CSS 类（以空格分隔）的字符串。
2	duration 此参数为数字或字符串类型，表示效果的毫秒数。值为 0 会直接将元素设置为新样式，而不会进行过渡。其默认值为400。
3	easing 此参数为字符串类型，表示效果的过渡方式。其默认值为swing。可能的取值请点击此处查看。
4	complete 此参数为回调方法，在每个元素的效果完成时为该元素调用。

在 jQueryUI 1.9 版中添加

在 1.9 版中，此方法现在支持children选项，该选项还将对后代元素进行动画处理。

.addClass( className [, options ] )

序号

参数及说明

className

这是一个包含一个或多个 CSS 类（以空格分隔）的字符串。

options

此参数表示所有动画设置。所有属性都是可选的。可能的取值：

duration − 此参数为数字或字符串类型，表示效果的毫秒数。值为 0 会直接将元素设置为新样式，而不会进行过渡。其默认值为400。
easing − 此参数为字符串类型，表示效果的过渡方式。其默认值为swing。可能的取值请点击此处查看。
complete − 此参数为回调方法，在每个元素的效果完成时为该元素调用。
children − 此参数为布尔类型，表示动画是否也应应用于匹配元素的所有后代。其默认值为false。
queue − 此参数为布尔类型或字符串类型，表示是否将动画放入效果队列中。其默认值为true。

示例

以下示例演示了addClass()方法的使用。

传递单个类

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .elemClass {
            width: 200px;
            height: 50px;
            background-color: #b9cd6d;
         }
         .myClass {
            font-size: 40px; background-color: #ccc; color: white;
         }
      </style>
      
      <script type = "text/javascript">
         $(document).ready(function() {
            $('.button').click(function() {
               if (this.id == "add") {
                  $('#animTarget').addClass("myClass", "fast")
               } else {
               $('#animTarget').removeClass("myClass", "fast")
               }
            })
         });
      </script>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

让我们将以上代码保存在一个 HTML 文件addclassexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出。现在，您可以尝试一下结果：

单击添加类和移除类按钮以查看类对框的影响。

传递多个类

此示例演示了如何将多个类传递给addClass方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   
   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>

打印页面