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以下這幾點特性最具魔力:
- 用jQuery Wrapper就地升級:
所有的元素經過jQuery Wrapper的包裝，馬上就可直接引用jQuery額外提供的豐富功能。
例如: 用$()一包，就可以$(myInput).hide()，立即取代myInput.style.display = "none"一長串Code。 - Wrapper Set批次處理:
Wrapper裡包的可以是單一元素，也可以是上百個元素組成的陣列，後面接上的Method則會以迴圈方式套用到陣列裡的每個元素上。例如: $("p.clsMenuItem").hide()可以一口氣將整個網頁下所有的class="clsMenuItme"的<p>都隱藏起來。 - 威力強大的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就綽綽有餘。 - 接接樂大絕技:
生命不夠浪費在打字上，所以大部分的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"); 一行就搞定。 - 事件模型的簡化:
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執行不同的事件。 - 動態建立HTML元素:
以前要用Javascript動態建立HTML元素得用createElement加上一堆有的沒的步驟，是件苦差事；在jQuery裡新增HTML元素則非常簡單。例如: 在<span id="spnX">後方接上一個<img>可以用 $("#spnX").after("<img src=\"xxx.gif\" />"); 輕鬆搞定!!
除了上述的特性外，jQuery用Extender擴充新功能的概念挺不賴的，而且已有不少Plug-In可以用，資源頗豐。AJAX的部分，如果是單純的GET/POST取值，可以用極簡短的寫法幾行打死(跟我設計函數時的理念很像)，也都深得我心。
以下先列出一些資源，稍後有時間我再分享幾個小範例，讓大家瞧瞧她的美色。