JqueryUI - 新增類

本章將討論addClass()方法，它是用於管理 jQueryUI 視覺效果的方法之一。addClass()方法允許對 CSS 屬性的更改進行動畫處理。

addClass()方法在對所有樣式更改進行動畫處理的同時，將指定的類新增到匹配的元素。

語法

在 jQueryUI 1.0 版中新增

addClass()方法的基本語法如下：

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

序號	引數及說明
1	className 這是一個包含一個或多個 CSS 類（以空格分隔）的字串。
2	duration 此引數為數字或字串型別，表示效果的毫秒數。值為 0 會直接將元素設定為新樣式，而不會進行過渡。其預設值為400。
3	easing 此引數為字串型別，表示效果的過渡方式。其預設值為swing。可能的取值請點選此處檢視。
4	complete 此引數為回撥方法，在每個元素的效果完成時為該元素呼叫。

在 jQueryUI 1.9 版中新增

在 1.9 版中，此方法現在支援children選項，該選項還將對後代元素進行動畫處理。

.addClass( className [, options ] )

序號

引數及說明

className

這是一個包含一個或多個 CSS 類（以空格分隔）的字串。

options

此引數表示所有動畫設定。所有屬性都是可選的。可能的取值：

duration − 此引數為數字或字串型別，表示效果的毫秒數。值為 0 會直接將元素設定為新樣式，而不會進行過渡。其預設值為400。
easing − 此引數為字串型別，表示效果的過渡方式。其預設值為swing。可能的取值請點選此處檢視。
complete − 此引數為回撥方法，在每個元素的效果完成時為該元素呼叫。
children − 此引數為布林型別，表示動畫是否也應應用於匹配元素的所有後代。其預設值為false。
queue − 此引數為布林型別或字串型別，表示是否將動畫放入效果佇列中。其預設值為true。

示例

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

傳遞單個類

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <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>
         .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>
   </head>
   
   <body>
      <div id = animTarget class = "elemClass">
         Hello!
      </div>
      <button class = "button" id = "add">Add Class</button>
      <button class = "button" id = "remove">Remove Class</button>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案addclassexample.htm中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以嘗試一下結果：

單擊新增類和移除類按鈕以檢視類對框的影響。

傳遞多個類

此示例演示瞭如何將多個類傳遞給addClass方法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <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>
      
      <!-- CSS -->
      <style>
         .red { color: red; }
         .big { font-size: 5em; }
         .spaced { padding: 1em; }
      </style>
      
      <script>
         $(document).ready(function() {
            $('.button-1').click(function() {
               $( "#welcome" ).addClass( "red big spaced", 3000 );
            });
         });
      </script>
   </head>
   
   <body>
      <p id = "welcome">Welcome to Tutorials Point!</p>
      <button class = "button-1">Click me</button>
   </body>
</html>

列印頁面