jQuery中DOM节点属性

最新推荐文章于 2022-09-14 21:47:17 发布

Zzze0101

最新推荐文章于 2022-09-14 21:47:17 发布

阅读量480

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/Zzze0101/article/details/90719374

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、attr()和removeAttr()

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" target="_blank">百度一下</a>
		<script>
			$(".baidu").attr("href","http://www.baidu.com");
		</script>
	</body>
</html>

在浏览器上查看执行结果，点击百度一下跳转到百度搜索界面，此时a标签的href属性值是通过jQuery中的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.baidu.com");
			$(".baidu").removeAttr("target");
		</script>
	</body>
</html>

在浏览器上查看执行结果，点击百度一下在当前页面打开百度搜索，此时a标签的target="_blank"已经通过jQuery中的removeAttr删除。

2、 addClass()和removeClass()

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>
			.test{
				font-family: "微软雅黑";
				color: red;
			}
		</style>
	</head>
	<body>
		<p>这是一个段落</p>
		<script>
			$("p").addClass("test")
		</script>
	</body>
</html>

在浏览器上查看执行结果：
在这里插入图片描述
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>
			.test{
				font-family: "微软雅黑";
				color: red;
			}
		</style>
	</head>
	<body>
		<p>这是一个段落</p>
		<script>
			$("p").addClass("test");
			$("p").removeClass("test");
		</script>
	</body>
</html>

在浏览器上查看执行结果：
在这里插入图片描述

3、html，text

html() 方法返回或设置被选元素的内容 (inner 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>Bing</a></li>
			<li><a>百度</a></li>
		</ul>
		<script>
			console.log($("li").html());
			$("li").html(function(index,html){
				console.log(index+","+html);
			})
		</script>
	</body>
</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>Bing</a></li>
			<li><a>百度</a></li>
		</ul>
		<input id="but" type="button" value="改变列表内容" />		
		<script>
			$("#but").click(function(){
				$("li").html(function(n){
					return "这个 li元素的 index 是：" + n;
				})
			})
		</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>Bing</a></li>
			<li><a>百度</a></li>
		</ul>
		<script>
			console.log($("li").text());
			$("li").text(function(index,html){
				console.log(index+","+html);
			})
		</script>
	</body>
</html>

在浏览器的控制台中查看输出结果：
在这里插入图片描述
只有内容，没有标签。
在使用text()方法设置文本内容时与html()方法类似。

Zzze0101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中DOM节点属性

1、attr()和removeAttr()attr()设置被选元素的属性值<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-...
复制链接

扫一扫