jQuery中常用DOM节点属性总结

最新推荐文章于 2022-05-04 01:42:04 发布

原创最新推荐文章于 2022-05-04 01:42:04 发布 · 368 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery中常用DOM节点属性总结

jQuery 专栏收录该内容

4 篇文章

订阅专栏

该博客主要总结了jQuery中常用的DOM节点属性，包括设置被选元素属性值的attr方法、删除属性的removeAttr方法、设置和删除class属性值的addClass和removeClass方法，以及设定html内容的html方法和设置文本内容的text方法，并给出了示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、attr(key,value)：设置被选元素的属性值

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>	
		<script>
			$(function(){
				$("a").attr("href","http://www.baidu.com");
			})
		</script>
	</head>
	<body>
		<a>百度一下</a>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

二、removeAttr(name)：删除name属性

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>	
		<script>
			$(function(){
				$("a").attr("href","http://www.baidu.com");
				$("a").removeAttr("href");
			})
		</script>
	</head>
	<body>
		<a>百度一下</a>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

三、addClass(class)：为匹配元素设置class属性的属性值，多个属性值使用空格间隔

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>		
		<script>
			$(function(){
				$("a").addClass("zzu");
			})
		</script>
		<style>
			.zzu{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

四、removeClass([class])：删除匹配元素class属性的属性值，多个属性值使用空格间隔

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>		
		<script>
			$(function(){
				$("a").addClass("zzu");
				$("a").removeClass("zzu");
			})
		</script>
		<style>
			.zzu{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

五、html([val])：设定匹配元素的html内容

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>		
		<script>
			$(function(){
				$("span").html("<h2>郑州大学</h2>")
			})
		</script>
	</head>
	<body>
		<span id="zzu"></span>
	</body>
</html>

运行结果如下图：
在这里插入图片描述

六、text([val]) ：设置匹配元素的内容，结果是匹配元素包含的文本内容组合起来的文本

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>		
		<script>
			$(function(){
				$("span").text("<h2>郑州大学</h2>")
			})
		</script>
	</head>
	<body>
		<span id="zzu"></span>
	</body>
</html>

运行结果如下图：
在这里插入图片描述