纠结attr(),prop()

刚刚看博客无意中看到attr()和prop()的区别，回头就去翻了一下手册，感觉手册上写的过于简单，不能很清晰的分辨出两者的区别，两者的参数用法都是高度相似。

attr():设置或返回被选元素的属性值。

prop():获取在匹配的元素集中的第一个元素的属性值。

这是手册上的概述，关于具体的参数在这儿就不一一列举出来了。

看完实例以后感觉还是没有太搞明白两者是什么区别，随即去百度上看看了一下芈老头(芈字害我试了好久才打出来，幸好之前有个芈月传)的博客，上面是这么写的。

关于它们两个的区别：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

看完以后感觉还是云里雾里的，迷迷糊糊，随后看到博客后面的评论对他的观点进行了一个很好的解释，是这么写的：

(1) <a href="#" target="_self" class="btn">百度</a>
alert($("a").prop("class")); -----------》btn
alert($("a").attr("class")); -----------》btn
虽然说attr()是获取自定义属性，prop是获取固有属性但是其实attr()也能获取到固有的属性，真正能够体现这俩的不同的是自定义属性上的获取和在获取标签中没有显示设置的固有属性的情况中，两种情况分别在（2）和（3）中解释。
a标签里面的 href，target，class都是固有属性所以都可以获取，自然不存在undefined的情况。
（2）在（1）的基础上加个自定义的属性试试
<a href="#" target="_self" class="btn" action="#" >百度</a>
alert($("a").prop("action")); -----------》undefined
alert($("a").attr("action")); -----------》#
在这里你就可以看到prop是不能够获取自定义属性的。
（3）楼主的最后一个例子怎么说呢，我觉得是在解释什么是固有属性，我将（1）种的class属性去掉。
<a href="#" target="_self" ">百度</a>
alert($("a").prop("class")); -----------》空
alert($("a").attr("class")); -----------》undefined
prop是固有属性，固有属性的意思是它知道你有这个属性，你没有写，它也知道，只是你没去设置而已。你没有设置它就返回默认值，楼主的的那个例子中checked的默认值就是false,对于class来说你没设置默认值应该就是为空。
attr是自定义属性，你不在标签里写它就不知道，所以返回的是undefined。

我觉得关键在于最后的几句话

今天就先到这儿以后碰到了记得这么个问题就ok了。

巴特西

纠结attr(),prop()

最新文章

热门文章