首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作

jQuery attr()和prop()方法的区别

prop() 方法和 attr() 方法相似,都是用来获取或设置元素的 HTML 属性的,不过两者也有着本质上的区别。

jQuery 官方建议:具有 true 和 false 这两种取值的属性,如 checked、selected 和 disabled 等,建议使用 prop() 方法来操作,而其他的属性都建议使用 attr() 方法来操作。

举例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('input[type="radio"]').change(function(){
                var bool = $(this).attr("checked");
                if(bool){
                    $("p").text("你选择的是:" + $(this).val());
                }
            })
        })
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p></p>
</body>
</html>
预览效果如图 1 所示。
attr()方法的效果
图 1:attr() 方法的效果
分析
$().change(function(){
    ……
})
上面表示的是 jQuery 中的 change 事件,与 JavaScript 的 onchange 事件是一样的,我们在之后会详细介绍。

在这个例子中,我们其实是想通过$(this).attr("checked")判断单选框是否被选中,如果被选中,就获取该单选框的 value 值。可是运行代码后发现:完全没有效果!这是为什么呢?

实际上,对于表单元素的 checked、selected、disabled 这些属性,我们使用 attr() 方法是没法获取的,而必须使用 prop() 方法来获取。因此,我们把 attr() 方法替换成 prop() 方法就有效果了。

其实,prop()方法的出现就是为了弥补 attr() 方法在表单属性操作中的不足。记住一句话:如果某个属性没法使用 attr() 方法来获取或设置,改换 prop() 方法就可以实现。

所有教程

优秀文章