JqueryUI - Xóa lớp

Chương này sẽ thảo luận về removeClass()method, wh ich là một trong những phương thức được sử dụng để quản lý các hiệu ứng hình ảnh jQueryUI. Phương thức removeClass () loại bỏ các lớp được áp dụng khỏi các phần tử.

Phương thức removeClass () loại bỏ các lớp được chỉ định cho các phần tử phù hợp trong khi tạo hoạt ảnh cho tất cả các thay đổi kiểu.

Cú pháp

Đã thêm vào phiên bản 1.0 của jQueryUI

Các removeClass() phương thức có cú pháp cơ bản như sau:

.removeClass( className [, duration ] [, easing ] [, complete ] )
Sr.No. Mô tả về Thông Số
1

className

Đây là một Chuỗi chứa một hoặc nhiều lớp CSS (được phân tách bằng dấu cách) cần được loại bỏ.

2

duration

Đây là loại Number hoặc String và cho biết số phần nghìn giây của hiệu ứng. Giá trị 0 nhận phần tử trực tiếp theo kiểu mới, không có tiến trình. Giá trị mặc định của nó là 400 .

3

easing

Đây là loại Chuỗi và chỉ ra cách tiến triển trong hiệu ứng. Giá trị mặc định của nó là swing . Giá trị có thể có ở đây .

4

complete

Đây là một phương thức gọi lại được gọi cho mỗi phần tử khi hiệu ứng hoàn tất cho phần tử này.

Đã thêm vào phiên bản 1.9 của jQueryUI

Với phiên bản 1.9, phương pháp này hiện hỗ trợ tùy chọn trẻ em , tùy chọn này cũng sẽ tạo hoạt ảnh cho các phần tử con cháu.

.removeClass( className [, options ] )
Sr.No. Mô tả về Thông Số
1

className

Đây là một Chuỗi chứa một hoặc nhiều lớp CSS (được phân tách bằng dấu cách).

2

options

Điều này đại diện cho tất cả các cài đặt hoạt ảnh. Tất cả các thuộc tính là tùy chọn. Giá trị có thể là -

  • duration- Đây là kiểu Number hoặc String, và cho biết số phần nghìn giây của hiệu ứng. Giá trị 0 nhận phần tử trực tiếp theo kiểu mới, không có tiến trình. Giá trị mặc định của nó là 400 .

  • easing- Đây là kiểu Chuỗi và chỉ ra cách tiến triển trong hiệu ứng. Giá trị mặc định của nó là swing . Giá trị có thể có ở đây .

  • complete - Đây là phương thức gọi lại được gọi cho từng phần tử khi hiệu ứng hoàn tất cho phần tử này.

  • children- Đây là kiểu Boolean và biểu thị liệu hoạt ảnh có nên được áp dụng bổ sung cho tất cả các phần tử con của các phần tử phù hợp hay không. Giá trị mặc định của nó là sai .

  • queue- Đây là kiểu Boolean hoặc String và đại diện cho việc đặt hoạt ảnh trong hàng đợi hiệu ứng. Giá trị mặc định của nó là true .

Ví dụ

Ví dụ sau minh họa việc sử dụng phương thức removeClass () .

Vượt qua lớp đơn

<!DOCTYPE html>
<html>
   <head>
      <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>
   </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>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML removeclassexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Bấm vào nút Thêm LớpLoại bỏ Lớp để xem ảnh hưởng của các lớp trên hộp.