jQuery.prop()和 jQuery.attr()方法同樣都能夠添加屬性，但是也是有區(qū)別的，一般attr()用的比較頻繁，但是有些情況用prop()更為方便。
基本的使用：
<style>
.bg{
width:200px;
height:200px;
background-color:red;
}
.bd{
border:1px solid #000;
}
</style>
<body>
<div></div>
</body>
<script>
$(function(){
$("div").attr("class","bg");//樣式加載成功
console.log($("div").attr('class'));//bg
// $("div").prop("class",'bd');//這樣會替代掉.bg
console.log($("div").prop("class"));
});
</script>
那么，什么時候使用attr()，什么時候使用prop()？
1.添加屬性名稱該屬性就會生效應(yīng)該使用prop();
2.是有true,false兩個屬性使用prop();
3.其他則使用attr();
如下實例，當(dāng)checked沒有在標(biāo)簽中定義的時候，prop就能夠獲取屬性的值。
<body>
<input type="checkbox">
<lable>復(fù)選框</lable>
</body>
<script>
$(function(){
console.log($("input").attr("checked"));//undefined attr是去標(biāo)簽中尋找該屬性
console.log($("input").prop("checked"));//false prop直接獲取屬性內(nèi)容
});
</script>
checked是true和false時，attr返回屬性名，prop返回屬性的值
<body>
<input type="checkbox" checked="true" aaa="bbb">
<lable>復(fù)選框</lable>
</body>
<script>
$(function(){
console.log($("input").attr("checked"));//checked 是true和false時，attr返回屬性名
console.log($("input").attr("aaa"));//bbb 不是true和false時，返回該屬性的值
console.log($("input").prop("checked"));//false prop直接獲取屬性內(nèi)容
});
</script>
以上例子看起來還是prop比較直接一點，可以考慮多用用。
補充：JavaScript的getAttribute和 jQuery.attr()的問題
首先看看JavaScript的getAttribute和 jQuery.attr()的差別，我寫了兩個例子，可以很明確的看出差別：
jQ加載的庫是<script src="./js/jquery-1.7.2.js"></script>
<body>
<input type="text" value="1">
</body>
<script>
$(function(){
console.log($("input").val());//1
console.log($("input").attr("value"));//1
var timer = null;
timer = setInterval(function(){
console.log($("input").val());//重新輸入的值
console.log($("input").attr("value"));重新輸入的值
},2000);
});
</script>
<body>
<input id="amount" type="text" value="1">
</body>
<script>
document.addEventListener("DOMContentLoaded",function(){
var oV = document.getElementById("amount");
console.log(oV.value);//1
console.log(oV.getAttribute("value"));//1
setInterval(function(){
console.log(oV.value);//重新輸入的值
console.log(oV.getAttribute("value"));//1
},2000);
},false);
</script>
以上兩個例子中g(shù)etAttribute不能夠直接獲取改變后的value值，只能獲取初始值，而 jQuery.attr()可以；
下面看看jQuery.data()方法
<body>
<div></div>
</body>
<script>
$(function(){
$("div").data("aaa","bbb");
console.log($("div").data('aaa'));//bbb
console.log($("div").attr('aaa'));//undefined
});
</script>
加在data上面的數(shù)據(jù)只有data能夠取到，相當(dāng)于所有的data上面的數(shù)據(jù)都在一起，方便保存和使用。
$(function(){
$("div").data("aaa","bbb");
$("div").attr("aaa","ccc");
console.log($("div").data('aaa'));//bbb
console.log($("div").attr('aaa'));//ccc
});
盡管變量名相同的情況下，也不會受到影響。
