<!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>