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  雪漠阳光  阅读(59)  评论(0)  编辑  收藏  举报