jQuery UI | addClass() 方法

addClass() 方法是 jQuery UI 框架中的一个内置方法，用于管理用户界面视觉效果。此方法将类添加到所有选定元素，并为 CSS 属性中的所有定义样式设置动画。它主要管理文本缩进、宽度、高度、填充、边距、字体大小和字母间距的动画方法，提供平滑的效果过渡。

句法：

$(selector).addClass(className, options);

参数：此方法接受上面提到和下面描述的两个参数：

• className：该参数包含需要添加的类名。
• options：它是一个可选参数。

返回值：它返回添加了新类名的选定元素。

选项：

• 持续时间：此选项允许您以毫秒为单位选择视觉效果的持续时间。类型为数字或字符串，默认值为 400。
  句法：

  $(".selector").addClass(className, "fast");  
  

• 缓动：这个选项说明你想要什么样的视觉效果缓动或进步。类型为字符串，默认值为swing 。
  句法：

  $(".selector").addClass(className, "easeOutBounce");  
  

• complete：该选项是视觉效果完成后每个匹配元素调用的回调方法。类型是函数。
• children：此选项说明是否将视觉效果或动画应用于其所有后代。类型为 boolean ，默认值为false 。
• 队列：此选项指示视觉效果或动画是否放置在效果队列中。类型为 boolean 或字符串 ，默认值为true 。

jQuery UI 的链接：

href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

使用单个类显示此方法的工作的 jQuery 代码：
示例 1：

  

    
    
      
    jQuery UI addClass() Example
      
    
          
    
    
      
    
        .welcomeClass {
            width: 200px;
            height: 50px;
            text-align:center;
            padding :10px 10px 10px 10px;
            background-color: lightgreen;
            border: 2px solid green;
        }
        .newClass {
            font-size: 40px;
            background-color: #cccccc;
            color: red;
        }
        .highlight {
            color:#090;
            font-family:Calibri;         
            font-size:2em;
            text-shadow:2px 2px #FF0000;
        }
        .height{ height: 10px;}
        .square {
            width: 100px;
            height: 100px;
            text-align: center;
            padding :8px 10px 8px 10px;
            background-color: #cccccc;         
        }
          
        .easing-square {
            width: 200px;
            height: 200px;
            padding: 20px;
            background-color: lightgreen;
            border: 2px solid green; 
        }
    
      
    
      
        $(document).ready(function() {
            $('.btnClass').click(function() {
                if (this.id == "addID") {
                    $('#welcomeId').addClass(
                            "newClass", "fast")
                } 
                else {
                    $('#welcomeId').removeClass(
                            "newClass", "fast")
                }
            })
              
            $( ".square" ).click(function() {
                $( this ).addClass( "easing-square",
                                    700, "swing" );
                $( this ).text("addclass() method "
                        + "executed successfully!");
            }); 
        });
    
 
  
     
    
        GeeksforGeeks
     
      
    
        jQuery UI addClass method
    
      
    
      
    
        Welcome !
    
    
      
    
        Add Class
    
      
    
        Remove Class
    
      
     
    Click this 

  

在上面的例子中，被选中的元素是： “b”和“div” 。 “highlight”类应用于元素“b” 。 “newClass”类应用于元素“div”，id 为welcomeId 。借助 jQuery UI 的 .addClass() 方法，“easing-square” 类被应用于元素“div”和square类。
输出：

jQuery 代码显示此方法与多个类的工作：

设计结构：在下面的代码中，在jQuery UI的.addClass()方法的帮助下，选择了元素“p”并添加了“red” 、 “font” 、 “padding”和“border”类。以下 CSS 代码用于定义“p”元素的所有类，也用于设计用户界面部分。以下 jQuery 代码用于管理单击事件并向所选元素添加多个类。

注意：多个类在addClass()方法中用空格分隔。

• CSS 代码：

• jQuery代码：

      $(document).ready(function() {  
          $('.btnClass').click(function() {  
              $( "#paraId" ).addClass(
                  "red font padding border", 2500 );  
          });                
      }); 
   

最终解决方案：

 

       
 
    
    
      
    
        jQuery UI adding multiple classes
     
      
     
          
     
  
    
     
      
     
        .red { 
            background: red; 
            width:400px;         
        }         
          
        .font { 
            font-size: 3em;
            text-align : center;
        } 
          
        .padding { 
            padding: 1em; 
        } 
          
        .border {
            border: 2px solid black;
            border-radius: 25px;
        }
     
      
     
        $(document).ready(function() { 
            $('.btnClass').click(function() { 
                $( "#paraId" ).addClass( 
                    "red font padding border", 2500 ); 
            });     
        });
     
 
  
 
    
        GeeksforGeeks
     
      
    jQuery UI adding multiple classes
      
     
      
    GFG website 
      
    
        Click this
             
 
  

输出：

使用回调方法显示此方法工作的jQuery代码：

• CSS 代码：

• jQuery代码：

      $(document).ready(function() {
          $( "#btnClick" ).on( "click", function() {
              $( "#container" ).addClass(
                      "newClass", 4000, callback );
          });
     
          function callback() {
              setTimeout(function() {
                  $( "#container" ).removeClass( "newClass" );
              }, 4000 );
          }            
      });

最终解决方案：

  

    
    
      
    jQuery UI addClass with callback
      
    
    
    
      
    
        .height { 
            height: 10px;
        }        
          
        .parent { 
            width: 500px;
            height: 250px; 
            position: relative;
        }
          
        #btnClick { 
            padding: .5em 1em;
            text-decoration: none;
        }
          
        #container { 
            width: 380px;
            height: 210px; 
            padding: 1em;
            color: #2d2d2d;          
            border: 1px solid black; 
            background: #b3b3b3;           
        }
          
        .newClass { 
            text-indent: 20px; 
            letter-spacing: .2em;
            width: 380px; 
            height: 210px; 
            padding: 20px; 
            margin: 10px; 
            font-size: 1.1em;
        }    
    
  
    
        $(document).ready(function() {
            $( "#btnClick" ).on( "click", function() {
                $( "#container" ).addClass(
                        "newClass", 4000, callback );
            });
       
            function callback() {
                setTimeout(function() {
                    $( "#container" ).removeClass( "newClass" );
                }, 4000 );
            }            
        });
    

      

    GeeksforGeeks 
      
    jQuery UI add Class method with callback
      
    
          
    
        
            This is to demonstrate jQuery 
            UI addClass method with
            removeClass callback method.
        
    
      
    
        Click to execute
    

  

在上面的代码中，选择了带有 id容器的“div”元素，并且在.addClass()函数的帮助下，一个新的类被添加到所选的“div”元素中。回调函数也是在 jQuery UI 的.removeClass()方法的帮助下执行的。

输出：