***起因***
之前寫過jQuery的val()跟text()概念時，提過因為剛接觸jQuery是直接下場實作...前人種樹後人跟著種樹(?)，知其然而不知所以然XD
後來才慢慢把概念補上，其中一個就是attr()跟prop()。
一開始多是使用attr()，但在幾次發現無法取到自己需要的值之後，才開始跟prop()打架。
那到底兩者具體區分為何呢? 利用今天來記述一下~
另外強調，必須是Jquery的元件才能使用以下jquery的方式取得屬性。
***attr & prop***
attr()是在 jQuery 1.0 版時就有的方法，直到 jQuery 1.6 時才加入prop()。
而兩者在字面上的意思都是"屬性"，光是字面上判讀實在讓人摸不著頭緒。
但其實很簡單的分別是，attr()/attribute指的是Html元素上的屬性，普遍會看到的像是class、name跟等等(如下)
prop()/property則是在DOM tree上的屬性(看到有翻譯稱之為特性或DOM屬性)
因此attribute會是初始值，不會更改。而property會是可變的、動態的(dynamic)。
難怪以前常常遇到執行elem.attr('checked','checked')反覆幾次就沒有反應了XD
***結論***
如果在attribute跟property個別增加成員，會是不共通的。
且相較之下，prop的效能更高，因為attr需要訪問DOM屬性節點。
至於何時用attr，何時用prop...雖然因為歷史因素，某些狀況使用attr據說還是可以運作。但還是要考慮到語意與其定義(跟未來XD)
總之依照很多前輩的說法跟自己在開發的習慣，只要是true or false的，應該就都用prop囉~
(據說jQuery有提供一張attr / prop的使用對照表，還是有疑問的人能找找)
此外attr()跟prop()歷史上的小糾葛(ver1.6前後、1.6.1)，在這邊就不詳述了~
有興趣的人歡迎參閱 :
|
補充 : 在JavaScript，可以使用document.getElementById(elemID).value = '要修改的值'，來設定property document.getElementById(elemID).setAttribute('value', '要修改的值')，則修改Attribute |
資料來源 :
留言列表
{{ article.title }}