jQuery添加class的操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>class操作</title>
<style>
li.basic {
background-color: pink;
font-size: 32px;
color: red;
}
.bigger {
font-size: 40px;
}
</style>
</head>
<body>
<input type="button" value="添加basic类" >
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
<li class="aa bb cc dd">1</li>
<li class="aa bb cc dd">2</li>
<li class="aa bb cc dd">3</li>
<li class="aa bb cc dd">4</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("input").eq(0).click(function () {
//添加一个类
$("li").addClass("basic");
});
$("input").eq(1).click(function () {
$("li").addClass("bigger");
});
$("input").eq(2).click(function () {
//移除一个类
$("li").removeClass("bigger");
});
//判断类
$("input").eq(3).click(function () {
//判断是否有bigger类
console.log($("li").hasClass("bigger"));
});
$("input").eq(4).click(function () {
//判断li有没有basic类，如果有，就移除他，如果没有，添加他
//toggle
$("li").toggleClass("bigger");
});
});
</script>
</body>
</html> 相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17