BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Top