jQuery中.attr()和.prop()的区别

时间：2023-12-29 17:33:08

之前学习jQuery的时候，学习到了两种取得标签的属性值的方法：一种是elemJobj.attr()，另一种是elemJobj.prop()。而在学习JS的时候，只有一种方法elemObj.getAttribute()。刚开始知道这两个jQuery方法都可以取得元素的属性值的时候，我觉得很奇怪，以为随着jQuery版本更新造成的历史遗留方法，所以花时间查了查attribute和property的区别，发现原来这两个其实是有区别的。其间我主要参考了这两篇文章：

JavaScript中的property和attribute介绍--脚本之家

jquery中attr和prop的区别--〖芈老头〗的技术空间

  • property

property是元素的固有属性，本身就拥有的，是写在HTML标准里的元素的属性。

  • attribute

attribute是我们自己定义的元素的属性，是没写在HTML标注中的，而是我们需要的时候自己进行定义的。

在了解了这两点的前提下，就可以对jQuery里的这两种方法的区别进行探讨了。对于元素本身固有的属性，我们应该用elemJobj.prop()方法进行取值，这样才能得到所需属性的正确值/计算值，特别在"值不是字符串类型而是布尔型"并且"采用简写形式的属性"时，如果采用.attr()方法，将得到undefined，而不是属性的布尔值。而采用elemJobj.attr()方法，我们会获得属性的字面量。

引用〖芈老头〗老师的例子：

<input id="input1" type="checkbox">

<input id="input2" type="checkbox" checked="checked">

在这个例子中，如果使用elemJobj.prop()方法，会得到如下结果：

$("#input1").prop("checked");  //false

$("#input2").prop("checked");  //true

而如果使用elemJobj.attr()方法，会得到如下结果：

$("#input1").attr("checked");  //undefined

$("#input2").attr("checked");  //checked

//补充说明：如果input2的checked属性是简写的形式，结果也与上面测试的结果是一样的，因为浏览器会给简写形式默认的值

由此可见，读取固有属性，应该使用.prop()方法，而不该使用.attr()方法。相对应地，读取自定义的属性就正好相反。

深度扩展：

在"脚本之家"的文章中，讲到了在JS中对属性进行点操作和JS方法操作时候所遇到的一些问题，这篇文章的作者不知道是哪位大神，但是可以感受到这位大神处理问题的认真态度，从这篇文章中可以很深入地了解这两个“属性”之间的区别，在这里我简单地把这篇文章做一个记录。

文章开头从语义上，表明attribute是property的子集，（对于这个观点，我并不确定，所以保持怀疑态度，因为我理解的property是固有属性，attribute是自定义属性，它们是不同的集合）而在JavaScript中，property和attribute更是有明显的区别。我们用代码来说明区别在哪：

---attribute

//HTML

<div id="div1">This is a test division.</div>

<div id="div2">This is a test division.</div>

如果对这个元素的自定义属性"myAttr"进行操作：

var elem1=document.getElementById("div1");

elem1.setAttribute("myAttr","testAttr");

alert(elem1.getAttribute("myAttr"));  //testAttr

alert(elem1.myAttr);  //undefined

var elem2=document.getElementById("div2");

elem2.myAttr = "testAttr";

alert(elem2.getAttribute("myAttr"));  //null，没有设置上

alert(elem2.myAttr);  //testAttr

//查看DOM可以发现，使用点操作给元素赋的值并没有写进元素的属性中，只是在点操作读取的时候可以都出来

在这里我们可以看出来，似乎setAttribute()和getAttribute()成了一对CP，而点操作必须自己跟自己玩儿。用文中的一句话就是：在对自定义属性的处理方式上，DOM属性的标准方法和点号方法不再具有任何关联性。

---property

//HTML

<a id="a1" href="">This is a test element.</a>

<a id="a2" href="">This is a test element.</a>

如果对这两个元素的属性"href"进行操作：

var elem1=document.getElementById("a1");

elem1.setAttribute("href","testProp");

alert(elem1.getAttribute("href"));  //testAttr

alert(elem1.href);  //path/testProp

var elem2=document.getElementById("a2");

elem2.href = "testProp";

alert(elem2.getAttribute("href"));  //testAttr

alert(elem2.href);  //path/testProp

两组alert的结果是一样的，两个方法都能够将属性值设置进DOM中，.getAttribute()方法返回的是文件路径字面量（相对路径），而点操作则是返回的计算值，是指定的文件的绝对路径。由此可以猜测的是，对于元素的固有属性property，DOM标准方法和点操作是相通的。

之后，我又对两个<div>的class属性进行了测试，发现结果和进行attribute测试的结果一样，结合脚本之家的这篇文章，可能只有href, src, value这几个属性是固有属性里面DOM方法操作和点操作相通的吧，具体原因现在还不是很懂。

结语：（一）对于jQuery中方法的使用，固有属性就该用.prop()，而自定义属性就该用.attr()；（二）而在JS中，虽然property和attribute有一点混乱了，但仍然可以保持property和attribute分别是固有属性和自定义属性的这个观点，这样区别开来不容易造成混淆，同时为了避免bug的出现，还是尽量在使用的时候，.setAttribute()和.getAttribute()相对应，点操作与点操作对应，不把DOM方法和点操作混着用（即使有时候是相通的），这样可以避免错误的产生。（三）在涉及到href, src, value这三个属性的计算值（绝对路径）的时候，用点操作。

相关文章