attr() 和 prop() 方法均可用于设置或返回被选元素的属性值。prop()是jQuery 1.6 版本之后新增的属性值,若引用的是1.6之前的jQuery.js文件,则只能用attr()。
Question: 在写代码过程中遇到了一个问题,初次渲染的时候,给 input[type=radio] 添加了 .attr('check', true) 之后,单选框被选中,但是在取消编辑返回初始状态的时候,调用相同的方法,但是选中效果却失效了……
Answer: 经查阅,发现attr()方法在移除原型对象的属性时会出错,从而失效,而prop()会忽略这种错误,继续执行操作。所以,对于 ‘checked’、 ‘selected’、‘disabled’ 等属性尽量使用.prop()进行操作
<input id="username" type="checkbox" checked="checked" value="1">
1. 使用prop()操作:
$('#username').attr('checked') // 'checked' String
$('#username').prop('checked') // true Boolean
/* 取消选中-prop */
$('#username').prop('checked', false);
$('#username').attr('checked') // 'checked' String -- 获取到的仍是checked
$('#username').prop('checked') // false Boolean
2. 使用attr()操作,第一次取消是有效的,再次选中失效
<input type="checkbox" id="user" checked="checked">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
console.log($("#user").attr('checked')); // 'checked'
console.log($("#user").prop('checked')); // true
$("#user").attr('checked', false);
console.log($("#user").attr('checked')); // undefined
console.log($("#user").prop('checked')); // false
$("#user").attr('checked', true);
console.log($("#user").attr('checked')); // 'checked' -- 但是界面显示,仍未选中状态
console.log($("#user").prop('checked')); // false
})
</script>