Định nghĩa và sử dụng
.addClass()thêm class cho thành phần.
Cấu trúc
$('div').addClass('test');
.addClass(function(index){...})
$('ul li').addClass(function(index){
return "list-" + index;
});
Bài học chỉ muốn cho bạn hiểu cách sử dụng .addClass, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.
.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: yellow;
}
</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(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: yellow;
}
</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> |
<ul> |