Đị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
$('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> |
<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 li có class="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> |
<ul> |