在前面的jq节点操作中，我们并未操作class属性，是因为在jq中它专门提供了操作class属性的方法。
语法如下：
- $('#btn').addClass('one'); 追加class属性值
- $('#btn').removeClass('one'); 移除class属性值
- $('#btn').hasClass('one'); 判断class属性值是否存在
- $('#btn').toggleClass('one');//判断class属性值是否存在，存在则执行移除操作，不存在则执行添加操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class类名操作 添加 移除 判断是否存在</title>
<script src="./jquery.js"></script>
</head>
<body>
<div id="box">
<input type="text" id="input_t" value="hello" class="sxc beo svn">
</div>
</body>
<script>
$('#input_t').addClass('one');//给class追加一个值
$('#input_t').removeClass('sxc');//移除一个class值
var has=$('#input_t').hasClass('sxc');//判断class中是否存在该值
$('#input_t').toggleClass('beo');//判断class中是否存在该值，如果存在则移除，否则添加
console.log(has);
</script>
</html>
执行结果如下：
以上代码中，input标签的class原有sxc beo svn三个值，我们先给class添加了一个one值，又移除了一个sxc值，此时class为beo svn one。
然后我们判断sxc是否存在，显然是不存在的，返回false。
然后我们使用toggleClass方法添加一个beo值，由于beo是存在的，所以执行了移除操作，所以最终input的class有两个值：svn one。
类名操作经常用于动态的控制元素的样式，是一个非常重要的操作，请大家多多练习，务必掌握。
|
窥视卡
雷达卡
发表于 2023-1-26 13:24:52
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 14:34:16
