JQuery中的prop()方法的使用

在之前的 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>

执行结果：

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

JQuery中的prop()方法的使用

猜你喜欢