关于面试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

如果有什么问题或者错误的话，请第一时间联系我哈

关于面试jquery中的 .attr() 和 .prop()的区别联系

标签：

原文地址：http://www.cnblogs.com/ilovezy/p/4409457.html