jQuery UI addClass()方法

jQuery UI addClass()方法

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

语法:

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

参数:该方法接受上面提到的和下面描述的两个参数。

  • className。这个参数持有需要添加的类的名称。
  • options。它是一个可选参数。

返回值:它返回选定的元素,并添加新的类名称。

Options:

  • 持续时间。这个选项允许你选择视觉效果的时间长度,单位是毫秒。类型是数字或字符串,默认值是400。

语法:

$(".selector").addClass(className, "fast");  
JavaScript
  • 缓和。这个选项说明你想要什么样的缓和或进展的视觉效果。其类型是字符串,默认值是摆动。

语法:

$(".selector").addClass(className, "easeOutBounce");  
JavaScript
  • complete。这个选项是回调方法,在视觉效果完成后为每个匹配的元素调用。其类型为函数。
  • children。这个选项告诉人们视觉效果或动画是否应用于它的所有子代。类型是布尔值,默认值是false。
  • queue:这个选项告诉人们视觉效果或动画是否被放在效果队列中。类型为布尔值或字符串,默认值为真。

jQuery UI的链接:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="样式表" type="text/css" />
HTML

jQuery代码显示此方法在单一类中的工作:

示例 1:

<!DOCTYPE html>
<html>
  
<head>
    <meta charset = "utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
      
    <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>
        .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; 
        }
    </style>
      
    <script type = "text/javascript">
      
        (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!");
            }); 
        });
    </script>
</head> 
  
<body>     
    <h1 style="color:green">
        GeeksforGeeks
    </h1> 
      
    <b class="highlight">
        jQuery UI addClass method
    </b>
      
    <div class="height"></div><br>
      
    <div id = welcomeId class = "welcomeClass">
        Welcome !
    </div>
    <div class="height"></div><br>
      
    <button class = "btnClass" id = "addID">
        Add Class
    </button>
      
    <button class = "btnClass" id = "removeID">
        Remove Class
    </button>
      
    <div class="height"> </div><br>
    <div class="square" >Click this </div>
</body>
  
</html>
HTML

在上面的例子中,被选中的元素是。”b “和 “div”。”highlight “类被应用于元素 “b”。”newClass “类被应用于元素 “div “的id welcomeId。在jQuery UI的.addClass()方法的帮助下,”easing-square “类被应用于具有square类的元素 “div”。

输出:
jQuery UI addClass()方法

jQuery代码显示此方法在多个类中的工作:

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

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

  • CSS 代码:
<style>
    .red { 
        background: red; 
        width:400px;          
    }          
      
    .font{ 
        font-size: 3em;
        text-align : center;
    }  
      
    .padding { 
       padding: 1em; 
    }  
      
    .border {
        border: 2px solid black;
        border-radius: 25px;
    }
</style>
HTML
  • jQuery 代码:
<script>
    (document).ready(function() {  
        ('.btnClass').click(function() {  
            $( "#paraId" ).addClass(
                "red font padding border", 2500 );  
        });                
    }); 
</script> 
HTML

最终方案:

<!DOCTYPE html> 
<html lang="en">
       
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
      
    <title>
        jQuery UI adding multiple classes
    </title> 
      
    <link href=
"http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet"> 
          
    <script src=
"http://code.jquery.com/jquery-1.10.2.js"></script> 
  
    <script src=
"http://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script> 
      
    <style> 
        .red { 
            background: red; 
            width:400px;         
        }         
          
        .font { 
            font-size: 3em;
            text-align : center;
        } 
          
        .padding { 
            padding: 1em; 
        } 
          
        .border {
            border: 2px solid black;
            border-radius: 25px;
        }
    </style> 
      
    <script> 
        (document).ready(function() { 
            ('.btnClass').click(function() { 
                $( "#paraId" ).addClass( 
                    "red font padding border", 2500 ); 
            });     
        });
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">
        GeeksforGeeks
    </h1> 
      
    <b>jQuery UI adding multiple classes</b>
      
    <div class="height"></div> 
      
    <p id="paraId">GFG website</p> 
      
    <button class="btnClass">
        Click this
    </button>         
</body> 
  
</html>
HTML

输出:
jQuery UI addClass()方法

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

  • CSS 代码:
<style>
    .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;
    }    
</style>
HTML
  • jQuery 代码:
<script>
    (document).ready(function() {
        ( "#btnClick" ).on( "click", function() {
            ( "#container" ).addClass(
                    "newClass", 4000, callback );
        });
   
        function callback() {
            setTimeout(function() {
                ( "#container" ).removeClass( "newClass" );
            }, 4000 );
        }            
    });
</script>
HTML

最终方案:

<!DOCTYPE html>
<html>
  
<head>
    <meta charset = "utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
      
    <title>jQuery UI addClass with callback</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>
        .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;
        }    
    </style>
  
    <script>
        (document).ready(function() {
            ( "#btnClick" ).on( "click", function() {
                ( "#container" ).addClass(
                        "newClass", 4000, callback );
            });
       
            function callback() {
                setTimeout(function() {
                    ( "#container" ).removeClass( "newClass" );
                }, 4000 );
            }            
        });
    </script>
</head>
      
<body>
    <h1 style="color:green">GeeksforGeeks</h1> 
      
    <b>jQuery UI add Class method with callback</b>
      
    <div class="height"></div><br>
          
    <div class="parent">
        <div id="container">
            This is to demonstrate jQuery 
            UI addClass method with
            removeClass callback method.
        </div>
    </div>
      
    <button id="btnClick">
        Click to execute
    </button>
</body>
  
</html>
HTML

在上面的代码中,id为container的 “div “元素被选中,在.addClass()函数的帮助下,一个新的类被添加到选中的 “div “元素中。回调函数也在jQuery UI的.removeClass()方法的帮助下被执行。

输出:

jQuery UI addClass()方法

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册