一、背景
在編寫使用高版本[ jQuery 1.6 開始新增了一個方法 prop()]的jquery外掛進行編寫js程式碼的時候，經常不知道dom元素的attr和prop方法到底有什麼區別？各自有什麼應用場景，什麼時候使用attr方法更合適？什麼時候使用prop方法更加方便？今天我就結合自己平常的使用來談談這些問題以及我個人的理解。
二、舉例說明
1.我們經常會在自己的頁面中使用a標籤來進行連結到不同的頁面
1 <a id="link" href="http://www.baidu.com" target="_black" class="btn">百度主頁</a>
在上面這個例子中，href、target、class、id這些dom屬性，是a元素本身就具有的。也是W3C裡本身就包含的幾個屬性，換句話說是IDE中能夠自動提示的屬性，這些屬性就被稱為dom元素的固有屬性，這種情況下，我建議使用prop方法。
2.我們經常會使用a標籤進行觸發自定義事件
1 <a href="#" id="link" action="delete">刪除文章</a>
這個例子中該DOM元素的屬性有：href、id、action.那麼很明顯前兩個是該dom元素的固有屬性，最後一個是我們自己定義的屬性。a標籤中的固有屬性中並不包含該屬性。這些屬性被稱為dom元素的自定義屬性，這種情況下，我建議使用attr方法。此時若使用prop方法進行設定和獲取該屬性的值時就會返回undefined值。
3.我們經常會使用到checkbox/radio/selector來進行選擇
1 <input type="checkbox" id="se" value="3">是否選中 2 <input type="radio" id="sel" checked="checked"/>是否選中 3 <select id="selector"> 4 <option id="op" value="1" selected="selected">選擇1</option> 5 <option value="2">選擇2</option> 6 <option value="3">選擇3</option> 7 <option value="4">選擇4</option> 8 </select>
像上面這個例子中的checkbox、radio、select等元素的選中屬性"checked"和"selected"，這些屬性也是dom元素的固有屬性，因此使用prop方法才能正確的進行獲取和設定。
$("#se").prop("checked") == false
$("#sel").prop("checked") == true
$("#op").prop("selected") == true
如果使用attr方法會出現下面的結果
$("#se").attr("checked") == 'undefined'
$("#sel").attr("checked") == 'checked'
$("#op").attr("selected") == 'selected'
但網上也有說官方的建議是：具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
以上是個人理解，歡迎提出不同意見哈~