jQuery中.attr()与.prop()的比较

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>

jQuery中.attr()与.prop()的比较

猜你喜欢