想要操作属性就必须先了解属性，HTML中的属性分为两种
属性的分类
1、固有属性Property：浏览器给默认给html标签绑定上的属性
常见的固有属性：selected disabled hidden class data type name value src href checked等
2、自定义属性Attribute：用户自己定义，在固有属性列表中没有的属性。
定义方式：自定义属性名=属性值 uname=“admin”
jQuery操作属性的方法：
取值
attr(“属性名”)
prop(“属性名”)
赋值
attr(“属性名”,“属性值”)
prop(“属性名”,“属性值”)
移除属性
removeAttr(“属性名”)
注：
1、attr、prop都可以操作
2、返回boolean类型的属性（selected、checked、disabled）attr返回的是选中的值,未选中返回的是undefined；prop返回的是true/false
3、自定义属性attr可以操作，prop不可以操作
总结：prop操作Boolean类型的属性，其他使用attr操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的属性</title>
	</head>
	<body>
		<input type="checkbox" name="ch" value="zhangsan" id="aa" checked="checked" uname="admin1" /> aa
		<input type="checkbox" name="ch" value="lisi" id="bb" uname="admin2"/> bb
	</body>
	<!-- 
	想要操作属性就必须先了解属性，HTML中的属性分为两种
	属性的分类
		1、固有属性Property：浏览器给默认给html标签绑定上的属性
			常见的固有属性：selected disabled hidden class data type name value src href checked等
		2、自定义属性Attribute：用户自己定义，在固有属性列表中没有的属性。
			定义方式：自定义属性名=属性值  uname="admin"
	jQuery操作属性的方法：
		取值
			attr("属性名")
			prop("属性名")
		赋值
			attr("属性名","属性值")
			prop("属性名","属性值")
		移除属性
			removeAttr("属性名")
	注：
		1、attr、prop都可以操作
		2、返回boolean类型的属性（selected、checked、disabled）attr返回的是选中的值,未选中返回的是undefined；prop返回的是true/false
		3、自定义属性attr可以操作，prop不可以操作
	总结：prop操作Boolean类型的属性，其他使用attr操作
	 -->
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 获取值
		console.log("===========固有属性获取值============");
		var aa = $("#aa").attr("value"); 
		console.log("attr获取id属性为aa的value的值：" + aa);//zhangsan
		var bb = $("#bb").prop("value");
		console.log("prop获取id属性值为bb的value的值：" + bb);//lisi
		var chk1 = $("#aa").attr("checked");
		console.log("attr获取id属性值为aa的checked的值：" + chk1);//checked
		var chk2 = $("#bb").attr("checked");
		console.log("attr获取id属性值为bb的checked的值：" + chk2);//undefined
		var chk3 = $("#bb").prop("checked");
		console.log("prop获取id属性值为bb的checked的值" + chk3);//false
		// 修改值/赋值
		console.log("===========固有属性赋值============");
		console.log($("#aa").attr("name"));//未修改之前ch
		$("#aa").attr("name","chh");//修改值
		console.log($("#aa").attr("name"));//修改之后chh
		
		console.log($("#bb").attr("name"));//未修改之前ch
		$("#bb").prop("name","chhh");//修改值
		console.log($("#bb").attr("name"));//修改之后chhh
		
		console.log("===========自定义属性赋值============");
		console.log($("#aa").attr("uname"));//未修改之前admin1
		$("#aa").attr("uname","aaaa");//修改值
		console.log($("#aa").attr("uname"));//修改之后aaaa
		
		console.log($("#bb").attr("uname"));//未修改之前admin2
		$("#bb").prop("name","bbb");//修改值
		console.log($("#bb").attr("uname"));//修改之后admin2;prop无法操作自定义属性
		
		console.log("===========自定义属性赋值============");
		console.log($("#bb").attr("uname"));//移除自定义属性之前
		$("#bb").removeAttr("uname");//移除自定义属性
		console.log($("#bb").attr("uname"));移除自定义属性之后
		/*这里注释才可以看到后面三行的代码*/
		//console.log($("#aa").attr("checked"));//移除自定义属性之前
		//$("#aa").removeAttr("checked");//移除自定义属性
		//console.log($("#aa").attr("checked"));移除自定义属性之后
		
		console.log($("#aa").prop("checked"));//移除自定义属性之前
		$("#aa").removeAttr("checked");//移除自定义属性
		console.log($("#aa").prop("checked"));移除自定义属性之后
	</script>
</html>

运行结果（浏览器鼠标右键选择：查看元素/检查或者直接按F12：选择控制台/console进行查看）：

chosen jquery设置值 jquery设置属性值_chosen jquery设置值


最后三行的运行效果：

chosen jquery设置值 jquery设置属性值_jquery_02