JQUERY 的 attr 和 prop 屬性的差別

最近寫程式常會使用 JQuery 來取得或設定 Element 的屬性，一開始覺得都用 attr 就好啦！為什麼還要有 prop 呢? 直到把 attr 用在 input 元素的 disable 或 checked 發生問題才去了解它們之間的差別。

這裡用一個較簡單的方式來說明(用我的理解表達，如有不正確歡迎指教！)，attr主要是用來取得或設定該物件的屬性，而這些屬性是在style中可以下 '=' 的，例如: width = '180px', color = '#777'...等等 。操作方法如下:

1. $('#test').attr('width');  //  取得id為test的寬度
2. $('#test').attr('width', '180');  //  設定id為test的寬度為180

而prop不同的地方在它主要是用來設定不可以下 '=' 的屬性，例如 disabled 或 checked...等。操作方法如下:

1. $('#test').prop('checked');  //  取得id為test是否被checked
2. $('#test').attr('checked', true);  //  設定id為test被checked

如果想知道更詳細的說明可以參考官方網站的Document:

1.attr: http://api.jquery.com/attr/

2.prop: http://api.jquery.com/prop/