jQuery attr()和prop()方法的區別

2020-07-16 10:05:24
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() 方法的效果