Trong bài này mình sẽ giới thiệu hai hàm khá hay và rất hay sử dụng trong jQuery đó là hàm addClass() và removeClass(). Trước khi vào bài này thì bạn hãy chắc chắn là đã xem hai bài trước nhé, vì mình sẽ không giải thích cú pháp căn bản của jQuery nữa.
1. Hàm addClass() trong jQuery
Hàm addClass() có tác dụng thêm class cho đối tượng Object HTML nào đó.
Ví dụ: Thêm class active vào thẻ h1
1 | $('h1').addClass('active'); |
2. Hàm removeClass trong jQuery
Hàm này removeClass() có tác dụng xóa class cho đối tượng Object HTML nào đó.
Ví dụ: XEM DEMO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | !DOCTYPE htmlhtml head title/title meta http-equiv="Content-Type" content="text/html; charset=UTF-8" style .active{ border: solid 1px; color:red; padding: 10px; } /style /head body h1 style="font-style: initial"Xin chào các bạn/h1 input type="button" id="addclass-button" value="$.addClass('active')" / input type="button" id="removeclass-button" value="$.removeClass('active')" / script language="javascript" // Sự kiện onload trong jquery $(document).ready(function() { // addClass $('#addclass-button').click(function(){ // Thêm class active vào thẻ h1 $('h1').addClass('active'); }); // removeClass $('#removeclass-button').click(function(){ // Xóa class active ra khỏi thẻ h1 $('h1').removeClass('active'); }); }); /script /body/html |
4. Lời kết
Như vậy mình đã giới thiệu với bạn quy trình chạy của một ứng dụng Javascript. Bắt buộc bạn phải hiểu nguyên lý hoạt động này thì sau này bạn mới không mắc phải những lỗi không đáng có.
Mình cũng đã giới thiệu luôn hai hàm addClass() có tác dụng thêm một class vào đối tượng HTML nào đó và hàm removeClass() có tác dụng xóa một class khỏi đối tượng HTML. Hy vọng qua bài này bạn sẽ có cảm hứng để học jQuery nhiều hơn.
