Love beautiful code? We do too.
Định nghĩa và sử dụng .addClass() trong jQuery
.addClass(): thêm class cho thành phần.
Cấu trúc .addClass()
Đã đượ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="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>Hiển thị trình duyệt:
.addClass(tênclass01 tênclass02)
Html viết:
<!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>Hiển thị trình duyệt:
Thành phần div đã được thêm class="test bdrDiv".
.addClass(function)
Html viết:
<!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>Kết quả:
.addClass(function(index, class_đã_có){...})
Html viết:
<!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>Hiển thị trình duyệt:
Thành phần li có class="blue" đã được thêm class bdrRed.
Unpublished comment
Viết câu trả lời