您现在的位置是: 首页 » 网页代码 » jQuery的addClass()方法怎么用?
网页代码

jQuery的addClass()方法怎么用?

网站优化小编一月 6, 2020 19人已围观

addClass()方法是jQuery中的一个内置的方法,该方法用于向每个选中的元素添加更多的属性;它还可以用来更改所选元素的属性。下面本篇文章就来给大家介绍一下addClass()方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

jQuery addClass()方法的使用

addClass()方法可以以两种不同的方式使用,下面具体介绍一下。

1、直接添加类名:

在这里,类名可以直接与将要选择的元素一起使用。

语法:

$(selector).addClass(className);

参数:它接受一个参数“className”,它是要添加的类的名称。

返回值:返回添加了新类的选定元素。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p {
				margin: 8px;
				font-size: 35px;
			}
			
			.selected {
				color: ;
				display: block;
				border: 2px solid green;
				width: 200px;
				height: 60px;
				background-color: lightgreen;
				padding: 20px;
			}
			
			.highlight {
				background: yellow;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.10.2.js">
		</script>
	</head>
	<body>
		<p>测试文本1!</p>
		<p>测试文本2!</p>
		<p>测试文本3!</p>
		<script>
			$("p").first().addClass("selected");
			$("p").last().addClass("highlight");
		</script>
	</body>
</html>

在上面的代码中,选择了“p”元素,并且在jQuery的.first()方法和.addClass()方法的帮助下,将“selected”类仅应用于第一个“p”元素。在.last()方法和.addClass()方法的帮助下,将“highlight”类仅应用于最后一个“p”元素。

效果图:

网站运营中栏目排名优化技巧

2、通过传递一个函数来添加新类:

在这里,可以将函数传递给所选元素的.addClass()。

语法:

$(selector).addClass(function);

参数:接受参数“function”。

返回值:返回带有添加函数的选定元素。

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			div {
				background: white;
				margin: 20px;
			}
			
			.red {
				background: red;
				width: 300px;
				margin: 20px;
			}
			
			.red.green {
				background: lightgreen;
				margin: 20px;
				border: 2px solid green;
			}
			
			body {
				border: 2px solid green;
				width: 350px;
				height: 200px;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.10.2.js">
		</script>
	</head>

	<body>
		<div>这个div应该是白色的</div>
		<div class="red">这个div将是绿色的,因为它现在有"green"和"red"类。</div>
		<div>这个div应该是白色的</div>
		<script>
			$("div").addClass(function(index, currentClass) {
				var addedClass;
				if(currentClass === "red") {
					addedClass = "green";
				}

				return addedClass;
			});
		</script>
	</body>

</html>

在上面的代码中,选择了“div”元素,并且在函数的帮助下,将新类添加到所选的div元素中。

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:263天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:3910 条
  • 文章评论:104 条
  • 微信公众号:扫描二维码,关注我们