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

前言

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

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的区别,所以才想了个方法搞明白。而本文可以作为以上文章的补充说明。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值