Tìm hiểu Classess trong jQuery

Bạn sẽ rất ngạc nhiên khi tìm hiểu về Classess trong jQuery. Trong một số trường hợp chúng ta cần sử dụng nó để thêm hoặc xóa class cho một phần tử nào đó. Một trong những chức năng thường gặp ở trên website đó là menu, slideshow…

Ngay sau đây mình sẽ giúp bạn hiểu rõ hơn về Classess và cách thức hoạt động của nó.

Phương thức addClass()

addClass() dùng để thêm một hoặc nhiều class cho phần tử đã chọn.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Thêm Class trong jQuery</title>
<style>
    .new-class{
        color: red;
        text-transform: uppercase;
    }
    .content-class{
        background: yellow;
        font-style: italic;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1").addClass("new-class");
        $("p").addClass("content-class");
    });
});
</script>
</head>
<body>
    <h1>Văn bản Demo</h1>
    <p>Dòng văn bản ví dụ</p>
    <button type="button">Thêm Class</button>
</body>
</html>

Sau khi ấn vào Button nó sẽ thực hiện hành động thêm class cho phần tử đã chọn.

Trường hợp để tự động thêm class vào thì bạn có thể bỏ đoạn mã $(“button”).click(function(){}); đi.

Phương thức .removeClass()

Đối với removeClass() thì sẽ ngược lại với addClass. Có nghĩa là nó sẽ bỏ đi một class nào trước đó đi.

Ví dụ:

$("h1").removeClass("remove-class");

Phương thức toggleClass()

Phương thức toggleCLass() trong jQuery được sử dụng để thêm hoặc xóa một hoặc nhiều lớp khỏi các phần tử đã chọn. Phương thức này sẽ luân phiên giữa việc thêm và loại bỏ một hoặc nhiều tên lớp. Nó kiểm tra từng phần tử cho các tên lớp được chỉ định.

Nếu class đã được đặt, nó sẽ loại bỏ và nếu class bị thiếu, nó sẽ thêm vào. Bằng cách này, nó tạo ra hiệu ứng bật tắt. Nó cũng tạo điều kiện cho bạn chỉ định chỉ thêm hoặc chỉ loại bỏ bằng cách sử dụng tham số chuyển đổi.

Hoặc có thể hiểu đơn giản là sự kết hợp giữa addClass() và removeClass().

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("p").toggleClass("add-class");  
    });  
});  
</script>  
<style>  
.add-class {  
    font-size: 150%;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<button>On/Off</button>  
<p>Xin chào!</p>   
</body>  
</html>

Classes ở trong ngôn ngữ jQuery rất dễ hiểu đúng không. Qua đây bạn có thể áp dụng cho một vài chức năng trên trang web như menu, thiết lập chiều cao cho một phần tử nào đó…