📜  jQuery UI | addClass() 方法

📅  最后修改于: 2021-09-01 03:25:03             🧑  作者: Mango

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 的链接:

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



  

    
    
      
    jQuery UI addClass() Example
      
    
          
    
    
      
    
      
    
 
  
     
    

        GeeksforGeeks     

                      jQuery UI addClass method                 

           
        Welcome !     
    

                                   

    
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代码:
     
    

最终解决方案:

 

       
 
    
    
      
    
        jQuery UI adding multiple classes
     
      
     
          
     
  
     
      
     
      
     
 
  
 
    

        GeeksforGeeks     

             jQuery UI adding multiple classes            
             

GFG website

                           

输出:

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

  • CSS 代码:
    
    
  • jQuery代码:
    
    

最终解决方案:



  

    
    
      
    jQuery UI addClass with callback
      
    
    
    
      
    
  
    

      

    

GeeksforGeeks

             jQuery UI add Class method with callback            

               
        
            This is to demonstrate jQuery              UI addClass method with             removeClass callback method.         
    
              

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

输出: