jQuery学习之prop和attr的区别

最新推荐文章于 2025-04-18 09:36:44 发布

原创最新推荐文章于 2025-04-18 09:36:44 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #prop #attr

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在JQuery中使用.prop()与.attr()的区别，特别是在处理checkbox元素的checked属性时的不同表现。通过示例代码展示了两种方法如何分别返回布尔值和字符串值。

今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.

为什么jquery 1.6+增加了.prop()方法，因为在有些浏览器中比如说只要写disabled，checked就可以了，而有的要写成disabled ="disabled"，checked="checked"。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。
 以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

看些例子
<script>
        $(function () {
            var checked01prop = $('.check01').prop('checked');
            var checked01attr = $('.check01').attr('checked');
            console.log('checked01prop = ' + checked01prop);
            console.log('checked01attr = ' + checked01attr);

            var checked02prop = $('.check02').prop('checked');
            var checked02attr = $('.check02').attr('checked');
            console.log('checked02prop = ' + checked02prop);
            console.log('checked02attr = ' + checked02attr);

 </script>

<body>
    <!--checked = 'checked' 可以省略为checked-->
    <input type="checkbox" class="check01" checked>
    <input type="checkbox" class="check02">
</body>

         
       })
 运行结果如下：

显然，布尔值比字符串值让接下来的处理更合理。
如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。

大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled ="disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined

jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr，什么时候使用prop？？

   // 如果是自带属性 用prop
   // 自定义的用attr