1. hasClass()方法
1.1. hasClass()方法检查被选元素是否包含指定的class。返回true包含指定的class, 反之不包含。
1.2. 语法
$(selector).hasClass(class)
1.3. 参数
1.4. 如果判断多个类是否存在, 请使用空格分隔类名。只有多个类都存在才返回true, 反之返回false。
2. addClass()方法
2.1. addClass()方法向被选元素添加一个或多个类。
2.2. 该方法不会移除已存在的类, 仅仅添加一个或多个类。如果class属性不存在, 也可以直接添加类, 会自动添加class属性。
2.3. 如果要添加的类已经存在, 不会有任何作用, 可以先用hasClass()方法判断一下, 事实上不判断也行, 感觉hasClass()在这里失去了意义。
2.4. 如需添加多个类, 请使用空格分隔类名。
2.5. 语法
$(selector).addClass(class)
2.6. 参数
2.7. 使用函数来添加类
2.7.1. 使用函数向被选元素添加类。
2.7.2. 语法
$(selector).addClass(function(index,oldclass))
2.7.3. 参数
2.8. 例子
2.8.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>addClass添加一个或多个类</title>
<style type="text/css">
.background {
background-color: red;
width: 600px;
height: 300px;
}
.font {
font-size: 24px;
font-weight: bold;
}
.margin {
margin-left: 30px;
margin-top: 20px;
}
.border {
border-style: solid;
border-width: 3px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
if(!$("#p1").hasClass('background')) {
$("#p1").addClass('background');
}
});
$('#btn2').click(function(){
$("#p1").addClass('font margin');
});
$('#btn3').click(function(){
if(!$("#p1").hasClass('border')){
$("#p1").addClass(function(index, oldclass){
return 'border';
});
}
});
});
</script>
</head>
<body>
<p id="p1">addClass()方法向被选元素添加一个或多个类。</p>
<button id="btn1">添加一个类</button> <button id="btn2">添加多个类</button> <button id="btn3">使用函数来添加类</button>
</body>
</html>
2.8.2. 效果图
3. removeClass()方法
3.1. removeClass()方法从被选元素移除一个或多个类。
3.2. 如果没有规定参数,则该方法将从被选元素中删除所有类。
3.3. 如果要移除的类没有不存在, 不会有任何作用。
3.4. 如需移除多个类, 请使用空格分隔类名。
3.5. 语法
$(selector).removeClass(class)
3.6. 参数
3.7. 使用函数来移除类
3.7.1. 使用函数来删除被选元素中的类。
3.7.2. 语法
$(selector).removeClass(function(index,oldclass))
3.7.3. 参数
3.8. 例子
3.8.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>removeClass移除一个或多个类</title>
<style type="text/css">
.background {
background-color: red;
width: 600px;
height: 300px;
}
.font {
font-size: 24px;
font-weight: bold;
}
.margin {
margin-left: 30px;
margin-top: 20px;
}
.border {
border-style: solid;
border-width: 3px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$("#p1").removeClass('background');
});
$('#btn2').click(function(){
$("#p1").removeClass('font margin');
});
$('#btn3').click(function(){
$("#p1").removeClass(function(index, oldclass){
return 'border';
});
});
$('#btn4').click(function(){
$("#p1").removeClass();
});
});
</script>
</head>
<body>
<p id="p1" class="background font margin border">removeClass()方法从被选元素移除一个或多个类。</p>
<button id="btn1">移除一个类</button> <button id="btn2">移除多个类</button>
<button id="btn3">使用函数来移除类</button> <button id="btn4">清除所有类</button>
</body>
</html>
3.8.2. 效果图
4. toggleClass()方法
4.1. toggleClass()方法对设置或移除被选元素的一个或多个类进行切换。
4.2. 该方法检查每个元素中指定的类。如果不存在则添加类, 如果已设置则删除之。这就是所谓的切换效果。
4.3. 如果需要设置或移除多个类, 请使用空格分隔类名。
4.4. 不过, 通过使用"switch"参数, 您能够规定只删除或只添加类。true是添加, false是移除。
4.5. 语法
$(selector).toggleClass(class,switch)
4.6. 参数
4.7. 使用函数来切换类
4.7.1. 使用函数来设置或移除被选元素的一个或多个类进行切换。
4.7.2. 语法
$(selector).toggleClass(function(index,class),switch)
4.7.3. 参数
4.8. 例子
4.8.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>toggleClass设置或移除一个或多个类</title>
<style type="text/css">
.background {
background-color: red;
width: 600px;
height: 300px;
}
.font {
font-size: 24px;
font-weight: bold;
}
.margin {
margin-left: 30px;
margin-top: 20px;
}
.border {
border-style: solid;
border-width: 3px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn1').click(function(){
$("#p1").toggleClass('background');
});
$('#btn2').click(function(){
$("#p1").toggleClass('font margin');
});
$('#btn3').click(function(){
$("#p1").toggleClass(function(index, oldclass){
return 'border';
});
});
$('#btn4').click(function(){
$("#p1").toggleClass('background', true);
});
$('#btn5').click(function(){
$("#p1").toggleClass('background', false);
});
});
</script>
</head>
<body>
<p id="p1" class="background font margin border">toggleClass()方法对设置或移除被选元素的一个或多个类进行切换。</p>
<button id="btn1">设置或移除一个类</button> <button id="btn2">设置或移除多个类</button>
<button id="btn3">使用函数来设置或移除类</button> <button id="btn4">添加一个类</button> <button id="btn5">移除一个类</button>
</body>
</html>
4.8.2. 效果图