prop 和 attr 中一些羞羞的事情

lmxdawn 发布于2019-08-29 15:21 / 2128人阅读

摘要：设置的属性值可以包括数组和对象在内的任意类型有关布尔值的属性之后返回的也是字符串类型选中或禁用直接返回。当涉及到值时，比如这样的，有和这样的布尔值的元素属性，在页面加载的时候就被设置，并且一直保持初始值，而则存储着元素属性的当前值。

引言

前几天做一个迷你京东小项目的时候涉及到一个全选的小功能，一开始用的是 attr，但是效果完全不是自己想要的，当商品按钮点击过一次后，attr就无法对其状态进行更改，最后谷歌了一番发现需要用 prop 来代替。虽然效果问题解决了，但是自己还是想弄懂 prop 和 attr 的区别.

版本使用不同

遇到问题我一般先会去查相关的官方文档，可在 jq 的 api 中文文档中没有发现有价值的东西，只是发现适用的版本和概念有所轻微的不同。

attr : 设置或返回被选元素的属性值.版本：1.0

prop : 获取在匹配的元素集中的第一个元素的属性值。版本：1.6+

从概念中发现操作的对象和使用也好像基本相同，然后带着疑惑去进行了一番实验并去查阅了一些相关资料

示例代码

全选单选单选单选单选单选单选

$(".checkAll").click(function() {
  $(".item").attr("checked", this.checked);
});

问题描述

当全选按钮选中时单选按钮全部选中，当全选按钮不选中时单选按钮全部不选中，只点全选按钮时，反复几次都没问题，但是要是点击了其中一个单选按钮，那这个单选按钮就不会在像其它单选按钮一样跟随全选按钮的状态的改变而改变。

attr 和 prop 的本质

attr 是 attribute 的缩写,prop 是 property 的缩写，都有属性的意思，只不过 attr 是操作 html 文档节点属性，prop 是操作 js 对象属性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=key。

attr 和 prop 的区别

attr 设置的属性值只能是字符串类型,如果不是字符串类型，也会调用其 toString() 方法，将其转换成字符串类型。

prop 设置的属性值可以包括数组和对象在内的任意类型

有关布尔值的属性

1.6 之后, attr 返回的也是字符串类型, 选中或禁用直接返回 checked,selected,disabled。否则返回undefined。解决我问题的关键就是下面一句话

jQuery 认为：attribute 的 checked、selected、disabled 就是表示该属性初始状态的值，property 的 checked、selected、disabled 才表示该属性实时状态的值(值为 true 或 false)。

当涉及到 boolean 值时，比如 checkbox 这样的，有 true 和 false 这样的布尔值的元素属性，attributes 在页面加载的时候就被设置，并且一直保持初始值，而 properties 则存储着元素属性的当前值。

所以当我没有点击单选按钮的时候，它就是没被用户点击过的浏览器刚加载出来的初始状态，此时可以通过 attr 去设置并操控，当有用户点击的时候，当前按钮就不是初始状态，attr自然也就无法操控。

服务器托管云服务器 vps日常维护中的一些要点总结 prop() props prop

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

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

prop 和 attr 中一些羞羞的事情

摘要：设置的属性值可以包括数组和对象在内的任意类型有关布尔值的属性之后返回的也是字符串类型选中或禁用直接返回。当涉及到值时，比如这样的，有和这样的布尔值的元素属性，在页面加载的时候就被设置，并且一直保持初始值，而则存储着元素属性的当前值。引言前几天做一个迷你京东小项目的时候涉及到一个全选的小功能，一开始用的是 attr，但是效果完全不是自己想要的，当商品按钮点击过一次后，attr就无法对...

simon_chen 2019-08-22 17:05 评论0 收藏0
prop 和 attr 中一些羞羞的事情

摘要：设置的属性值可以包括数组和对象在内的任意类型有关布尔值的属性之后返回的也是字符串类型选中或禁用直接返回。当涉及到值时，比如这样的，有和这样的布尔值的元素属性，在页面加载的时候就被设置，并且一直保持初始值，而则存储着元素属性的当前值。引言前几天做一个迷你京东小项目的时候涉及到一个全选的小功能，一开始用的是 attr，但是效果完全不是自己想要的，当商品按钮点击过一次后，attr就无法对...

Pandaaa 2019-08-05 13:50 评论0 收藏0
动手写个React高阶组件

摘要：作用是给组件增减属性。如果你的高阶组件不需要带参数，这样写也是很的。那么需要建立一个引用可以对被装饰的组件做羞羞的事情了，注意在多个高阶组件装饰同一个组件的情况下，此法并不奏效。你拿到的是上一个高阶组件的函数中临时生成的组件。是什么简称HOC，全称 High Order Component。作用是给react组件增减props属性。怎么用为什么不先说怎么写？恩，因为你其实已经用...

xiaokai 2019-08-22 18:14 评论0 收藏0
新手的node爬虫初体验

摘要：后来在爬取不到让我一度怀疑人生的时候巧合下，发现磁力链接有小写字母，有长度的，有长度的。。原文博客：羞羞的node爬虫前言学了一阵子node，除了用 express 写东西，就没怎么做过东西突然就想写个爬虫来玩一玩，而且还是爬一些羞羞的东西使用模块 SuperAgent 是个 http 方面的库，可以发起 get 或 post 请求。 cheerio 大家可以理解成一个 ...

wemallshop 2019-08-20 16:53 评论0 收藏0
新手的node爬虫初体验

摘要：后来在爬取不到让我一度怀疑人生的时候巧合下，发现磁力链接有小写字母，有长度的，有长度的。。原文博客：羞羞的node爬虫前言学了一阵子node，除了用 express 写东西，就没怎么做过东西突然就想写个爬虫来玩一玩，而且还是爬一些羞羞的东西使用模块 SuperAgent 是个 http 方面的库，可以发起 get 或 post 请求。 cheerio 大家可以理解成一个 ...

cocopeak 2019-08-05 11:20 评论0 收藏0