2020年7月1日 星期三

jQuery .attr() vs .prop()

雖然已經習慣 vue.js 的雙向綁定,但難免要維護與救火,把一些東西慢慢筆記起來,之後就丟文章請接手的人自己看搂(誤~)。



大部分的網頁元素特性 jQuery 都有對應的函式來方便設定及取得,例如

$('foo').addClass('className'); 或是 $('foo').css({'color':'#fff'});


亦或使用 $('foo').attr('class', 'btn-success'); $('foo').attr('style', 'color:#fff'); 來達到效果 。


使用 prop 的情境大都是在有 checked 屬性的網頁元素身上,如 radio、checkbox 等


若沒有對這兩者差異進行了解,使用上還是會「矮油」。


先來看一下應用上的差異



以上例子可看出,prop 與 is 都是取到 bool 值,而 attr 則是取得 checked 字串,這是為何呢?由 jquery 官網說明:



在 1.6版之後 attr 方法只能取得 html 特性,就只能是字串,而prop 就都是bool 值


所以拿捏這個原則,下次遇到取值應該就不會混淆了吧。

沒有留言:

張貼留言