/ 前端基础

JQUERY中.ATTR()和.PROP()的区别

之前学习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这三个属性的计算值(绝对路径)的时候,用点操作。