jquery attribute vs property 的区别

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

01

attribute vs property 的区别

property 是 DOM 中的属性，是 JavaScript 里的对象；

attribute 是 HTML 标签上的特性，它的值只能够是字符串

jquery 中操作使用 prop 方法，操作 property 属性

$uid.prop("checked")

$uid.prop("checked",checked)

jquery 中使用 attr 方法，操作 attribute

$uid.attr("checked")

$uid.attr("checked",checked)

注：jquery 的版本问题

在jQuery 1.6之前，只有attr()函数可用，该函数不仅承担了attribute的设置和获取工作，还同时承担了property的设置和获取工作。例如：在jQuery 1.6之前，attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。 直到jQuery 1.6新增prop()函数，并用来承担property的设置或获取工作之后，attr()才只用来负责attribute的设置和获取工作。

jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

02

checked属性 到底是 attribute 还是 property ？

03

checked 值改变了，但是没有触发change事件

使用了jquery 的 prop 方法， 改变了 checked 的值，选中状态也发生了改变，但是对应的 change 事件没有触发

注：需要手动去调用 change() 方法 , 此方法只有 jquery 对象有

代码如下：

$("#checkAll").click(function () {
        var checked = $(this).prop('checked');
        var checkArr = $("#tbProduct input[type='checkbox']");
        for(var i=0;i<checkArr.length;i++){
            var nowCheck = $(checkArr[i]).prop('checked');
            if(nowCheck!=checked){
                $(checkArr[i]).prop('checked',checked);
                $(checkArr[i]).change();
            }
        }
    })