Trong jQuery, hasClass() là một trong những phương thức phổ biến và hữu ích thuộc nhóm jQuery Attributes. Phương thức này cho phép bạn kiểm tra xem một phần tử HTML có chứa một hoặc nhiều lớp (class) nhất định hay không. Điều này rất hữu ích khi bạn muốn thực hiện các thao tác dựa trên việc kiểm tra sự hiện diện của các lớp trong một phần tử.

Cú pháp của `hasClass()`

$(selector).hasClass(className)

selector: Là bộ chọn jQuery đại diện cho phần tử mà bạn muốn kiểm tra.
className: Tên lớp mà bạn muốn kiểm tra xem có tồn tại trong phần tử hay không.

Ví dụ đơn giản

Giả sử chúng ta có một phần tử HTML như sau:

Bây giờ, chúng ta sẽ sử dụng hasClass() để kiểm tra xem phần tử này có chứa lớp "active" hay không:

if ($(".box").hasClass("active")) {
    console.log("Phần tử có lớp 'active'.");
} else {
    console.log("Phần tử không có lớp 'active'.");
}

Kết quả: Phần tử có lớp 'active'.

Mô tả chi tiết cách hoạt động

Phương thức hasClass() trả về giá trị true nếu phần tử có chứa lớp được chỉ định, ngược lại trả về false.
Phương thức này không thay đổi trạng thái của phần tử mà chỉ kiểm tra.

Trường hợp sử dụng thực tế

Phương thức hasClass() thường được sử dụng trong các tình huống như:

Kiểm tra điều kiện để thay đổi CSS hoặc thực hiện thao tác dựa trên sự tồn tại của một lớp.
Áp dụng hoặc loại bỏ sự kiện (event) tùy thuộc vào việc phần tử có chứa lớp hay không.

Ví dụ thực tế:

$(".toggle-button").on("click", function() {
    if ($(".menu").hasClass("open")) {
        $(".menu").removeClass("open").slideUp();
    } else {
        $(".menu").addClass("open").slideDown();
    }
});

Trong đoạn mã này, hasClass() được sử dụng để kiểm tra xem menu có lớp "open" hay không, từ đó xác định hành động mở hoặc đóng menu.

Lưu ý

Bạn có thể kiểm tra nhiều phần tử cùng lúc, và kết quả trả về sẽ dựa trên việc liệu ít nhất một trong số các phần tử đó có chứa lớp được chỉ định hay không.

Ví dụ:

if ($("li").hasClass("selected")) {
    console.log("Có ít nhất một mục danh sách chứa lớp 'selected'.");
}

Kết luận

Phương thức hasClass() của jQuery giúp kiểm tra sự hiện diện của lớp CSS trong các phần tử một cách dễ dàng, nhanh chóng và hiệu quả. Nó đặc biệt hữu ích trong các ứng dụng web động, nơi mà lớp CSS đóng vai trò quan trọng trong việc quản lý trạng thái và giao diện của các phần tử.