jQuery .attr() vs. .prop()

Property vs. Attribute

在开始正式比较prop()和attr()两个jQuery方法之前，我们有必要先弄清一下Property和Attribute两个单词的意思。在中文里面，它们都是属性的意思，那究竟有什么区别呢？我是这么理解的（曾经在《深入浅出WPF》一书中看到过一些关于XAML相关的解释，觉得这里也是适用的）：

Property - 属性、字段，这是站在面向对象的层面去理解的，当我们将现实中的某一物体用代码把它抽象出来时，那么它的属性我们就用Property来表示。在这里我们要研究的其实是DOM 元素，例如 input checkbox，它就是现实中的一个复选框，那么Javascript描述它时就赋予了它很多属性，id表示它的唯一标识，type表示它的类别，checked表示它的状态等等，我们就称这些为Property。

Attribute - 特性，更多的我将它称为特性。这是站在编译的层面去理解它的，我们知道HTML它是一种标记语言，什么意思，就是一个标签最后会被编译器编译为一个DOM对象

<input type="checkbox" id="chk1" class="sampleclass">

会被编译为一个DOM Element，而这里的type，id我们就称之为Attribute，你会发现这里的AttributeName和上面提到的PropertyName有些会同名，没错，它们用来初始化DOM对象的一些属性，假设被编译出的对象是elem，那么elem.type就是checkbox，elem.id就是chk1，所有在我看来，Attribute其实是给编译器看的。Attribute名称不一定都是和Property一一对应的，例如Attribute的class <–> Property的classname，这些不是我们关心的，只要编译器知道其中的对应关系就行了。当然，正所谓特性，肯定还可以定义一些特有的性质，例如在标签中我可以自定义一些Attribute

<input type="checkbox" id="chk1" customizedattr="my attribute" >

在理解了这两个单词的区别之后，在我看来，理想状态下，基本都可以用prop()搞定，除了需要去获取一些自定义的Attribute那就得让attr()出山了。

操作DOM元素Property和Attribute

作为一个对象的属性，按照惯例我们当然可以通过 object.PropertyName的方式来get/set：

var proValue = object.PropertyName;
object.PropertyName = newProValue;

或者

var pValue = object["PropertyName"];
object["PropertyName"] = newValue;

返回值可以是Object类型，返回undefined如果不存在指定的属性名称，

同样，newProValue也可以是一个Object。

而作为对象的特性，经过编译器编译后所有的特性会被存放在一个叫attributes的属性下面，这个属性的类型是NamedNodeMap，如下图所示。

Javascript提供两个方法来进行set/get：

var attrValue = object.getAttribute("AttributeName");
object.setAttribute("AttributeName", newAttrValue);

返回值和newAttrValue都只是string类型，返回null如果不存在指定的特性名称。

jQuery .attr()

如果理解了Property和Attribute的区别以及Javascript的原生操作DOM元素的Attribute的方法的话，那这个.attr()也就不难理解了，jQuery就是把原生的Javascript方法包装一下，提高了跨浏览器的兼容性以及易用性，具体使用方法的话还是参考.attr() api。当然个人还是建议，在.prop()能搞定的地方就不用.attr()，目前能想到的情况：

• jQuery 版本 < 1.6

• 需要设置/获取自定义的特性

jQuery .prop()

根据 John Resig 本人博客所建议，优先选择.prop()，具体使用方法参考.prop() api，原因主要两点：

• 更合理，更简单

• 性能稍稍优于.attr()

测试

<div><input type="checkbox" id="chk1" regVal="Test" dataTT="dataTest" myvalue="MyTestValue"><label for="chk1">Monday</label></div>

$(document).ready(function(){
$("input[type=checkbox]").click(function(index){
var domElem = this;
var $Elem = $(this);

$("#resultContainer").append("<pre>domElem[\"class\"]                                           " + domElem["class"] + "</pre>");
$("#resultContainer").append("<pre>domElem[\"className\"]                                       " + domElem["className"] + "</pre>");
$("#resultContainer").append("<pre>domElem.class                                              " + domElem.class + "</pre>");
$("#resultContainer").append("<pre>domElem.className                                          " + domElem.className + "</pre>");
$("#resultContainer").append("<pre>domElem.getAttribute(\"class\")                              " + domElem.getAttribute("class") + "</pre>");
$("#resultContainer").append("<pre>domElem.getAttribute(\"className\")                          " + domElem.getAttribute("className") + "</pre>");
$("#resultContainer").append("<pre>$Elem.attr(\"class\")                                        " + $Elem.attr("class") + "</pre>");
$("#resultContainer").append("<pre>$Elem.attr(\"className\")                                    " + $Elem.attr("className") + "</pre>");
$("#resultContainer").append("<pre>$Elem.prop(\"class\")                                        " + $Elem.prop("class") + "</pre>");
$("#resultContainer").append("<pre>$Elem.prop(\"className\")                                    " + $Elem.prop("className") + "</pre>");

$("#resultContainer").append("<pre>*************************************************************************************************************</pre>");

$("#resultContainer").append("<pre>domElem[\"myvalue\"]                                           " + domElem["myvalue"] + "</pre>");
$("#resultContainer").append("<pre>domElem.myvalue                                              " + domElem.myvalue + "</pre>");
$("#resultContainer").append("<pre>domElem.getAttribute(\"myvalue\")                              " + domElem.getAttribute("myvalue") + "</pre>");
$("#resultContainer").append("<pre>$Elem.attr(\"myvalue\")                                        " + $Elem.attr("myvalue") + "</pre>");
$("#resultContainer").append("<pre>$Elem.prop(\"myvalue\")                                        " + $Elem.prop("myvalue") + "</pre>");

$("#resultContainer").append("<pre>*************************************************************************************************************</pre>");

$("#resultContainer").append("<pre>domElem[\"checked\"]                                           " + domElem["checked"] + "</pre>");
$("#resultContainer").append("<pre>domElem.checked                                              " + domElem.checked + "</pre>");
$("#resultContainer").append("<pre>domElem.getAttribute(\"checked\")                              " + domElem.getAttribute("checked") + "</pre>");
$("#resultContainer").append("<pre>$Elem.attr(\"checked\")                                        " + $Elem.attr("checked") + "</pre>");
$("#resultContainer").append("<pre>$Elem.prop(\"checked\")                                        " + $Elem.prop("checked") + "</pre>");

$("#resultContainer").append("<pre>*************************************************************************************************************</pre>");

var inputElem = $("input[type=text]")[0];
var $inputElem = $(inputElem);
$("#resultContainer").append("<pre>inputElem[\"value\"]                                           " + inputElem["value"] + "</pre>");
$("#resultContainer").append("<pre>inputElem.value                                              " + inputElem.value + "</pre>");
$("#resultContainer").append("<pre>inputElem.getAttribute(\"value\")                              " + inputElem.getAttribute("value") + "</pre>");
$("#resultContainer").append("<pre>$inputElem.attr(\"value\")                                        " + $inputElem.attr("value") + "</pre>");
$("#resultContainer").append("<pre>$inputElem.prop(\"value\")                                        " + $inputElem.prop("value") + "</pre>");
});
});

Results：

小结

.attr()和.prop()两个jQuery方法其实都是对Javascript原生方法elem.getAttribute()/elemsetAsttribute()和elem.PropertyName|elem[“PropertyName”]的包装，以支持更好地兼容性和易用性。对于如何选择，jQuery 1.6+的版本中，操作DOM元素的属性时用prop()，操作特性时用attr()，属性和特性若有重叠时，优先使用prop()，例如：id，type，classname等等；对于那些动态的属性，使用prop()，例如：input checkbox 的checked属性，input select 的selected属性，input text 的value属性(这个也推荐使用.val()方法)；对于那些自定义的特性，使用attr()。

参考

• http://ejohn.org/blog/jquery-16-and-attr/

• http://www.cnblogs.com/dolphinX/p/3348582.html

• http://wenzhixin.net.cn/2013/05/24/jquery_attr_prop

• http://www.jianshu.com/p/880815b62726

• http://www.cnblogs.com/zhangxiaolei521/p/5150976.html

• http://stackoverflow.com/questions/5874652/prop-vs-attr