jquery控制class

jquery可以很方便的操作class, 包括

• addClass() – 向被选元素添加一个或多个类
• removeClass() – 从被选元素删除一个或多个类
• toggleClass() – 对被选元素进行添加/删除类的切换操作

addClass方法

这个方法是, 像选中的元素增加一个class, 下面是一个实例

<p>这是一行文字</p>
<style>
	.red{color: red;}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script>
	$("p").addClass("red");
</script>

removeClass方法

这是一个删除class的方法, 实例如下

<p class="blue">这也是一行文字</p>
<style>
	.blue{color: blue;}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script>
	$("p").removeClass("blue");
</script>

toggleClass方法

这是一个非常强大的方法, 非常实用, 它能判断当前是否存在该class, 若存在则删除, 若不存在则增加, 在很多的菜单打开关闭都会用到, 实例如下

<p class="blue">这也是一行文字</p>
<button id="btn">点我</button>
<style>
	.blue{color: blue;}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script>
	$("#btn").click(function(){
			$("p").toggleClass("blue");
		}
	);
</script>