Quảng cáo

Hướng dẫn sử dụng addClass(), removeClass(), toggleClass() và hasClass() trong jQuery

jQuery cung cấp API cho phép bạn làm việc dễ dàng với CSS của phần tử. Trong bài này chúng ta sẽ tìm hiểu cách thêm, xóa, thay đổi class vào phần tử HTML

Trong khuôn khổ bài này mình hướng dẫn các bạn sử dụng 4 hàm làm việc với class của JQuery:

.addClass(): Phương thức addClass() được dùng để thêm giá trị cho thuộc tính class cho phần tử HTML.
.removeClass(): Phương thức removeClass() được dùng để xóa giá trị của thuộc tính class của phần tử HTML.
.toggleClass(): Phương thức toggleClass() được dùng để luân chuyển giữa việc thêm/xóa giá trị của thuộc tính class của phần tử HTML.
.hasClass(): Xác định thành phần có chứa class nhất định nào đó hay không.

Sau đây chúng ta đi nghiên cứu từng hàm:

Hàm .addClass()

.addClass(tênclass)

Ví dụ

 $('div').addClass('test');

Ví dụ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.test {
    background-color: blue;
}
</style>
<script>
$(function(){
    $('div').addClass('test');
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html>

.addClass(tênclass01 tênclass02)

Ví dụ

$('div').addClass('test01 test02');

Ví dụ

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.test {
    background-color: blue;
}
.bdrDiv {
    border: 3px solid yellow;
}
</style>
<script>
$(function(){
    $('div').addClass('test bdrDiv');
});
</script>
</head>
<body>
<div>Thành phần div</div>
</body>
</html>

.addClass(function(index){…})

Ví dụ

 $('ul li').addClass(function(index){
return "list-" + index;
});

Ví dụ

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.list-2 {
    background-color: blue;
}
</style>
<script>
$(function(){
    $('ul li').addClass(function(index){
        return "list-" + index;
    });
});
</script>
</head>
<body>
<ul>
<li>Thành phần li 0</li>
<li>Thành phần li 1</li>
<li>Thành phần li 2</li>
<li>Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>
</body>
</html>

.addClass(function(index, class_đã_có){…})

Ví dụ

 $('ul li').addClass(function(index, current){
var newClass;
if(current == "blue") {
newClass = "red";
}
return newClass;
});

Ví dụ

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
li {
    background-color: blue;
}
li.bdrRed {
    border: 3px dashed red;
}
</style>
<script>
$(function(){
    $('ul li').addClass(function(index, current){
        var newClass;
        if(current == "blue") {
            newClass = "bdrRed";
        }
        return newClass;
    });
});
</script>
</head>
<body>
<ul>
<li>Thành phần li 0</li>
<li>Thành phần li 1</li>
<li>Thành phần li 2</li>
<li class="blue">Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>
</body>
</html>

$(“selector1,selector2,….,selectorN”).addClass(“class1 class2 …. classN”);

Ví dụ
Câu lệnh dưới đây sẽ thêm class có tên là “red” và “big” cho phần tử <h4> có id là “abc”, và phần tử <div>

Ví dụ

$("h4#abc, div").addClass("red big");

.removeClass()

Loại bỏ tất cả thuộc tính class có trong thành phần.

Ví dụ

 $('div').removeClass();

Ví dụ

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').removeClass();
});
</script>
</head>
<body>
<div id="remove" class="test01 test02 test03">Thành phần div</div>
</body>
</html>

.removeClass(‘Tênclass’)

Loại bỏ tên class có trong thành phần.

Ví dụ

 $('div').removeClass('test');

Ví dụ

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').removeClass('test02');
});
</script>
</head>
<body>
<div id="remove" class="test01 test02 test03">Thành phần div</div>
</body>
</html>

.removeClass(function(index,class){})

Ví dụ

 $('div').removeClass(function(){
return $(this).prev().attr('class');
});

Ví dụ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').removeClass(function(i){
          if (i==0||i==3) {return "test"}
        else {return ""}
      });
});
</script>
<style>
.test { color: red; }
</style>
</head>
<body>
<ul>
<li class="test">Thành phần li 1</li>
<li class="test">Thành phần li 2</li>
<li class="test">Thành phần li 3</li>
<li class="test">Thành phần li 4</li>
<li class="test">Thành phần li 5</li>
</ul>
</body>
</html>

$(“selector1,selector2,….,selectorN”).removeClass(“class1 class2 …. classN”);

Ví dụ
Câu lệnh dưới đây sẽ xóa class có tên là “red” và “big” của phần tử

có id là “abc”, và phần tử

Ví dụ

 $("h4#abc, div").removeClass("red big");

.toggleClass(‘tênclass’)

Ví dụ

$('p').toggleClass('test');

Ví dụ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.test { color: blue; }
</style>
<script>
$(function(){
    $('p').click(function(){
        $(this).toggleClass('test');
    })
});
</script>
</head>
<body>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

.toggleClass(‘tênclass’,switch)

Ví dụ

 $('p').toggleClass('test',count % 3 == 0);

VD: Với cách sử dụng này, các lần thay đổi luân phiên sẽ là 3 lần click (sau 3 click sẽ thực hiện lệnh).

Ví dụ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.test { color: blue; }
</style>
<script>
$(function(){
    var count = 0;
    $('p').click(function(){
        $(this).toggleClass('test', count++ % 3 == 0);
    })
});
</script>
</head>
<body>
<p>Thành phần p</p>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

.toggleClass(function(){})

Ví dụ

 $('p').toggleClass(function(){...});

Ví dụ

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p { cursor: pointer; }
.blue { color: blue; }
.yellow { color: yellow; }
</style>
<script>
$(function(){
    $('button').click(function(){
        $('p').toggleClass(function(){
             if ($(this).parent().is('.test')) {
                 return 'yellow';
             } else {
                 return 'blue';
             }
        });
    })
});
</script>
</head>
<body>
<p>Thành phần p</p>
<div class="test"><p>Thành phần p</p></div>
<p>Thành phần p</p>
<p>Thành phần p</p>
<button>Click</button>
</body>
</html>

$(“selector1,selector2,….,selectorN”).toggleClass(“class1 class2 …. classN”);

Ví dụ
Câu lệnh dưới đây sẽ luân chuyển giữa việc thêm/xóa class có tên là “red” và “big” của phần tử

có id là “abc”, và phần tử

Ví dụ

 $("h4#abc, div").toggleClass("red big");

.hasClass(‘Tênclass’)

Ví dụ

 $('li').hasClass('test');

Ví dụ

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('p').each(function(){
        var hClass = $(this).hasClass('test');
        if(hClass){
            $(this).append('<span> - thành phần có class="test"</span>');
        }
    });
});
</script>
</head>
<body>
<p class="test">Thành phần p</p>
<p>Thành phần p</p>
</body>
</html>

$(this).hasClass(‘test’) kiểm tra tất cả thành phần p có class test hay không, nếu có sẽ add thêm nội dung <span> – thành phần có class=”test”</span>
VD với mã HTML

Ví dụ

 <p class="test"></p>

Thì jQuery

Ví dụ

 $('p').hasClass('test');

Trả về giá trị true.

Ví dụ

 $('p').hasClass('test01');

Trả về giá trị $('p').hasClass('test01');.

Ngoài 3 hàm trên Jquery còn rất nhiều hàm liên quan đến Class, những bài tiếp theo về JQuery mình sẽ giới thiệu chúng với các bạn.

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Bài trước Bài tiếp

Hướng dẫn sử dụng addClass(), removeClass(), toggleClass() và hasClass() trong jQuery

Hàm .addClass()

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

.removeClass()

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

có id là “abc”, và phần tử

Ví dụ

.toggleClass(‘tênclass’)

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

có id là “abc”, và phần tử

Ví dụ

.hasClass(‘Tênclass’)

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Ví dụ

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Về chúng tôi

Liên hệ

Các công cụ