当前位置: 首页 > 文档资料 > jQueryUI 入门教程 >

添加类(Add Class)

优质
小牛编辑
135浏览
2023-12-01

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

addClass()方法为匹配的元素添加指定的类,同时为所有样式更改设置动画。

语法 (Syntax)

在jQueryUI的1.0版中添加

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

.addClass( className [, duration ] [, easing ] [, complete ] )
Sr.No.参数和描述
1

className

这是一个包含一个或多个CSS类(由空格分隔)的String。

2

duration

它的类型为Number或String,表示效果的毫秒数。 值为0会直接在新样式中使用元素,而无需进度。 其默认值为400

3

easing

这是String类型,表示在效果中进行的方式。 它的默认值是swing 。 可能的值在here 。

4

complete

这是对此元素的效果完成时为每个元素调用的回调方法。

在jQueryUI 1.9版中添加

对于1.9版本,此方法现在支持children选项,该选项还将为后代元素设置动画。

.addClass( className [, options ] )
Sr.No.参数和描述
1

className

这是一个包含一个或多个CSS类(由空格分隔)的String。

2

options

这表示所有动画设置。 所有属性都是可选的。 可能的值是 -

  • duration - 这是Number或String类型,表示效果的毫秒数。 值为0会直接在新样式中使用元素,而无需进度。 其默认值为400

  • easing - 这是String类型,表示在效果中进行的方式。 它的默认值是swing 。 可能的值在here 。

  • complete - 这是在为此元素完成效果时为每个元素调用的回调方法。

  • children - 这是布尔类型,表示动画是否应另外应用于匹配元素的所有后代。 其默认值为false

  • queue - 这是Boolean或String类型,表示是否将动画放在效果队列中。 其默认值为true

例子 (Examples)

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

通过单班

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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的标准浏览器中打开它,您还必须看到以下输出。

单击“ Add Class和“ Remove Class按钮以查看类对该框的影响。

传递多个class

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI addClass Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/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 xnip!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>

让我们将上面的代码保存在HTML文件addclassexample.htm ,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。