Tìm hiểu jQuery addClass()
Phương thức addClass() của jQuery cho phép nhà phát triển thay đổi các phần tử theo cách toàn cục hơn. Theo tên phương thức, ta có thể thêm thuộc tính class cho phần tử được chọn. Tại sao cần làm điều này?
Ví dụ: một trang web có các phần tử hiện có như tiêu đề, đoạn văn, và nút bấm thực hiện hành động gì đó. Kèm theo là bảng định dạng (stylesheet) sử dụng tên class của các phần tử để định kiểu. Khi nhấn nút, nội dung hiện có có thể thay đổi giao diện, kiểu dáng.
Ta có thể dùng addClass() để chèn thuộc tính style mới cho nội dung hiện có sau khi nhấn nút, giúp thay đổi kiểu dáng của nội dung chỉ với một dòng code. Điều này cho phép nhà phát triển tư duy về thao tác phần tử theo cách có định dạng.
Cách hoạt động của jQuery addClass()
Trong ví dụ này, ta thay đổi thuộc tính class của đối tượng khi nút được nhấn. Trước khi vào code ví dụ, hãy xem addClass() hoạt động như thế nào. Giả sử HTML sau:
<head>
<meta charset="utf-8">
<title>Demo addClass</title>
<style>
p { margin: 8px; font-size: 16px; }
.selected { color: blue; }
.highlight { background: yellow; }
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Xin chào</p>
<p>và</p>
<p>Tạm biệt</p>
Ta dùng <style> để định kiểu cơ bản cho <p> trong <head>, và nhúng API jQuery. Trong <body>, có ba từ "Xin chào", "và", "Tạm biệt" bọc trong ba thẻ <p> riêng biệt. Để thấy addClass() hoạt động, hãy quay lại <style>.
Có hai class trong <style>: "selected" làm chữ màu xanh, "highlight" làm nền màu vàng. Hiện tại chưa có style nào áp dụng vì các thẻ <p> chưa có class:
Thay vì viết class thủ công vào HTML, ta dùng addClass() để chèn thuộc tính class cho bất kỳ thẻ <p> nào.
Thêm một class
<script>
$(document).ready(() => {
$('p').addClass('selected')
})
</script>
Ta chọn tất cả thẻ <p> và thêm class 'selected'. Kết quả: tất cả thẻ <p> hiển thị chữ màu xanh.
Thêm nhiều class cùng lúc
Phương thức addClass() chấp nhận nhiều class trong một đối số:
<script>
$(document).ready(() => {
$('p').addClass('selected highlight')
})
</script>
Cú pháp: bao gồm cả hai class trong một cặp ngoặc đơn. Kết quả: các thẻ <p> vừa có chữ xanh, vừa có nền vàng.
Sử dụng jQuery addClass() với sự kiện click
Quay lại ví dụ có nút bấm:
<head>
<meta charset="utf-8">
<title>Demo addClass</title>
<style>
p { margin: 8px; font-size: 16px; }
.selected { color: blue; }
.highlight { background: yellow; }
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p><strong>Ví dụ jQuery addClass</strong></p>
<p>Xin chào</p>
<p>và</p>
<p>Tạm biệt</p>
<button> Nhấn để thêm class </button>
Nút bấm đã hiển thị nhưng chưa có chức năng. Trước đây ta thay đổi tất cả thẻ <p> cùng lúc. Bây giờ chỉ thay đổi một phần tử khi nhấn nút, dùng phương thức click() của jQuery.
Ôn nhanh click(): gọi trên bộ chọn muốn gắn sự kiện, truyền hàm callback làm đối số. Hàm callback sẽ thực thi khi nút được nhấn.
Code thực hiện
<script>
$('button').click(() => {
$('p').last().addClass('selected')
})
</script>
Trong callback, ta chọn các thẻ <p> và gọi last() để lấy thẻ cuối cùng. Sau đó thêm class 'selected'. Mong đợi: thẻ <p> cuối cùng (chữ "Tạm biệt") chuyển sang màu xanh khi nhấn nút.
Kết quả sau khi nhấn nút:
Ta đã thấy addClass() dùng chung: thay đổi tất cả thẻ <p> ngay khi tải trang, và dùng kết hợp với click() để thay đổi class của một thẻ cụ thể khi nhấn nút.
Kết luận
Hôm nay ta đã học jQuery addClass() là gì và cách hoạt động. Phương thức này rất linh hoạt về phạm vi và có thể thay đổi nhiều thuộc tính class cùng lúc. Các ví dụ trên chỉ là minh họa cơ bản. Hãy tự thử nghiệm để tìm cách addClass() hữu ích cho ứng dụng web của bạn.