jQuery之美——attr()与prop()

上篇回顾：jQuery之美——表单对象属性

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

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

如果您现在还像我以前一样的话，推荐您可以阅读《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）

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

<!-- html -->
<input type="checkbox" checked id="test" value="梦之蓝">
<!-- js -->
$("#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() 方法。

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

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

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

下篇预告：jQuery之美——筛选之is()

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦

jQuery之美——attr()与prop()

猜你喜欢