jQuery类操作
2022-03-10 本文已影响0人
马佳乐
- 添加类addClass()：可对元素添加一个或多个类
- 删除类addClass()：可删除元素的一个类或多个类或所有类
- 判断类hasClass()：判断一个元素有没有某个类,如果有就返回true,如果没有就返回false
- 切换类addClass()：如果元素有某个类就移除这个类，如果元素没有这类就添加这个类
代码练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin-top: 20px;
}
.bgc {
background-color: green;
}
.fontSize50 {
font-size: 50;
}
.width200 {
width: 200;
}
</style>
</head>
<body>
<input type="button" value="添加类" id="addClass" />
<input type="button" value="移除类" id="removeClass" />
<input type="button" value="判断类" id="hasClass" />
<input type="button" value="切换类" id="toggleClass" />
<div id="div1" class="bgc">div1</div>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function(){
//添加类 addClass(类名)
$("#addClass").click(function(){
//添加单个类
$("#div1").addClass("fontSize50");
//添加多个类
$("#div1").addClass("fontSize50 width200");
});
//移除类 removeClass()
$("#removeClass").click(function(){
//移除单个类
$("#div1").removeClass("bgc");
//移除多个类
$("#div1").removeClass("bgc fontSize50");
//移除所有类
$("#div1").removeClass();
});
//判断类 addClass()
$("#hasClass").click(function(){
console.log($("#div1").hasClass("bgc"));//true
});
//切换类
$("#toggleClass").click(function(){
$("#div1").toggleClass("fontSize50");
});
});
</script>
