之前在維護一些2013年的 legacy code 時， console 往往跳一堆警告出來，發現在那 jQuery 大行其道的單純美好年代，有些用法已經被現代瀏覽器認為不潮了要改進了，於是整理一下前人的時代眼淚及符合 modern web 的修正方法，相單契合本網誌大標歷史共業，希望以後修舊 code 會少點 debug 時間…

$.toJSON()

這是一個jQuery第三方套件用來將object轉成JSON字串，可能當時只能靠 plugin 處理，但現在JS原生就已內建JSON.stringify()，這應該不用多想了吧。

jQuery .attr()

若有機會用 jQuery 1.6以上版本，還是盡量改用.prop()吧，參考這兩篇，避免一些預料外的錯誤：

像是 checkbox 如果沒有設置checked，user的對其的操作用.attr()是抓不到的。而.prop()也只能判斷有無圈選，並不知道明確選了幾個，這時 selecor 的後綴就能派上用場：

jQuery .bind() 與 .delegate()

為不同實作細節的事件綁定 function，但在3.0版之後都被棄用了，取而代之的是1.7版就有的 .on()跟.off()，可以看這篇差異剖析解釋得很清楚。

1
2
3
4
5
6
7
8
9
10
//bind
$('a').bind('click', myHandler);
$('a').on('click', myHandler);

$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);

//delegate
$('.comment').delegate('a.add', 'click', addNew); 
$('.comment').on('click', 'a.add', addNew);

<a id="btn_add" class="btn" href="#" onclick="add()">

通常是用 Bootstrap，為了做顆按鈕只用來觸發事件不導向，只是按了以後 url 就多了#，長網頁還會跳回最上面，為什麼不用<button>呢…

要讓它不導向，除了常用的href="javascript:void(0)"，還有另一種直接在 event handler 裡小修改：

1
2
3
4
5
function add(e){
  ...
  e.preventDefault(); //防止<a>的預設(導向)行為 
  return false; // 或是於最後回傳false( 兩者選一，這行適合不需回傳的 function )
}