prop和attr

本文的主要目的就是说说他们之间的区别。

※对html元素本身就带的固有属性，处理即prop。

※html元素我们自己定义的dom属性，就是attr。

使用prop方法取值和设置属性值（非固有的），都会返回undefined。

像是checkbox，redio，select这样的元素，选中属性也为固有属性。

在之前我也看过一些技术文，里面的例子有的都不能正确的使用，原因大多数是因为版本，现在我要执行的环境是jquery.1.6.4.min.js。因为attr在jquery1.6之前会有行为不一致，所以之后就加入了prop。

使用情况：

prop：async,checked,autofocus,location(ie:window.location)multiple,readOnly,selected...

其他的你可以区分为用attr。

用法：

prop（name|properties|key,value|fn）;-------removeProp

attr（name|properties|key,value|fn）;-------removeAttr

如果返回值是布尔类型的时候应当是用prop。比如说：disabled，checked....

例子：

html：

<input type="checkbox" id="check">
<label>复选框</label>
<input type="button" id="btn" value="Toggle">

js：

 $(function () {
        var flag=false;
        $('#btn').click(function () {
            if(flag==false){
                $("#check").attr("checked",true);
                console.log($("#check").attr("checked"))//checked
                console.log($("#check").prop("checked"))//true
                flag=true;
            }else{
                $("#check").removeAttr("checked");
                flag=false;
                console.log($("#check").attr("checked"))//undefined
                console.log($("#check").prop("checked"))//false
            }
        })



    })

上面的例子是完全好使的，你可以点击toggle按钮来切换选中情况。

但是有几种情况：

①如果你把

$("#check").attr("checked",true);

改成：

$("#check").attr("checked");

那么他就不好使了。并且他们的输出区别如下

$("#check").prop('checked')==false/true;

$("#check").attr('checked')=="checked"/undefined;

下面是我看的jquery.3.2.1.js的源码（实在是找不到min.js的解压工具了）。

其中我觉得主要的区别是：

prop：

返回的是：

return  elem[ name ] ;

而attr：

return ret == null ? undefined : ret;

elem.setAttribute( name, name );

最后，今天爸妈吵架了，写上好让我以后记得今天。