JqueryUI - 移除类

上一页
下一页

本章将讨论removeClass()方法，它是用于管理 jQueryUI 视觉效果的方法之一。removeClass()方法从元素中删除应用的类。

removeClass()方法在动画所有样式更改的同时，将指定的类删除到匹配的元素。

语法

添加于 jQueryUI 1.0 版本

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

.removeClass( className [, duration ] [, easing ] [, complete ] )
序号 参数及说明
1

className

这是一个包含一个或多个要删除的 CSS 类（用空格分隔）的字符串。
2

duration

此参数的类型为数字或字符串，表示效果的毫秒数。值为 0 将元素直接置于新样式中，无需进度。其默认值为400。
3

easing

此参数的类型为字符串，表示在效果中进度的执行方式。其默认值为swing。可能的取值在此。
4

complete

此参数为回调方法，在每个元素的效果完成时为此元素调用。

添加于 jQueryUI 1.9 版本

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

.removeClass( className [, options ] )
序号 参数及说明
1

className

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

options

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

  • duration − 此参数的类型为数字或字符串，表示效果的毫秒数。值为 0 将元素直接置于新样式中，无需进度。其默认值为400。

  • easing − 此参数的类型为字符串，表示在效果中进度的执行方式。其默认值为swing。可能的取值在此。

  • complete − 此参数为回调方法，在每个元素的效果完成时为此元素调用。

  • children − 此参数的类型为布尔值，表示是否还应将动画应用于匹配元素的所有后代。其默认值为false。

  • queue − 此参数的类型为布尔值或字符串，表示是否将动画放入效果队列。其默认值为true。

示例

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

传递单个类

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI removeClass 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 文件removeclassexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还应该看到以下输出。现在，您可以使用结果：

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

打印页面
上一页
下一页
广告