Jquery使用小結-prop與attr的差別

官方的定義

1、attr() 方法設定或傳回被選元素的屬性和值。

2、prop() 方法設定或傳回被選元素的屬性和值。

差別

1、對象不同

prop() 方法用于DOM 屬性(JS對象，Element類型)； attr() 方法用于Html屬性(DOM元素所對應的文檔節點上的屬性)。

簡單點說就是prop()隻能用在dom本來就有的屬性，attr()可以用在自定義屬性上

<a id="a-test" class="test" data="go"></a>
           

$("#a-test").prop("class")//test
$("#a-test").prop("data")//undefined
$("#a-test").attr("class")//test
$("#a-test").attr("data")//test
           

2、屬性值不同

attr()設定屬性值為字元串；prop() 可以為任意類型

    <button>按鈕</button>
    <input type="checkbox" name="" id="" checked="checked">
           

$('input').attr('checked')// "checked"
    $('input').prop('checked')  // true
     $('button').on('click',function(){
            console.log(11)
            if ($('input').prop('checked')) {
                $('input').prop('checked',false);
            }else{
                $('input').prop('checked',true);
            }
        })