jQuery中操做屬性的方法attr與prop的區別

時間 2020-05-06

標籤 jquery 屬性方法 attr prop 區別欄目 JQuery 简体版

原文原文鏈接

attr 與 prop 均可以對某個屬性進行獲取和設置的操做，兩者的用法相同：網站

<script src = 'jQuery.js'></script>
<script>

    
    // attr:
    // 設置單個屬性
    $(element).attr(name,value);

    // 設置多個屬性
    $(element).attr(obj);

    // 獲取屬性
    $(element).attr(name);


    // prop:
    // 設置單個屬性
    $(element).prop(name,value);

    // 設置多個屬性
    $(element).prop(obj);

    // 獲取屬性
    $(element).prop(name);
</script>

用處和區別倒是不同的，對於返回值是布爾類型的屬性，如：disabled, checked只能使用 prop 進行操做，固然更大的區別在於，attr 操做的是寫在元素內的字面屬性，而 prop 操做的是元素的 DOM 屬性：spa

<body>

    // 以訪問網站的形式打開頁面

    // 例：假設文件在C盤中，上層主目錄文件夾爲 folder-min
    <img id="img" src="/folder/image.jpg" />

    <input id="check1" type="checkbox" checked="checked" />

    <input id="check2" type="checkbox" />
<script>
    $( '#img' ).attr( 'src' );  // 控制檯輸出："/folder/image.jpg"
    $( '#check' ).prop( 'src' );  // "http://folder-min/folder/image.jpg"

    $( '#check1' ).attr( 'checked' );  // checked
    $( '#check1' ).prop( 'checked' );  // true 或 false 取決於複選框狀態

    $( '#check2' ).attr( 'checked' );  // undefined
    $( '#check2' ).prop( 'checked' );  // true 或 false 取決於複選框的狀態
</script>
</body>

相關標籤/搜索