遇到的问题
在给复选框设置被选中时出现的情况，用prop()设置是没毛病，用attr()时只有一次效果，下面是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./包/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="ipt1" value="prop1" />prop测试
<input type="checkbox" name="ipt1" value="prop2" />prop测试
<input type="button" id="btn1" value="prop全选" />
<br> <br>
<input type="checkbox" name="ipt2" value="attr1" />attr测试
<input type="checkbox" name="ipt2" value="attr2" />attr测试
<input type="button" id="btn2" value="attr全选" />
<br>
<script>
点击prop全选，两个prop测试选框被选中，手动取消它们，再点击按钮，仍然有效
$(function () {
$("#btn1").click(function () {
$("input[name='ipt1']").prop("checked", true);
})
});
点击attr全选，两个attr测试选框被选中，手动取消它们，再点击按钮，无效
$(function () {
$("#btn2").click(function () {
$("input[name='ipt2']").attr("checked", true);
})
});
</script>
</body>
</html>
结果：prop()可以重复使用，attr()只有一次效果，审查元素：
审查.png
用attr()对应html元素上多了checked="checked",这里就是不一样的地方。这里有的同学已经明白了，根据固有属性和自定义属性不同来确定用哪个：
对于HTML元素自带固有属性，用prop()。
对于HTML元素自定义的DOM属性，用attr()。
一个栗子：
<a href="http://www.baidu.com" target="baidu" class="baidu">百度</a>
<a>元素的DOM属性有href,target,class，是本身就带有的属性，也是W3C标准里就包含有这几个属性，比如有的编辑器敲一个表单会带出一堆的固有属性，所以处理这些属性时，使用prop()。
<a href="#" id="box" action="go">GO</a>
这里后面一个action属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性，用attr()。如果使用prop()取值和设置属性值时，会返回undefined值。
last栗子：
<input id="chk1" type="checkbox" />chk1
<input id="chk2" type="checkbox" checked="checked" />chk2
var chk1 = $("#chk1").prop("checked");
console.log(chk1); --> false
var chk2 = $("#chk2").prop("checked");
console.log(chk2); --> true
checkbox,radio,select这样的元素，选中属性对应checked,selected，属于固有属性，用prop()方法去获得结果。
换成attr():
console.log(chk1); --> undefined
console.log(chk2); --> checked
干一行，爱一行，学到老，活到老~~
网友评论