jquery的attr()與prop()方法的區別

阿新 • • 發佈：2019-01-22

結論

對於HTML元素本身就帶有的固有屬性，處理時使用prop方法。
對於HTML元素自定義屬性，處理時使用attr方法。

固有屬性指的是HTML標籤原生支援的屬性，如a標籤原生支援的屬性有：download、href、hreflang、media、rel、target、type，這些屬性是W3C組織確定的，可通過W3School查詢.
自定義屬性指的是自己為HTML標籤定義的屬性，如：<a href="#" data-event="delete">刪除</a>中的data-event即為自定義屬性

使用場景

<body>
    <form 
>
        <input type="checkbox" name="hobby" value="movie" /> 電影
        <input type="checkbox" name="hobby" value="music" checked="checked" /> 音樂
        <select name="主食">
            <option value="rice">米飯</option>
            <option value="noodles" selected="selected" 
>麵條</option>
        </select>
    </form>
    <button id="btn1">測試attr</button>
    <button id="btn2">測試prop</button>

    <script type="text/javascript" src="js/jquery.min.js" ></script>
    // 上述js請改為你本地的
    <script>
        $('#btn1').click(function 
(){
            console.log($('[value="movie"]').attr('checked')); // undefined
            console.log($('[value="music"]').attr('checked')); // checked
            console.log($('[value="rice"]').attr('selected')); // undefined
            console.log($('[value="noodles"]').attr('selected')); // selected
        });
        $('#btn2').click(function(){
            console.log($('[value="movie"]').prop('checked')); // false
            console.log($('[value="music"]').prop('checked')); // true
            console.log($('[value="rice"]').prop('selected')); // false
            console.log($('[value="noodles"]').prop('selected')); // true
        });
    </script>
</body>

對於checked或者selected屬性，請使用prop方法，他返回的是選中狀態：true或者false，使用attr方法，返回的是checked或者selected屬性的屬性值，如果沒有新增該屬性，返回undefined，如上面的例子。

jquery的attr()與prop()方法的區別

結論

使用場景

jquery之attr與prop方法的區別

jquery的attr()與prop()方法的區別

java static 方法與普通方法區別

JQuery中Attr與Prop的區別

Android開發——diglog cancel與dismiss方法區別

Jquery中attr()與prop()的區別

Jquery中.attr與.prop的區別

jquery中append與appendTo方法區別

map containsKey與get方法區別

Jquery中attr與prop的區別詳解

wait()與sleep()方法區別

hibernate query的list與iterate方法區別

Java中 == 號與equals()方法區別詳解

執行緒：wait方法與sleep方法區別

java中類方法與物件方法區別

Hibernate單表操作（六）——查詢記錄get()與load()方法區別

Map介面containsKey與get方法區別

http協議中的get與post方法區別分析

ios開發中類方法與例項方法區別以及self有什麼不同

java中list的add與addall方法區別

jquery的attr()與prop()方法的區別

結論

使用場景

相關推薦