軟體主廚的程式料理廚房

這個不要臉的 jQuery 擴充函式 - jquery-model 是在下的拙作，原本是我個人用 jQuery 在開發前端程式時所使用的，同事也拿去用了之後受到好評，應該也可以推薦給大家，它不是一個什麼高大上的東西，只是讓我在將 UI 上的內容兜成 JSON 物件時可以少寫一些程式碼。

之前有一個案子的使用者有一個特別的要求，因為在網頁上瀏覽的圖片大小稍微大了一點，在行動裝置上網路不穩定的時候，會載入比較久的時間，所以使用者就想說能不能在圖片顯示前，先顯示一個 Loading 的畫面，等待圖片下載完成之後再顯示出來？

jQuery 中有一對關於所有 AJAX Requests 開始及結束的事件 - ajaxStart 及 ajaxStop，除非是完全靜態的頁面，不然一個引用了 jQuery 的網頁或多或少都會去用它的 $.ajax() 來呼叫 Web Api，那麼這一對事件一定會被觸發，我們剛好可以利用來做一個頁面的載入等待機制。

儘管前端三雄（Angular、React、Vue）討論熱度強烈，但是前端老馬 - jQuery 的市佔率仍舊是名列前矛，在 jQuery 中常用的安插 DOM 元件的方法有這八個：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()，使用起來時常會讓我感到混亂，這篇文章就用圖解的方式做個記錄，來說明每個方法的差異。

這次要來跟大家分享自定義可傳入參數的 jQuery Filter，我們在使用 jQuery 的 selector 時，多多少少會使用到一些內建的 Filter，像是 :odd、:even、...等等，但是難免有時候會覺得不太夠用，比如說我要過濾出 Attribute 為 abc 開頭的 Element，這個就勢必得自己另外寫了，那麼我就利用這個例子來跟大家介紹在 jQuery 如何自定義一個可傳入參數的 Filter？

jQuery.fn.extend() 及 jQuery.extend() 這兩個方法存在已久，或許是因為陌生、也或許是因為很多時候我們都是直接使用別人寫好的 Library，以致於我們很少碰到這兩個方法，但是其實這兩個方法使用起來並不困難，以下我透過我寫的兩個擴展來說明。