03/08/2018, 10:10

Bài 02: jQuery Attributes - addclass() - removeclass()

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ì ...

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

$('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

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Bài 02. Ajax sử dụng Jquery

Có thể nói sự ra đời của JQuery được ví như là tuyệt phẩm thời gian bấy giờ. Bản thân mình bắt đầu sử dụng JQuery từ version 1.4.2 mình đã thấy nó tuyệt vời rồi. Nói chung các ưu điểm của Jquery thì có lẽ các bạn đã biết thì mình cũng không bàn luận về nó nữa nội dung bài này mình muốn luận về ...

Vũ Văn Thanh viết 16:52 ngày 01/10/2018

Bài 06: jQuery Attributes - html()

DEMO Hàm ...

Hoàng Hải Đăng viết 10:14 ngày 03/08/2018

Bài 03: jQuery Attributes - attr() - prop()

Trong javascript để truy xuất giá trị của một thuộc tính nào đó thì ta phải dùng cú pháp DOM Element và DOM HTML. Nhưng trong jQuery thì rất đơn ...

Bùi Văn Nam viết 10:11 ngày 03/08/2018

Bài 02: jQuery Attributes - addclass() - removeclass()

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ùi Văn Nam viết 10:10 ngày 03/08/2018

Bài 05: jQuery Attributes - hasClass()

DEMO Hàm ...

Hoàng Hải Đăng viết 10:08 ngày 03/08/2018
0