attr()和prop()的前世今生

RobinQu 发布于2019-08-22 10:48 / 1982人阅读

摘要：简单地说，表示标签的属性，而表示对象的属性。在的在早期版本中，没有区分出和，只有一个。在此之前，的职能只能由代为行使。官方建议，对于只有和两个值的属性如等，应当使用。因此，我们还是要遵循官方的建议，该用的地方就不要再用了。

attr(全称为attribute),prop(全称为property),两者都可以翻译为属性，为了区分二者，有些中文文档将前者翻译为特性，后者翻译为属性。简单地说，attr表示HTML标签的属性，而prop表示DOM对象的属性。二者从本质上来说是不一样的，但它们常常被混为一谈，部分原因在于DOM对象的属性大多与其所对应的HTML属性同名，比如id,href,type，但也有不同，比如DOM对象中有className属性，而HTML标签中有class属性。
    
    在jquery的在早期版本中，没有区分出attr和prop，只有一个attr()。jQuery 1.6版本，提供了一个新的方法来获取和设置属性，这个方法这是prop()。在此之前，prop()的职能只能由attr()代为行使。官方建议，对于只有true和false两个值的属性（如checked、selected、disabled等），应当使用prop()。如果你偏偏就不听建议，就是要用attr()，那么让我们看下有什么后果（此处以checked为例）。

    这是HTML代码：

Check me

    这是jQuery代码：

$(function(){
    $("input").change(function(){
        console.log($(this).attr("checked"));
        console.log($(this).prop("checked"));
        });
    });
 
    在不同的jquery版本下，有不同的输出结果,如下面的表格所示：

分析：
    从上面可以看出，1.6版本之前，使用attr()能得到正确的结果，而使用prop()会返回类型错误（因为该方法还没有被定义）；从1.6.0版本起，attr()得到的结果都不符合预期，而使用prop()可以得到正确的结果。可以简单地理解为，从1.6.0版本起，attr()让出了那些本不属于自己的权力，而prop()获得了它的权力（这就像古代的摄政王要在皇帝大婚之后将皇权交回皇帝手中一样）。因此，我们还是要遵循官方的建议，该用prop()的地方就不要再用attr()了。

总结：
    应该用prop()获取的属性如下：async,autofocus,checked,location,multiple,readOnly,selected。

本文中部分观点为个人理解，不当之处，敬请批评指正
参考文档：http://api.jquery.com/prop/

GPU服务器服务器托管 webrtc 前世今生前世 prop() prop

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91284.html

React Mixin 的前世今生

摘要：但非常不幸，并不原生支持。这个单词相信都很熟悉，高阶函数在函数式编程是一个基本概念，它描述的是这样一种函数，接受函数作为输入，或是输出一个函数。比如常用的工具方法都是高阶函数。恰与的定义完全一致。这种不同很可能会导致问题的产生。在 React component 构建过程中，常常有这样的场景，有一类功能要被不同的 Component 公用，然后看得到文档经常提到 Mixin（混入） ...

姘存按 2019-08-21 10:49 评论0 收藏0
Web技术的前世今生（二）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》平静的生活已经有一段日子了。这一天，HTML大哥面露不悦地走过来问我： Js，你是打算和我们分家吗？大哥，您这说的哪里话，我什么地方做的不对么？我一脸茫然地回答道。哼，...

Stardustsky 2019-08-30 15:55 评论0 收藏0
Web技术的前世今生（二）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》平静的生活已经有一段日子了。这一天，HTML大哥面露不悦地走过来问我： Js，你是打算和我们分家吗？大哥，您这说的哪里话，我什么地方做的不对么？我一脸茫然地回答道。哼，...

hyuan 2019-08-02 13:59 评论0 收藏0
Web技术的前世今生（二）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一平静的生活已经有一段日子了。传送门技术的前世今生一技术的前世今生三前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》平静的生活已经有一段日子了。这一天，HTML大哥面露不悦地走过来问我： Js，你是打算和我们分家吗？大哥，您这说的哪里话，我什么地方做的不对么？我一脸茫然地回答道。哼，...

justjavac 2019-08-23 14:19 评论0 收藏0
Web技术的前世今生（三）

摘要：前言我是，如果你还不认识我，不妨先看看技术的前世今生一，以及技术的前世今生二前面我提过，我的大哥有一个叫的死党，这家伙有事没事经常上我们家串门。时间来到了年，在那前后发生了两件事让我印象深刻。传送门技术的前世今生一技术的前世今生二前言：我是JavaScript，如果你还不认识我，不妨先看看《Web技术的前世今生（一）》，以及《Web技术的前世今生（二）》前面我提过，我的大哥HTML...

Wuv1Up 2019-07-01 11:06 评论0 收藏0