attr()和prop()的区别

遇到的问题

在给复选框设置被选中时出现的情况，用prop()设置是没毛病，用attr()时只有一次效果，下面是代码：

    
    
    
    
    



    prop测试
    prop测试
    
    
 

    attr测试
    attr测试
    
    

    

结果：prop()可以重复使用，attr()只有一次效果，审查元素：

审查.png

用attr()对应html元素上多了checked="checked",这里就是不一样的地方。这里有的同学已经明白了，根据固有属性和自定义属性不同来确定用哪个：

对于HTML元素自带固有属性，用prop()。
对于HTML元素自定义的DOM属性，用attr()。

一个栗子：

 百度

元素的DOM属性有href,target,class，是本身就带有的属性，也是W3C标准里就包含有这几个属性，比如有的编辑器敲一个表单会带出一堆的固有属性，所以处理这些属性时，使用prop()。

 GO

这里后面一个action属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性，用attr()。如果使用prop()取值和设置属性值时，会返回undefined值。

last栗子：

chk1
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

干一行，爱一行，学到老，活到老~~