JQuery中attr方法和prop方法的區別
attr和prop的定義
該方法用於獲取或設置被選元素的屬性值。
需要獲取屬性值時，該方法返回第一個匹配元素的值
需要設置屬性值，該方法爲目標元素添加一個或多個屬性/值對
從定義的角度無法看出兩個方法的具體區別。
以button標籤作爲案例分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery中attr和prop的區別</title>
<script type="" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>JQuery中attr和prop的區別</p>
<input id="btnId" type="button" onclick="btnTest()" value="button value" testProperty="testProperty value"/>
<input id="inputId" type="text" onclick="inputTest()" value="Try it" testProperty="testProperty value"/>
<input id="radioId" type="radio" value="Radio"/>
<p id="demo"></p>
<input id="btnId1" type="button" onclick='changDefaultPropertyValue1($("#demo1"))' value="修改標籤自帶屬性的值"/>
<p id="demo1"></p>
<input id="btnId2" type="button" onclick='changDefaultPropertyValue2($("#demo2"))' value="修改標籤非自帶屬性的值"/>
<p id="demo2"></p>
<input id="btnId3" type="button" onclick='changDefaultPropertyValue3($("#demo3"))' value="動態添加標籤自帶屬性值"/>
<p id="demo3"></p>
<input id="btnId4" type="button" onclick='changDefaultPropertyValue4($("#demo4"))' value="動態添加非標籤自帶屬性值"/>
<p id="demo4"></p>
<input id="btnId5" type="button" onclick='changDefaultPropertyValue5($("#demo5"))' value="Radio標籤測試結果"/>
<p id="demo5"></p>
<script>
function btnTest(){
alert("This is button onclick function alert.")
}
function inputTest(){
alert("This is input onclick function alert.")
}
var demoObj = $("#demo")
var btnIdObj = $("#btnId")
demoObj.append("Button Test: </br>")
demoObj.append("value 是button標籤自帶的屬性，attr和prop的效果：</br>")
demoObj.append('$("#btnId").attr("value"): ' + btnIdObj.attr("value") + "</br>")
demoObj.append('$("#btnId").prop("value"): ' + btnIdObj.prop("value") + "</br>")
demoObj.append("testProperty 不是button標籤自帶的屬性(不是通過js動態添加)，attr和prop的效果：</br>")
demoObj.append('$("#btnId").attr("testProperty"): ' + btnIdObj.attr("testProperty") + "</br>")
demoObj.append('$("#btnId").prop("testProperty"): ' + btnIdObj.prop("testProperty") + "</br></br>")
function changDefaultPropertyValue1(obj){
obj.html("")
obj.append("使用jquery修改標籤自帶屬性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("value", "attr"): </br>')
btnIdObj.attr("value", "attr")
obj.append('$("#btnId").attr("value"): ' + btnIdObj.attr("value") + "</br>")
obj.append('$("#btnId").prop("value"): ' + btnIdObj.prop("value") + "</br></br>")
obj.append('$("#btnId").prop("value", "prop"): </br>')
btnIdObj.prop("value","prop")
obj.append('$("#btnId").attr("value"): ' + btnIdObj.attr("value") + "</br>")
obj.append('$("#btnId").prop("value"): ' + btnIdObj.prop("value") + "</br>")
}
function changDefaultPropertyValue2(obj){
obj.html("")
obj.append("使用jquery修改非標籤自帶屬性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("testProperty", "attr"): </br>')
btnIdObj.attr("testProperty", "attr")
obj.append('$("#btnId").attr("testProperty"): ' + btnIdObj.attr("testProperty") + "</br>")
obj.append('$("#btnId").prop("testProperty"): ' + btnIdObj.prop("testProperty") + "</br></br>")
obj.append('$("#btnId").prop("testProperty", "prop"): </br>')
btnIdObj.prop("testProperty","prop")
obj.append('$("#btnId").attr("testProperty"): ' + btnIdObj.attr("testProperty") + "</br>")
obj.append('$("#btnId").prop("testProperty"): ' + btnIdObj.prop("testProperty") + "</br>")
}
function changDefaultPropertyValue3(obj){
obj.html("")
obj.append("使用jquery動態添加標籤自帶屬性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("style", "color:red;"): </br>')
btnIdObj.attr("style", "color:red;")
obj.append('$("#btnId").attr("style"): ' + btnIdObj.attr("style") + "</br>")
obj.append('$("#btnId").prop("style"): ' + btnIdObj.prop("style") + "</br></br>")
obj.append('$("#btnId").prop("style", "color:blue;"): </br>')
btnIdObj.prop("style","color:blue;")
obj.append('$("#btnId").attr("style"): ' + btnIdObj.attr("style") + "</br>")
obj.append('$("#btnId").prop("style"): ' + btnIdObj.prop("style") + "</br>")
}
function changDefaultPropertyValue4(obj){
obj.html("")
obj.append("使用jquery動態添加非標籤自帶屬性值，attr和prop效果：</br>")
obj.append('$("#btnId").attr("xxx", "attr動態添加非標籤自帶屬性值"): </br>')
btnIdObj.attr("xxx", "attr動態添加非標籤自帶屬性值")
obj.append('$("#btnId").attr("xxx"): ' + btnIdObj.attr("xxx") + "</br>")
obj.append('$("#btnId").prop("xxx"): ' + btnIdObj.prop("xxx") + "</br></br>")
obj.append('$("#btnId").prop("xxx", "prop動態添加非標籤自帶屬性值"): </br>')
btnIdObj.prop("xxx","prop動態添加非標籤自帶屬性值")
obj.append('$("#btnId").attr("xxx"): ' + btnIdObj.attr("xxx") + "</br>")
obj.append('$("#btnId").prop("xxx"): ' + btnIdObj.prop("xxx") + "</br>")
}
function changDefaultPropertyValue5(obj){
obj.html("")
obj.append("radio標籤測試attr和prop效果：</br>")
obj.append('$("#radioId").attr("checked"): ' + $("#radioId").attr("checked") + "</br>")
obj.append('$("#radioId").prop("checked"): ' + $("#radioId").prop("checked") + "</br></br>")
obj.append('$("#radioId").attr("checked", true): </br>')
$("#radioId").attr("checked", true)
obj.append('$("#radioId").attr("checked"): ' + $("#radioId").attr("checked") + "</br>")
obj.append('$("#radioId").prop("checked"): ' + $("#radioId").prop("checked") + "</br></br>")
obj.append('$("#radioId").prop("checked", false): </br>')
$("#radioId").prop("checked", false)
obj.append('$("#radioId").attr("checked"): ' + $("#radioId").attr("checked") + "</br>")
obj.append('$("#radioId").prop("checked"): ' + $("#radioId").prop("checked") + "</br>")
}
</script>
</body>
</html>
總結
該屬性是HTML標籤自帶的屬性時：
非使用js動態添加：attr和prop無區別
使用js動態添加：attr和prop均可設置目標標籤屬性值，但attr方法返回設置的屬性值，prop返回屬性的聲明。
該屬性不是HTML標籤自帶的屬性時：
非使用js動態添加：attr方法返回該屬性的值，prop返回undefined
非使用js動態添加修改： 返回各自修改後的值，未修改前返回同上
使用js動態添加：attr和prop均可添加屬性值，返回值爲各自設置的值，若未設置則返回undefined
以radio標籤作爲案例分析
代碼如上
結論：
attr 類似於js中attribute的作用，用於取得值是HTML文檔字面量值，prop類似於property是取得計算結果，property改變並不影響attribute字面量，但attribute改變會影響property的計算值。
對於checked, readonly, multiple, selected等這些需要計算後才能得知結果的屬性，直接用prop就行。未初始化這些屬性值時attr返回undefined，prop返回false。
attribute和property的區別可參考：
https://www.cnblogs.com/dolphinX/p/3348582.html