JQuery中的prop()方法的使用

ゝ一世哀愁。 2021-07-24 13:31 453阅读 0赞

在之前的 JQuery 版本中，都是使用 attr() 来访问对象的属性，比如取一个图片的 alt 属性，就可以这样做 $("\#img").attr("alt")；但是在某些时候，比如访问 input 的 disabled 属性的时候，会有些问题。在有些浏览器里，只要写了 disabled 属性就可以，有些则要写：disabled = “disabled”。所以，从1.6版开始，JQuery 提供新的方法 prop() 来获取这些属性。使用 prop() 的时候，返回值是标准属性：true/false，比如：$("\#checkbox").prop("disabled")，不会返回“disabled”或者“”，只会返回 true/false。当然赋值的时候也是如此。这样，便统一了所有操作，无论是从语法还是语义上。

那么，哪些属性应该用 attr() 访问，哪些应该用 prop() 访问呢？

第一个原则：只添加属性名称该属性就会生效应该使用 prop() ；

第二个原则：只存在 true/false 的属性应该使用 prop() ；

按照官方说明，如果是设置 disabled 和 checked 这些属性，应使用 prop() 方法，而不是使用 attr() 方法。

> **上述文案：**摘自书籍《锋利的jQuery（第2版）》中的内容。

** 【示例】**JQuery实现复选框的全选和全不选功能，使用 prop() 方法设置属性值。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery中的prop()方法的使用</title>
        <meta name="author" content="pan_junbiao的博客">
    </head>
    <body>
        <h3>请选择用户信息：</h3>
        <input type="checkbox" name="checkItem" value="1"/> pan_junbiao的博客_01<br>
        <input type="checkbox" name="checkItem" value="2"/> pan_junbiao的博客_02<br>
        <input type="checkbox" name="checkItem" value="3"/> pan_junbiao的博客_03<br>
        <input type="checkbox" name="checkItem" value="4"/> pan_junbiao的博客_04<br>
        <input type="checkbox" name="checkItem" value="5"/> pan_junbiao的博客_05<p>
        <input type="button" value="全选" id="checkAll"/>
        <input type="button" value="全不选" id="noCheckAll"/>
    </body>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function(){
            //全选
            $("#checkAll").click(function(){
                $("[name=checkItem]:checkbox").prop("checked",true);
            });
    
            //全不选
            $("#noCheckAll").click(function(){
                $("[name=checkItem]:checkbox").prop("checked",false);
            });
        });
    </script>
    </html>

**执行结果：**

![2020072917023694.jpg][]

从示例中可以看出，使用的是 prop() 方法来设置复选框的属性值，而不使用 attr() 方法，这是因为如果使用 attr() 方法会存在浏览器的兼容问题。

[2020072917023694.jpg]: /images/20210724/f2b62f661a0f44128c95bde2dcb43a1a.png