jQuery, I LOVE YOU~~~

不久之前，我低調且不經意地(謎之聲: 在Blog公佈? 好"低調"哦~~)透露了與jQuery正在交往的消息，換言之:

ASP.NET AJAX Client Library，你是個好人...
但jQuery看來可以讓我少奮鬥十幾個小時，所以...

在我的Web開發工作裡，Javascript佔了相當的比重。

雖然ASPX的Client-Side Event/ASP.NET AJAX Update Panel，幾乎可以讓你用C#/VB.NET搞定大部分的Web功能，偏偏自己有效能潔癖，對Response Time及Round-Trip Bandwidth斤斤計較，於是用Client-Side手段解決成了唯一的方案。

Javascript雖然彈性無窮，但寫來總覺又臭又長，少了.NET裡一大票的Base Class Library及好用的現成Method，一堆在.NET裡一行打死的功能都要DIY寫個數十上百行，再加上還要考慮瀏覽器相容的問題，同一件事要為IE寫一段，FireFox寫另一段，令人煩燥到不行。在我的眼裡，如果用C#寫Code是開著轟炸機掃平目標，寫Javascript就好像拿著小步槍在廢棄的城市裡進行巷戰。

Javascript Framework可以替我們處理掉一些跨瀏覽器的問題，也提供一些便利化的函數，的確可以省去不少惱人的瑣碎工作。坊間可用的免費Framework有很多，例如: Prototype、jQuery, Mootools...等等(Wiki上有列表整理)，過去我的想法是借重ASP.NET AJAX Client Library，一來它系出名門，二來學到的技能可以繼續應用在ASP.NET AJAX Control開發上，一魚兩吃。

不過，無意間邂逅jQuery之後，馬上被它的簡潔精巧深深吸引，花了點時間學習了解，並試做過幾個介面，就不禁愛上了她，決定與她一起在Javascript巷戰中出生入死。

不過，要先標註一下警語，jQuery並不好學，語法簡潔、設計精巧，意味著我們能用短短幾行Code搞定過去數十上百行Code才能做到的事；但換個角度想，要能做"幾行換百行"有點像智力測驗，得通曉各種可用的函數工具，加上腦筋狂轉才能想出漂亮的解法。在開發語言裡，有個很接近的比喻---Regular Expression，二者乍看都像天書，但因為可以省下可觀的Coding量，還是吸引了很多人付出時間心力去學習了解。

在我的初步心得中，認為jQuery以下這幾點特性最具魔力:

1. 用jQuery Wrapper就地升級:
   所有的元素經過jQuery Wrapper的包裝，馬上就可直接引用jQuery額外提供的豐富功能。
   例如: 用$()一包，就可以$(myInput).hide()，立即取代myInput.style.display = "none"一長串Code。
2. Wrapper Set批次處理:
   Wrapper裡包的可以是單一元素，也可以是上百個元素組成的陣列，後面接上的Method則會以迴圈方式套用到陣列裡的每個元素上。例如: $("p.clsMenuItem").hide()可以一口氣將整個網頁下所有的class="clsMenuItme"的<p>都隱藏起來。
3. 威力強大的Selector:
   用搞過CSS的人相信都用過div p.clsName這類Selector去找【被包在DIV裡class="clsName"的P】。我之前常常想，為什麼CSS可以，在Javascript裡只能用document.all這種笨方法自己過濾。jQuery最大的功德，應該就是讓Javascript也支援CSS Selector語法搜尋網頁元素。應用CSS Selector可以讓我們快速定位，只用一步就抓到指定的元素，比起過去要自己跑迴圈逐一檢查比對，或是千方百計為元素加上特定ID都省事許多。
   除了CSS Selector，jQuery也支援XPATH查詢，不過我覺得大部分的情況下，單單CSS Selector就綽綽有餘。
4. 接接樂大絕技:
   生命不夠浪費在打字上，所以大部分的jQuery Wrapper Method執行完會繼續將本身當成結果傳回，所以馬上又可以接著呼叫下一個Method。
   例如:
   把ID="divHint"的DIV設成黃色背景、寬度300px並指定內容文字，原本至少要寫四行:
   var d = document.getElementById("divHint");
   d.style.backgroundColor="yellow";
   d.style.width = "300px";
   d.innerHTML = "This is a hint";
   jQuery用接接樂 $("div#divHint").css("background-color", "yellow").width("300px").html("This is a hint"); 一行就搞定。
5. 事件模型的簡化:
   ASP.NET AJAX Client Library裡有 $addHandler可用，但是jQuery裡的寫法更簡單:
   $("div").click(function() {
        alert("Div [ID=" + this.id + "] is clicked!");
   });
   一口氣就為所有的事件加上Click事件，而其中this可以用來存取觸發事件的對象。
   另外還有好幾種巧妙的事件掛法，例如: one(type, data, fn)可以掛上按一次就作廢的事件、hover(over, out)可以同時設定onmouseover及onmouseout、toggle(even, odd)則可設定Click與下次Click執行不同的事件。
6. 動態建立HTML元素:
   以前要用Javascript動態建立HTML元素得用createElement加上一堆有的沒的步驟，是件苦差事；在jQuery裡新增HTML元素則非常簡單。例如: 在<span id="spnX">後方接上一個<img>可以用 $("#spnX").after("<img src=\"xxx.gif\" />"); 輕鬆搞定!!

除了上述的特性外，jQuery用Extender擴充新功能的概念挺不賴的，而且已有不少Plug-In可以用，資源頗豐。AJAX的部分，如果是單純的GET/POST取值，可以用極簡短的寫法幾行打死(跟我設計函數時的理念很像)，也都深得我心。

以下先列出一些資源，稍後有時間我再分享幾個小範例，讓大家瞧瞧她的美色。

• jQuery網站
• 程式下載: 共分為三個版本Packed(壓縮版，檔案最小，但需要在Client端花時間解壓縮)、Manified(經過重新排版，檔案比Packed版大，適合正式站台用)、Uncompressed(排版維持原始格式，方便Debug及Trace Code，檔案最大)
• 官方說明文件(但我強烈推薦另一個整理得更有條理的說明文件: Visual jQuery)
• 教學文件、簡體中文版的入門教學: 1 2 3
• Simon Willison: jQuery小抄, jQuery In 15 Minutes投影片
• jQuery Plugin大全