05-JQuery学习之操作元素属性

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06-操作元素属性</title>
	</head>
	<body>
		<form action="" id="myform">
			<input type="checkbox" name="ch" id="aa" checked="checked" abc="aabbcc"/> aa
			<input type="checkbox" name="ch" id="bb"/> bb
		</form>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//获取属性
		//固有属性
		var name = $('#aa').attr('name');
		console.log(name);
		var name2 = $('#aa').prop('name');
		console.log(name2);
		
		//返回值是Boolean的属性
		var ck1 = $('#aa').attr('checked');
		var ck2 = $('#aa').prop('checked');
		console.log(ck1);
		console.log(ck2);
		
		//返回值是Boolean的属性
		var ck3 = $('#bb').attr('checked');
		var ck4 = $('#bb').prop('checked');
		console.log(ck3);
		console.log(ck4);
		
		var abc1 = $('#aa').attr('abc');
		var abc2 = $('#aa').prop('abc');
		console.log(abc1);//aabbcc
		console.log(abc2);//undefined
		
		
		
		// 设置属性
		// 固有属性
		$('#aa').attr('value','1');
		$('#bb').prop('value','2');
		
		// 返回值是Boolean类型的属性
		$('#bb').attr('checked','checked');
		$('#bb').prop('checked',false);
		
		// 自定义属性
		$('#aa').attr('uname','uname');
		$('#aa').prop('upage','upage');
		
		// 移除属性
		$('#aa').removeAttr('checked');
	</script>
	<!-- 
		属性的分类
			固有属性：标签元素本身有的属性（id/name/class)
			
			返回值是Boolean类型的属性：checked、selected、disabled
			自定义属性：用户自定义的属性
			
		区别
			1.如果是固有属性，attr()和prop()方法均可获取
			2.如果是自定义属性，attr()可获取，prop()不可获取返回undefined
			3.如果是返回值为Boolean类型的属性，
				如果设置了属性，atrr()返回具体的值，prop()返回true
				如果未设置属性，atrr()返回undefined，prop()返回flase
		操作元素的属性
			1.获取属性
				attr('属性名')
				prop('属性名')
			2.设置属性
				attr('属性名','属性值')
				prop('属性名','属性值')
			3.移除属性
				removeAttr('属性名')
				
		总结：
		如果属性的类型是booble 则使用prop()方法
		否则一般使用attr()方法
	 -->
</html>

posted @ 2021-03-29 21:11 雪漠阳光阅读(63) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 软件产品开发中常见的10个问题及处理方法
· 互联网不景气了那就玩玩嵌入式吧，用纯.NET开发并制作一个智能桌面机器人（四）：结合BotSharp
· Vite CVE-2025-30208 安全漏洞
· MQ 如何保证数据一致性？
· 《HelloGitHub》第 108 期

公告

昵称：雪漠阳光
园龄： 6年4个月
粉丝： 2
关注： 10

+加关注

2025年3月

日

一

二

三

四

五

六

雪漠阳光

05-JQuery学习之操作元素属性

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>06-操作元素属性</title>
	</head>
	<body>
	<form action="" id="myform">
	<input type="checkbox" name="ch" id="aa" checked="checked" abc="aabbcc"/> aa
	<input type="checkbox" name="ch" id="bb"/> bb
	</form>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	//获取属性
	//固有属性
	var name = $('#aa').attr('name');
	console.log(name);
	var name2 = $('#aa').prop('name');
	console.log(name2);

	//返回值是Boolean的属性
	var ck1 = $('#aa').attr('checked');
	var ck2 = $('#aa').prop('checked');
	console.log(ck1);
	console.log(ck2);

	//返回值是Boolean的属性
	var ck3 = $('#bb').attr('checked');
	var ck4 = $('#bb').prop('checked');
	console.log(ck3);
	console.log(ck4);

	var abc1 = $('#aa').attr('abc');
	var abc2 = $('#aa').prop('abc');
	console.log(abc1);//aabbcc
	console.log(abc2);//undefined



	// 设置属性
	// 固有属性
	$('#aa').attr('value','1');
	$('#bb').prop('value','2');

	// 返回值是Boolean类型的属性
	$('#bb').attr('checked','checked');
	$('#bb').prop('checked',false);

	// 自定义属性
	$('#aa').attr('uname','uname');
	$('#aa').prop('upage','upage');

	// 移除属性
	$('#aa').removeAttr('checked');
	</script>
	<!--
	属性的分类
	固有属性：标签元素本身有的属性（id/name/class)

	返回值是Boolean类型的属性：checked、selected、disabled
	自定义属性：用户自定义的属性

	区别
	1.如果是固有属性，attr()和prop()方法均可获取
	2.如果是自定义属性，attr()可获取，prop()不可获取返回undefined
	3.如果是返回值为Boolean类型的属性，
	如果设置了属性，atrr()返回具体的值，prop()返回true
	如果未设置属性，atrr()返回undefined，prop()返回flase
	操作元素的属性
	1.获取属性
	attr('属性名')
	prop('属性名')
	2.设置属性
	attr('属性名','属性值')
	prop('属性名','属性值')
	3.移除属性
	removeAttr('属性名')

	总结：
	如果属性的类型是booble 则使用prop()方法
	否则一般使用attr()方法
	-->
	</html>