遇到的问题
在给复选框设置被选中时出现的情况,用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()
只有一次效果,审查元素:
用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
干一行,爱一行,学到老,活到老~~