jquery升級到高版本之后新增了prop方法

平時我們?nèi)tml元素上的值都使用的是attr方法
取dom元素屬性直接獲取dom元素然后使用的屬性

1.attr

attr平時用的很多，對應(yīng)的是原生js的getAttribute和setAttribute；
按照我的理解，凡是你在html元素上能看到的屬性都可以使用attr去獲取和設(shè)置

<a id="test" name="test" href="#" data-action="action"  value="aaa" >
$("#a").attr("id");
$("#a").attr("name");
$("#a").attr("href");
$("#a").attr("data-action");
$("#a").attr("value");

2.prop

prop反映的是dom對象的屬性，所有attr屬性在dom屬性里都有對應(yīng)的數(shù)據(jù)
多數(shù)情況下prop和attr能返回同樣的值
有一個說法prop屬性是attr屬性通過某種邏輯計算后的結(jié)果
最明顯的例子就是checkbox

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
$("input").attr('checked');  //checked
$("input").prop('checked');//true/false

3.同名屬性

html元素和dom元素上會出現(xiàn)同名參數(shù)的情況
例如：

id

該參數(shù)在html上和dom上是一致的

document.getElementById("bbb").id="aaa";
document.getElementById("bbb").setAttribute("id","aaa");

其最終結(jié)果是一變都變，但是這是特例

name

document.getElementById("bbb").name="1111111"
document.getElementById("bbb").setAttribute("name","2222222")
console.log(document.getElementById("bbb").name)//1111111

雖然同名，但是不是一個屬性，存儲的位置不同
attr相關(guān)連的會顯示在html上，直接屬性不會
大多數(shù)新增屬性都會是這個特性（原dom對象上沒有的屬性）

value

這個屬性也有點特殊

<input id="aaa" value="1">
console.log($("#aaa").val()) //1
console.log($("#aaa").prop("value")) //1
$("#aaa").val("2")
console.log($("#aaa").val()) //2
$("#aaa").attr("value",3)
console.log($("#aaa").val()) //2
console.log($("#aaa").attr("value")) //3
console.log($("#aaa").prop("value")) //2

html元素上的value屬性作為初始值，在沒有給dom對象的value屬性賦值的時候，通過val()方法和prop方法取值的時候返回的是都attr的屬性，一旦賦值就不會在取attr屬性
所以在存在value屬性的html標簽上面可以使用attr的value屬性賦初始值

disabled，readonly, checked

<input id="aaa" value="1">
$("#aaa").attr("disabled")//undefined
$("#aaa").attr("prop")//false

$("#aaa").attr("disabled","disabled");
$("#aaa").attr("disabled")//disabled
$("#aaa").attr("prop")//true

$("#aaa").prop("disabled",true);
$("#aaa").attr("disabled")//disabled
$("#aaa").attr("prop")//true

readonly, checked與disabled一樣，只不過各自的文本值為readonly與 checked