知识点四：JQuery--操作class ==addClass(),removeClass(), toggleClass(),css()

最新推荐文章于 2021-08-03 19:09:26 发布

流浪蓝

最新推荐文章于 2021-08-03 19:09:26 发布

阅读量296

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_35932345/article/details/53768501

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

知识点四：JQuery--操作class ==addClass(),removeClass(), toggleClass(),css()

1、addClass() - 向被选元素添加一个或多个类

代码如下:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
	$(document).ready(function(){
 	 $("button").click(function(){
   	 $("h1,h2,p").addClass("blue");
    	$("div").addClass("important");
 	 });
});
</script>
<style type="text/css">
	.important
   {
	font-weight:bold;
	font-size:xx-large;
  }
	.blue
{
	color:blue;
}
		</style>
	</head>
<body>

	<h1>标题 1</h1>
	<p>这是一个段落。</p>
	<div>这是非常重要的文本！</div>
	<br>
	<button>向元素添加类</button>

</body>
</html>

2、removeClass() - 从被选元素删除一个或多个类

如何不同的元素中删除指定的 class属性：

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
		$(document).ready(function(){
  		$("button").click(function(){
    		$("h1,h2,p").removeClass("blue");
 	 });
});
	</script>
	<style type="text/css">
		.important
	{
		font-weight:bold;
		font-size:xx-large;
	}
		.blue
	{
		color:blue;
	}
</style>
</head>
<body>

	<h1 class="blue">标题 1</h1>
	<h2 class="blue">标题 2</h2>
	<p class="blue">这是一个段落。</p>
	<p>这是另一个段落。</p>
	<br>
	<button>从元素上删除类</button>
	</body>
</html>

3、toggleClass() -对被选元素进行添加/删除类的切换操作

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
	$(document).ready(function(){
  	$("button").click(function(){
    	$("h1,h2,p").toggleClass("blue");
 	 });
});
</script>
<style type="text/css">
		.blue
{
		color:blue;
}
		</style>
	</head>
<body>

	<h1>标题 1</h1>
	<h2>标题 2</h2>
	<p>这是一个段落。</p>
	<p>这是另一个段落。</p>
	<button>切换 CSS 类</button>
	</body>
</html>

关于css() -设置或返回样式属性

代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
		$(document).ready(function(){
 		 $("button").click(function(){
    		$("p").css("background-color","yellow");
  	});
});
</script>
</head>

<body>
	<h2>这是标题</h2>
	<p style="background-color:#ff0000">这是一个段落。</p>
	<p style="background-color:#00ff00">这是一个段落。</p>
	<p style="background-color:#0000ff">这是一个段落。</p>
	<p>这是一个段落。</p>
	<button>设置 p 元素的背景色</button>
</body>
</html>

对css()总结,此方法主要就是在原有的样式进行替换，或者在其之上添加别的样式。

流浪蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点四：JQuery--操作class ==addClass(),removeClass(), toggleClass(),css()

知识点四：JQuery--操作class ==addClass(),removeClass(), toggleClass(),css()
复制链接

扫一扫

专栏目录