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