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à -
|
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ớp và Loại bỏ Lớp để xem ảnh hưởng của các lớp trên hộp.