jQuery之总结DOM节点属性-CSDN博客

本文链接：https://blog.csdn.net/qq_44829555/article/details/90716848

html text

一、attr（）与removeAttr（）

分别为被选中元素添加和删除属性
代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a class="baidu" target="_blank">百度</a>
		<script>
			$(".baidu").attr("href","http://www.4399.com");
		</script>
	</body>
</html>

在浏览器上执行，查看网页源代码，发现a标签增加了一个href，显然是attr实现的

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

此时再点击“百度一下”并不会实现跳转，分析可知此时的href已经被removeAttr（）移除；

二、 addClass（）与removeClass（）

addClass（）与removeClass（）分别为选中元素添加和移除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				color: royalblue;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span>千寻一醉</span>
		<script>
			$("span").addClass("demo");
		</script>
	</body>
</html>

执行结果
在这里插入图片描述
removeClass（）示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo{
				color: royalblue;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span>千寻一醉</span>
		<script>
			$("span").addClass("demo");
			$("span").removeClass("demo");
		</script>
	</body>
</html>

在这里插入图片描述

三、html（）与text（）

html（）：获取或设定匹配元素的html内容，fn函数返回一个HTML字符串，该函数有两个参数：第一个参数为元素在集合中的索引位置，第二个参数HTML标签；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>

		<ul>
			<li><a>数学</a></li>
			<li><a>语文</a></li>
			<li><a>英语</a></li>
		</ul>
		<script>
			console.log($("li").html());
			$("li").html(function(index,html){
				console.log(index+"---"+html);
			})
		</script>
	</body>
</html>

执行结果
在这里插入图片描述
text（）：获取或设置匹配元素的内容，结果是匹配元素包含的文本内容组合起来的文本；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>

		<ul>
			<li><a>谷歌</a></li>
			<li><a>腾讯</a></li>
			<li><a>百度</a></li>
		</ul>
		<script>
			console.log($("li").text());
			$("li").text(function(index,html){
				console.log(index+","+html);
			})
		</script>
	</body>
</html>

执行结果
在这里插入图片描述