试谈jQuery中attr()和prop()的区别

来源：互联网发布：ubuntu autotools 编辑：程序博客网时间：2024/06/06 11:24

前言

今天jq上一个概念让我迷糊了好久：prop 和 attr 。到底为啥要分出这俩方法，我很奇怪，于是去查了查。

以attr()为例，官方文档上的解释如下

获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

和attr() 类似的，prop() 的解释也差不多

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。

既然都是返回第一个属性的值，到底有什么区别嘛（摔
在网上找到了一篇博文，第一点看完我就已经一脸问号了。更别说往下接着看了。

整理思路

后来又重新理了理思路，又和别人讨论了一会，觉得事情大概清晰了一些：

在HTML阶段，写在标签里用来对标签进行补充的称作是属性(attributes)；然而到了面向对象中，对象所拥有的也是属性(properties)，所以，这两个属性是不一样的，因此，在jq中文网上也将两个说法进行了区别，attributes被称作属性，而properties被称作为特性。所以是不是可以认为prop() 方法在某种程度上就是原生里面的. 方法访问属性呢？为了验证这个想法我做了以下尝试：
1. 给一个元素设置一个独特的attributes，比如impossible 属性。假如用attr() 能够访问到里面的值而 prop() 不能访问，说明prop() 不能访问标签内的属性
2. 同样的，获取1.中的元素对象，并设置一个property，比如possible 属性。如果用prop() 能访问到而 attr() 不能访问到，就说明attr() 不能访问到对象内部的属性值。说干就干。

测试

测试代码如下

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>prop||attr</title>    </head>    <body>        <p width="100"></p>    </body>    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>    <script type="text/javascript">        $("p").attr("impossible", "notimpossible");        console.log("宽度attr：" + $("p").attr("width"));        console.log("自定义attr：" + $("p").attr("impossible"));        console.log("宽度prop：" + $("p").prop("width"));        console.log("自定义prop：" + $("p").prop("impossible"));        console.log("\n");        $("p").prop("possible", "yes");        console.log("自定义attr：" + $("p").attr("possible"));        console.log("自定义prop：" + $("p").prop("possible"));    </script></html>

在Chrome59下测试的结果截图如下
结果截图谷歌

在Firefox54下测试结果如下
结果截图火狐

总结

由此可以看出，prop()方法的确相当于原生JS的foo.bar语法。

现在再回过头来看官方文档中的文字说明就感觉茅塞顿开了。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

再看这句话的时候，我不再会一头雾水的想啥是selectedIndex, tagName了，直接打印p对应的jQuery对象（不知道怎么截控制台里的长图）可以看见我之前定义的possible这个property就在第二张截图的第一个，这从侧面又印证了我的判断

pjQuery对象截图1

pjQuery对象截图2

后话

用了这么多时间就得到了上面“prop()方法相当于原生JS中的foo.bar语法”这么一句话，不免有点感觉时间有点白花了。但转念一想科学上的很多公式、方程都是用了许多年才能总结完善成一个式子。相比而言我的精力花费的还是比较少的。总之搞明白了这个知识点我很开心。

促进这篇文章写成的是http://www.365mini.com/page/jquery-attr-vs-prop.htm这篇博客，这篇文章写得很好，可惜那会我没明白里面attribute和property的区别，所以才想了个方法搞明白。而本文可以作为以上文章的补充说明。

阅读全文

0 0