总结jQuery中的DOM节点属性

最新推荐文章于 2025-03-26 07:30:00 发布

YXX_decsdn

最新推荐文章于 2025-03-26 07:30:00 发布

阅读量636

点赞数

本文链接：https://blog.youkuaiyun.com/YXX_decsdn/article/details/90748735

版权

DOM节点属性

attr
removeAttr
addClass
removeClass
html
text

attr

attr(name|properties|key,value|key,fn)：设置或返回被选元素的属性值
1，name：返回 name属性的属性值，看下例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>name</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_self">百度一下</a>
		<script>
			var href = $("a").attr("href");//获取href属性属性值
			console.log(href);
		</script>
	</body>
</html>

2，properties：使用JavaScript对象设置属性的属性值，看下例

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

3，key,value：设置属性值，看下例

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

4，key,fn：利用函数设置属性值，看下例

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

removeAttr

removeAttr(name)：删除name属性

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

addClass

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>addClass(class|fn)</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下</a>
		<style>
			.background{
				background-color: red;
			}
			
			.font{
				font-size: 24px;
			}
		</style>
		<script>
			$("a").addClass("background font");		//设置了多个属性，用空格间隔。
		</script>
	</body>
</html>

在这里插入图片描述

removeClass

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

执行完如下：

下边删除属性：

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

删除属性执行代码后效果如下：

html

html([val|fn])：获取或设定匹配元素的html内容，fn函数返回一个HTML字符串，该函数有两个参数：第一个参数为元素在集合中的索引位置，第二个参数为旧HTML标签
1，设置匹配元素的html内容

代码执行后效果如下：
在这里插入图片描述
2，获取匹配元素的html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html([val|fn])</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<ul>
			<li><a href="http://www.baidu.com">百度</a></li>
			<li><a href="http://www.qq.com">QQ</a></li>
			<li><a href="http://www.sina.com.cn">新浪</a></li>
		</ul>
		<script>
			$("li").html(function(index,html) {
				console.log(index+"："+html);
			});
		</script>
	</body>
</html>