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

mo0n1andin 发布于2019-08-20 15:38 / 2343人阅读

摘要：需求很简单的，一个非常简单的复选框的使用。与的区别复选框设置设置自定义自定义设置类型设置类型支持类型在这里温馨提示提示一下，当我们设置这个属性时，再用获取的时候，控制提示。

问题引入

昨天接到了一个活，里面有一个小需求，在写的过程中遇到了一个小问题。虽然这个问题并不是很复杂的东西，但却是一个比较细节的问题。相信不少新手前端会遇到。下面我先描述一下我这个遇到的这个需求。

需求很简单的，一个非常简单的复选框的使用。你需要实现下面三个逻辑：

勾选“全国”，东区、南区、西区、北区都会被选中

取消勾选“全国”，东区、南区、西区、北区都会被取消选中

如果四个区域都被选中，则“全国”会被勾选，若四个区域有一个未被勾选则“全选”不会被勾选

在处理这个需求的时候我首先想到当然回事jQuery中的attr()方法啦！attr("checked",true)这样一下就可以实现对复选框的控制，但是我在判断的时候却出现了两个问题：

当复选框被勾选之后，用attr("checked")来获取其状态时却返回undefined

当你还未对复选框进行任何勾选操作时，attr("checked",true)或者attr("checked",false)是有效的，但是进行完勾选操作之后，attr("checked",true)或者attr("checked",false)失效了

这两个问题让我非常疑惑不解。在我查阅资料之后，发现了其中原因，今天我们就扯一下jQuery中attr()和prop()的区别，来解释一下上面两个问题出现的原因，另外这也是新手前端容易忽略的问题。

工欲善其事，必先利其器，先谈谈attribute与property的区别

要想弄清楚jQuery中attr()和prop()的区别，首先我们得弄明白attribute与property的区别。当我们弄清楚这两个属性之后，再过来理解jQuery中attr()和prop()的区别就会很轻松。attribute与property这两个属性对于刚入行前端的同学们来说，是非常容易混淆的。这边我自己总结一下，大概有有以下四点：

1.Dom节点自带的属性既是attribute也是property，修改attribute或者property都可以使属性变化

2.attribute和property自定义的属性，相互之间是不能访问的

3.attribute只支持string类型，而property是可以支持string、number以及boolean的

4.attribute的自定义属性可以在innerHTML中查看的，而property的自定义属性却是不可以在innerHTML中查看的

看完上面这几点总结，我相信还是有很多同学们并不能理解。所以我写一些小案例，供同学们去体会attribute与property的区别。




    
    Attribute与Property的区别


复选框

在这里温馨提示提示一下，当我们设置class这个属性时，再用oCheckBox.class获取的时候，控制提示undefined。在property里面是className而不是class，这就跟document.getElementsByClassName()很类似。细心小伙伴们会发现一个当我用property设置自带的属性的时候，返回的类型是string，跟前面第三点不符啊！这里我们就要说回第一点自带属性既是attribute也是property，而attribute却只支持string类型，当我们用property设置自带属性的时候，会自动将其转换成string类型以满足attribute只支持string类型的要求，所以我们自带的属性只能是string类型了。

揭起attr()和prop()的面纱

说完attribute和property之后，接下来我们就要说一下jQuery中的attr()和prop()了。前面提到我们提到了两个困惑的地方，我们来逐一解释其中原由。
1、 当复选框被勾选之后，用attr("checked")来获取其状态时却返回undefined

这里我们注意的是，用attr()获取的属性，必须是你在DOM节点上可以看见的属性，看不见则会返回undefined。这里我们可以验证一下，当你使用attr("checked",true)之后，你会发现与之相对应的DOM节点会添加一个checked="checked"这么一条属性，你再用attr("checked")去获取它的checked属性的时候便会返回“checked”字符串，这也就验证了这句话。

用attr()获取的属性，必须是你在DOM节点上可以看见的属性，看不见则会返回undefined。

针对DOM节点上自己定义的属性的，prop()是不能获取的，而attr()是可以的，如果是标签自带的那便都能获取。原因就在于我们前面总结attribute和property时，所提到的Dom节点自带的属性既是attribute也是property。

2 、当你还未对复选框进行任何勾选操作时，attr("checked",true)或者attr("checked",false)是有效的，但是进行完勾选操作之后，attr("checked",true)或者attr("checked",false)失效了

在这里我们需要弄清楚的一件事是attr("checked",true)和attr("checked",false)其实设置的不是checked属性，而是defaultChecked属性。而我们勾选和取消勾选这两个操作才是改变checked属性，这个相当于执行了prop("checked",true)或者prop("checked",false)这两条语句。当我们未修改checked属性时,复选框的勾选情况就是被defaultChecked这个属性所控制，在我们修改了checked属性之后，复选框的勾选情况将由checked属性接管，defaultChecked这个属性便失效了，除非你再刷新一次页面。




    
    Title


    全国


//记得引入jQuery

结语

我们文章开头抛出的两个问题已经得到解决了，这里我们我们总结一下attr()和prop()使用场景。

在设置disabled、selected、checked等这些Boolean类型自带属性时，我们需要用prop()方法；其他字符串类型自带属性时，我们使用attr()方法即可;DOM节点可见的自定义属性我们也使用attr()方法。

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

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

jQuery中attr()和prop()方法的一些区别理解

摘要：后来了一番不知怎么搜索的又发现了一个和区别的一些解释。操作对象不同在中表示文档节点属性，而则表示对象属性。函数主要依赖的是对象的和两个方法。昨天在开发的时候同事帮忙写了一小段JS代码，取数据的时候用到了以前都没用过的$(this).data(xxx)的这种形式，后来看了手册才知道在HTML5中可以对元素进行自定义属性。格式类似于data-xxx=value,然后可以用JQ中的....

iKcamp 2019-08-21 10:30 评论0 收藏0
jquery中attr和prop的区别

摘要：今天研究前端的给固有属性加值是出现错误，搜索了下，找到了原因，就是中和的区别。下面和大家分享下在高版本的引入方法后，什么时候该用什么时候用它们两个之间有什么区别这些问题就出现了。关于它们两个的区别，网上的答案很多。今天研究前端jquery的attr给固有属性加值是出现错误，搜索了下，找到了原因，就是：jquery中attr和prop的区别。下面和大家分享下：在高版本的jquery引...

ad6623 2019-08-20 19:07 评论0 收藏0
jquery中attr()和prop()的区别

摘要：在中新加了一个方法，查看文档可以看到一句话获取在匹配的元素集中的第一个元素的属性值。这种情况适用于多选项全选和反选的情况。在jquery1.6中新加了一个方法prop()，查看jquery文档可以看到一句话:获取在匹配的元素集中的第一个元素的属性值。大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = disabled，checked...

刘德刚 2019-08-20 16:02 评论0 收藏0
jQuery 的 attr 与 prop 的区别

摘要：先提出问题对于这类值是的属性，用的或方法进行读取或设置值是有区别的。因此，如果你想知道文本框的当前值，则读取。的值并不会随着的状态而作出相应改变，而会。为对象设置值的安全做法避免内存泄漏是使用。参考翻译地址的与的区别先提出问题：对于 checked 这类值是 true/false 的属性，用 jQuery 的 attr 或 prop 方法进行读取或设置值是有区别的。在看 jQue...

kk_miles 2019-08-19 17:47 评论0 收藏0