jQuery / 添加 / 删除 / 切换class方法

在jquery脚本中，我们可以通过addClass方法对元素输出指定的class样式值。相反通过removeClass进行移除class值，还有toggleClass切换class值，下面我整理了3个CSS类名操作示例，大家可以参考一下，进行举一反三。

引用文件

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

PS：使用前先检测网站是否有jquery.js文件，一般网站都有，如果没有必须引用上方js文件。

奇数添加

<style type="text/css">
.select{
color:red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script>
$(function () {
$("#laohan").click(function(){
$("li:nth-child(Odd)").addClass("select");
});
})
</script>
<ul style="list-style:none;padding-inline-start: 0px;"> 
<li>www.556z.com</li>
<li>www.556z.com</li>
<li>www.556z.com</li>
<li>www.556z.com</li>
<li>www.556z.com</li>
</ul>
<input id="laohan" type="button" value="点击我添加Class" />

PS：奇数，是指的是为元素添加一个 class 或删除一个 class，从而整体控制元素的样式。

偶数切换

<style type="text/css">
.ccc{
color:red;
background-color:silver;
font-weight:bold;
}
</style>
<script>
$(function () {
$("#btn").click(function(){
$("p:nth-child(even)").toggleClass("ccc");
});
})
</script>
<div>
<p>www.556z.com</p>
<p>www.556z.com</p>
<p>www.556z.com</p>
<p>www.556z.com</p>
<p>www.556z.com</p>
</div>
<input id="btn" type="button" value="点击我切换Class" />

PS：奇数：Odd  偶数：even （会匹配第一个子元素的下标是 1）
PS：偶数用于检查元素是否有某个 class。如果 class 不存在，则为元素添加该 class；如果 class 已经存在，则为元素删除该 class。

正常添加

<style type="text/css">
.bbb{
color:red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script>
$('body').on('click','button',function(){
$('#laohan').addClass('bbb');
})
</script>
<div id="laohan">
www.556z.com
</div>
<button>点击我添加Class</button>

正常删除

<style type="text/css">
.aaa{
color:red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script>
$('body').on('click','button',function(){
$('#laohana').removeClass('aaa');
})
</script>
<div id="laohana" class="aaa">
www.556z.com
</div>
<button>点击我删除Class</button>

PS：添加Css格式：$("p").css({ color : “#ff8011", background : "blue” });
PS：移除全部使用removeattr（"style"）；移除单个使用css（"属性",""）；

最后总结一下：使用 jQuery 操作元素的样式时，如果样式比较少，建议使用“属性操作”，也就是 css() 方法；如果样式比较多，建议使用“类名操作”，也就是 addClass()、removeClass()、toggleClass() 等方法。