Định nghĩa và sử dụng

  • .addClass(): thêm class cho thành phần.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.addClass(tênclass)

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

.addClass(tênclass01 tênclass02)

$('div').addClass('test01 test02');
  • Đã được thêm vào từ phiên bản 1.4

.addClass(function(index){...})

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

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

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

.addClass(tênclass)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://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>

Hiển thị trình duyệt:

Thành phần div đã được thêm class="test".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<div>Thành phần div</div>

<div class="test">Thành phần div</div>

.addClass(tênclass01 tênclass02)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://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>

Hiển thị trình duyệt:

Thành phần div đã được thêm class="test bdrDiv".

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<div>Thành phần div</div>

<div class="test bdrDiv">Thành phần div</div>

.addClass(function)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://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>

Hiển thị trình duyệt:

Tất cả các thành phần li đã thêm class theo thứ tự

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

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

<ul>
<li class="list-0">Thành phần li 0</li>
<li class="list-1">Thành phần li 1</li>
<li class="list-2">Thành phần li 2</li>
<li class="list-3">Thành phần li 3</li>
<li class="list-4">Thành phần li 4</li>
</ul>

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

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://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>

Hiển thị trình duyệt:

Thành phần liclass="blue" đã được thêm class bdrRed.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

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

<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 bdrRed">Thành phần li 3</li>
<li>Thành phần li 4</li>
</ul>