jQuery 学习-样式篇（四）：jQuery 设置和删除元素的属性

最新推荐文章于 2024-02-04 17:55:30 发布

店伙计

最新推荐文章于 2024-02-04 17:55:30 发布

阅读量6.1k

点赞数

分类专栏： Web 前端开发笔记文章标签： jquery

本文链接：https://blog.csdn.net/xzk9381/article/details/111869886

版权

Web 前端开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111869886，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

一、设置、获取和修改属性及属性值

1. 设置单个属性和属性值

使用 $(‘DOM’).attr() 可以设置元素的属性和属性值：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').attr('name','xuzk');
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

2. 获取已存在的属性

使用 $(‘DOM’).attr() 也可以判断是否存在该属性，如果存在则返回属性值，如果不存在则返回 undefined：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').attr('name','xuzk');
			console.log($('#mydiv').attr('name'));
			console.log($('#mydiv').attr('age'));
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

3. 重新设置属性值

对于已存在的属性，还可以使用 $(‘DOM’).attr() 重新设置属性值：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').attr('name','xuzk');
			console.log($('#mydiv').attr('name'));
			$('#mydiv').attr('name','aaron');
			console.log($('#mydiv').attr('name'));
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

4. 同时设置多个属性值

$(‘DOM’).attr() 也可以同时设置多个属性值，方法是将所有的属性值以 JSON 对象的方式传递进去：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').attr({
				'name':'xuzk',
				'age':18,
				'sex':'male'
			});
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

5. 使用函数返回值作为属性值

$(‘DOM’).attr() 还支持使用函数的返回值作为属性值：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').attr('age',function (){
				return 18;
			});
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

二、删除属性和属性值

使用 $(‘DOM’).removeAttr() 可以删除指定的属性：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').attr('age','18');
			console.log($('#mydiv').attr('age'));	// 输出属性值
            
			$('#mydiv').removeAttr('age');
			console.log($('#mydiv').attr('age'));	// 输出 undefined
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

需要注意的是，一次只能删除一个属性，但是可以使用链式操作的办法删除多个属性：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').attr({
				'name':'xuzk',
				'age':'18'
			});
			
			$('#mydiv').removeAttr('age').removeAttr('name');
		})
	</script>
</head>
<body>
	<div id="mydiv"></div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111869886，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

店伙计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery 学习-样式篇（四）：jQuery 设置和删除元素的属性

一、设置、获取和修改属性及属性值1. 设置单个属性和属性值使用 $(‘DOM’).attr() 可以设置元素的属性和属性值：<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(f
复制链接

扫一扫