JqueryUI - 添加类

JqueryUI添加类 - 从基本到高级概念的简单简单步骤学习JqueryUI，其中包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单，Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

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

addClass()方法将指定的类添加到匹配的元素中动画所有样式更改.

语法

在jQueryUI 1.0版中添加

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

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

Sr.No.	参数&描述
1	className 这是一个包含一个或多个CSS类的String(以空格分隔).
2	持续时间这是Number或String类型，表示效果的毫秒数.值为0会直接在新样式中使用元素，而无需进度.它的默认值是 400 .
3	缓动这是String类型并指示这种效果的进展方式.它的默认值是 swing .
4	完成当这个元素的效果完成时，这是为每个元素调用的回调方法.

在jQueryUI 1.9版中添加

对于1.9版本，此方法现在支持 children 选项，该选项也会为后代元素设置动画.

.addClass( className [, options ] )

Sr.No.

参数&描述

className

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

选项

这表示所有动画设置.所有属性都是可选的.可能的值为 :

持续时间 : 它的类型为Number或String，表示效果的毫秒数.值为0会直接在新样式中使用元素，而无需进度.它的默认值是 400 .
缓和 : 这是String类型，表示在效果中进行的方式.它的默认值是 swing .
完成 : 当这个元素的效果完成时，这是为每个元素调用的回调方法.
children : 这是布尔类型，表示动画是否应另外应用于匹配元素的所有后代.它的默认值是 false .
队列 : 它的类型为Boolean或String，表示是否将动画放在效果队列中.它的默认值是 true .

示例

以下示例演示了如何使用 addClass()方法.

传递单个类

               jQuery UI addClass Example                                                   $(document).ready(function() {            $('.button').click(function() {               if (this.id == "add") {                  $('#animTarget').addClass("myClass", "fast")               } else {               $('#animTarget').removeClass("myClass", "fast")               }            })         });                              Hello!

Add Class Remove Class

让我们将上述代码保存在HTML文件中 addclassexample.htm 并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果&减去;

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

传递多个类

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

               jQuery UI addClass Example                                                               Welcome to Tutorials Point!
      Click me

让我们将上述代码保存在HTML文件中 addclassexample.htm 并在支持javascript的标准浏览器中打开它，你还必须看到以下输出.现在，您可以使用结果 :