Categories
JqueryUI教程

JqueryUI-删除类

JqueryUI-删除类


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

removeClass()方法在对所有样式更改进行动画处理时,将指定的类删除到匹配的元素。

句法

在jQueryUI的1.0版中添加

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

.removeClass( className [, duration ] [, easing ] [, complete ] )
Sr.No. Parameter & Description
1

className

This is a String containing one or more CSS classes (separated by spaces) to be removed.

2

duration

This is of type Number or String, and indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.

3

easing

This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.

4

complete

This is a callback method called for each element when the effect is complete for this element.

在jQueryUI 1.9版本中添加

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

.removeClass( className [, options ] )
Sr.No. Parameter & Description
1

className

This is a String containing one or more CSS classes (separated by spaces).

2

options

This represents all animation settings. All properties are optional. Possible values are −

  • duration − This is of type Number or String, and indicates the number of milliseconds of the effect. A value of 0 takes the element directly in the new style, without progress. Its default value is 400.

  • easing − This is of type String and indicates the way to progress in the effect. Its default value is swing. Possible values are here.

  • complete − This is a callback method called for each element when the effect is complete for this element.

  • children − This is of type Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements. Its default value is false.

  • queue − This is of type Boolean or String and represents whether to place the animation in the effects queue. Its default value is true.

例子

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

通过单班

<meta charset="utf-8">
      <title>jQuery UI removeClass 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>
   
   
   
      <div id="animTarget" class="elemClass">
         Hello!
      </div>
      
      <button class="button" id="add">Add Class</button>
      <button class="button" id="remove">Remove Class</button>
   

让我们将上面的代码保存在HTML文件removeclassexample.htm中,并在支持javascript的标准浏览器中将其打开,您还必须看到以下输出。现在,您可以处理结果了-

单击添加类删除类按钮以查看框中的类效果。

error: 内容受到保护 !!