关于面试jquery中的 .attr() 和 .prop()的区别联系
目测很多人都不太清楚这个,我之前也是,知道这两个东西有点区别,但是却说不清楚,那么这里,我来详细的讲一下
大家都知道,html标签可以在 <> 尖括号里面直接写属性, 例如 <img src="fhc.jpg" alt="hello">, 那么在jquery中,要获取这个图片的地址该怎么做的呢
$('img').attr('src') 或者 $('img').prop('src') 都可以,好像没什么区别
但是有一点大家要注意, 在 html标签里可以写一些奇葩的属性例如 <img src="fhc.jpg" whatYourName='zyzy'> 那么这个 whatYourName 属性该怎么获取呢
只能使用 $('img').attr('src'),如果使用 .prop()是没法获取的。
也就是说, .attr()可以获取 DOM元素的所有属性,包括本身自带的和后台随意添加的属性都可以。
.prop()只能获取 DOM元素的自带的属性。
那么问题来了,为啥呢?
大家都知道 jquery是基于原生js的,那么原生js怎么样去获取一个图片的 src呢?
如下有这么一个图片 <img id="pic" src="fhc.jpg">
js获取可以有两种方式 document.getElementById('pic').src 或者 document.getElmenetById('pic').getAttribute('src')
相比现在应该很清晰了,直接通过 .src 来获取图片地址就是 .prop()所封装的 js
而通过 getAttribute('src') 来获取图片地址的则是 .attr()所封装的 js
所以,相比较而言, .prop()方法 的效率应该会比 .attr() 的效率来的更高一些,好理解吧,但是 .attr()的功能更强大,而且覆盖了 .prop()。
如果你对运行效率并没有那么追求,那么就全部都用 .attr()好了
另外还有一个问题,在 button 的 disable 属性上, .prop() 和 .attr() 所获取的值稍有不同,详细请看半老头的这个文章吧http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html
如果有什么问题或者错误的话,请第一时间联系我哈