JQuery-DOM节点属性：attr、removeAttr、addClass、removeClass、html、text

最新推荐文章于 2023-07-23 09:01:22 发布

paku-san

最新推荐文章于 2023-07-23 09:01:22 发布

阅读量909

点赞数 1

分类专栏：前端文章标签：前端 JQuery DOM Javascript

本文链接：https://blog.youkuaiyun.com/qq_35302939/article/details/90755998

版权

前端专栏收录该内容

20 篇文章

订阅专栏

文章目录

attr
removeAttr
addClass
removeClass
html和text
- 设置内容
- 获取内容

attr

设置或返回被选元素的属性值

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

效果：

给a标签设置了href="http:www.baidu.com"属性点击标签之后会跳转到百度页面

removeAttr

删除name属性

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

把href属性删除之后点击a标签将不再跳转到百度页面

addClass

为匹配元素设置class属性的属性值，多个属性值使用空格间隔

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<style>
			.changeColor{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>addClass方法</span>
	</body>
	<script>
		$("span").addClass("changeColor");
	</script>
</html>

效果

相当于给span标签元素添加了class=“changeColor”属性，文字变成了红颜色

removeClass

删除匹配元素class属性的属性值，多个属性值使用空格间隔

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<style>
			.changeColor{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>addClass方法</span>
	</body>
	<script>
		$("span").addClass("changeColor");
		//使用removeAttr方法
		$("span").removeClass("changeColor");
	</script>
</html>

效果
在这里插入图片描述

使用removeClass方法相当于删除了span标签的class="changeColor"属性，字体颜色变成默认的黑色

html和text

设置内容

html方法获取或设定匹配元素的html内容，text获取或设置匹配元素的内容，结果是匹配元素包含的文本内容组合起来的文本，两种方法都可以设置获取或者设置需要主要的区别是html会解析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>
		<span id="html_demo"></span>
		<span id="text_demo"></span>
		<script>
			$("#html_demo").html("<h1>html方法</h1>");
			$("#text_demo").text("<h1>text方法</h1>");
		</script>
	</body>
</html>

效果

对比两种html方法对html标签进行了解析，text方法没有解析html方法

获取内容

使用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>
		<span id="html_demo"><h1>html方法</h1></span>
		<span id="text_demo"><h1>text方法</h1></span>
		
		<script>
			console.log("html方法：" + $("#html_demo").html());
			console.log("text方法：" + $("#text_demo").text());
		</script>
	</body>
</html>