jQuery操作元素的属性_jquery监听元素属性变化-优快云博客

本文链接：https://blog.youkuaiyun.com/aqzengkuasheng/article/details/122990387

操作元素的属性包含：获取属性、设置属性值、删除属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 元素属性的分类：
		 1.固有属性：元素本身就有的属性（id,name,class,style）
		 2.返回值是boolean的属性：checked,selected,disabled
		 3.自定义属性
---------------------------------------------------------------------
		 1.获取属性
		 attr("属性名")；
		 prop("属性名");
		 
		 分不清什么时候用attr,什么时候用prop的时候，记住：是boolean属性的时候使用prop，其他时候使用attr
		 -->
		 <input type="checkbox" name="ch" checked="checked" id="aa" abcd="abcd" >aa
		 <input type="checkbox" name="ch" id="bb">bb
	</body>
	<script src="jquery-3.4.1.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 boo=$("#aa").attr("checked");
		console.log(boo);
		var boo2=$("#aa").prop("checked");
		console.log(boo2);
		var boo3=$("#bb").attr("checked");//undefined
		console.log(boo3);
		var boo4=$("#bb").prop("checked");//false
		console.log(boo4);
		var abc=$("#aa").attr("abcd");//可以获取到
		console.log(abc);
		var abc1=$("#aa").prop("abcd");//自定义属性prop获取不到
		console.log(abc1);
		
		//设置属性
		$("#aa").attr("value","1");
		$("#bb").prop("value","2");
		
		//设置属性值为boolean的属性
		$("#bb").prop("checked",true);//用这个好一些，可以直接设置true或false
		
		//设置自定义属性
		$("#aa").attr("uname","zks");//prop不能设置自定义属性
		
		//移除属性
		$("#aa").remove("checked");
		
	</script>
</html>