jQuery 获取元素属性 attr() 和 prop()

川长思鸟来 2022-05-14 13:34 351阅读 0赞

使用过jQuery的伙伴们，一定对** attr()** 方法不陌生，**attr()** 方法的功能是：获取匹配的元素集合中的第一个元素的属性的值，还记得我以前将一些关键的数据值，通过该方法来保存到元素上，比如存储一个用户的ID在元素上我会这样写

$(select).attr("data-uid","WEB-7258")

如果您现在还像我以前一样的话，推荐您可以阅读[《jQuery 数据缓存》][jQuery]来学习一下更优的做法。

继续回归本篇文章主题，attr() 方法功能是：获取匹配的元素集合中的第一个元素的属性的值，而 prop() 方法的功能是：获取匹配的元素集中第一个元素的属性值，方法的功能如此神似，是不是取其一就行了呢，其实 prop() 方法 有一个让您不得不用的理由，下面我们揭开 prop() 方法的神秘面纱

attr() 方法获取的是 Attributes 属性，prop() 方法获取的是 Properties 属性。

根据W3C的表单规范 ，在checked属性是一个布尔属性， 这意味着,如果这个属性（attribute）是目前存在， 即使，该属性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）为true。 这才是真正的所有布尔属性（attributes）。

然而，要记住的最重要的概念是checked特性（attribute）不是对应它checked属性（property）。特性（attribute）实际对应的是defaultChecked属性（property），而且仅用于设置复选框最初的值。checked特性（attribute）值不会因为复选框的状态而改变，而checked属性（property）会因为复选框的状态而改变。因此，  跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该属性（property）

也许现在的您觉得有点绕，我还是通过代码示例来说明问题

<input type="checkbox" checked id="test" value="梦之蓝">
    
    $("#test").click(function () {
        console.log($(this).attr("checked"));
        console.log($(this).prop("checked"));
    })

通过代码示例，您会发现，当复选框点击后，不管复选框是否已经是选中状态，attr() 方法始终返回 “checked”，而 prop() 方法能准确的返回当前复选框是否选中的 布尔值 true or false ，所以当您需要判断复选框是否已经选中时，切记，一定要使用 prop() 方法。从前端小白走过来的我，亲自踩过这个坑！还好这一跤不疼，我及时的发现并查阅API后得到了答案。

如果您已经阅读过我前面的文章，你会发现，我使用了 is() 方法来判断复选框是否已经被选中，不过我更推荐使用本篇文章所介绍的 prop() 方法来进行获取是否已选中，因为 is() 方法的功能远不止于此，后面的文章会详细介绍 is() 方法。

小编丝毫不客气的，毫无保留的将获取复选框是否选中的方法做了个合集，请看下面的代码：

$("#test").click(function () {
         console.log($(this).prop("checked"));   //属性
        console.log($(this).is(":checked"));    //选择器
        console.log($(this).get(0).checked);    //原生
    })

jQuery还有更多更加让您意想不到的方法，请持续关注 WEB前端梦之蓝 后面的文章哟！

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[jQuery]: https://blog.csdn.net/u013350495/article/details/82532987
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/508750d041034135b7ab3500695efd4a.png