JQuery 基本概念

自從jQuery被微軟選秀入宮採納應用於未來產品之後，從原本Javascript老鳥才會識貨相挺的另類神兵利器，忽然一夕間傳遍鄉里，老幼皆知。不過我相信仍有不少人對jQuery十分陌生，這篇文章主要還是讓有寫過JavaScript，但是不曾碰過JQuery的人。 讓你對JQuery的用途有個概念。

jQuery 是一套 JavaScript 的 Library，因此，你必須稍具 JavaScript 的基礎，至少寫過一些 JavaScript 才比較容易上手，並且看得懂後續的教學。jQuery 的核心程式並非包山包海、什麼都可以幫你做，相反地，jQuery 主要是用在 DOM 文件的操作，包含「快速選取元素(Element)」並且「做一些事情」，快速選取元素可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。

以上看得出來 jQuery 是針對 JavaScript 內在不足的地方加以增進，你仍然需要自己寫一些程式來完成你需要的各種功能，不同的是，正確地使用了 jQuery 可以讓你的程式碼更精簡、更優雅的表達出來，這在後續的範例中可以看到，更重要的是，應該也會讓你更快速的開發出你要的功能。

或許你會想說，在這個 Web 2.0 的時代，我需要多點漂亮、絢麗的 Widgets 來裝飾我的網站，就像 Yahoo UI 或 ExtJS 提供的那些功能一樣，jQuery 有嗎？其實 jQuery 的設計上有考慮到這類擴展性的問題，目前 jQuery 的 plugin 已經有上百個了，你也不一定要完全自己動手寫，上 jQuery 官方網站找找看，或許你需要的功能別人已經幫你做好了。以 UI 來講， jQuery 跟 UI 相關的 plugins 已經做過了一些整合，目前獨立發佈為 jQuery UI (http://ui.jquery.com/)，如果你之前沒聽過 jQuery UI，建議你上去網站上看一下展示的範例，嗯，雖然可能還有一些 bug 存在，但是整體來說已經有相當的水準了，或許你會對 jQuery 更有興趣了。

簡而言之！JQuery 就跟他的主題重一點一樣。Wirte less. Do more.

1.jQuery是什麼?

jQuery是一組可以神奇地簡化Javascript程式寫法的Open Source Library，由John Resig於2006發表。透過Selector、函數串接、元素陣列整批處理等巧妙的語言特色，加上對於HTML處理中常用的Event、Attribute、CSS Style、元素新增/刪除都提供了簡便的寫法，能將原本要寫上數百行的Javascript程式簡化到幾行搞定，故深受許多Javascript開發者的歡迎。

2.為什麼Javascript老鳥看到jQuery這麼興奮? 她當真如此傾國傾城?

寫好Javascript從來不是件簡單事，從拼拼湊湊在自己的IE上運作正常，要提升到讓Internet四面八方湧來的Firefox、Opera、Safar都能跑得順暢，猶如登七星山到爬黑色奇萊的差別。Javascript Framework可以幫我們處理掉惱人的相容細節，讓我們用統一的方式就搞定大部分的主流瀏覽器，當未來有新的瀏覽器規格問市時，我們只要更新Framework版本即可。同時，Framework還會針對常用的功能，提供簡便的公用函數，用較簡單寫法取代原本繁瑣的程式。而眾多Javascript Framework中， jQuery算是最能實現Do More With Less精神的一個，跟其他Framework相比，完成同樣工作，所需要程式行數少得嚇人，因此特別吸引寫Javascript已經寫到手酸的老鳥。

3.jQuery好學嗎?

說jQuery好學是騙人的，它一開始的學習曲線頗為陡峭。Do More With Less的先決條件是要先搞懂像魔法咒語一般的CSS Selector，了解函數接接樂原理、以及一些jQuery慣用的簡潔Javascript語法(這部分未來會再介紹)，得花些心思才能上手，但我保證這個投資的報酬非常驚人。在程式設計上有個很棒的比擬，Regular Expression，一點也不好學，但學會後，原本200行的程式碼只要兩行就可以搞定。

4.我不會寫Javascript，jQuery對我有用嗎?

微軟對ASP.NET/ASP.NET AJAX加了一些很奇妙的設計，利用PostBack+Update Panel，就有開發者一行Javascript也沒寫過，單單用C#/VB.NET寫Server-Side Event就做出很棒很炫的AJAX效果。不過，PostBack+Update Panel的寫法常涉及大量ViewState資料的來回傳送，較為笨重；而光靠現成的東西也不可能解決全部的問題，某些時候，自己動手寫幾行Javascript可以更有效率地滿足系統需求。暗示了這麼久，你如果還是堅持不碰Javascript... 這題的回答是: NO! jQuery對你沒什麼用處。

5.我想學jQuery，要怎麼開始?

對不會Javascript的人來說，jQuery只是塊石頭。所以學jQuery之前，要先對Javascript有基本的認識，對Javascript愈熟，運用jQuery所產生的威力愈大。Javascript出來很久了，坊間可以找到很多書籍，不想花錢Google一下"Javascript 教學"也可以找到成千上萬的網頁，但書籍的介紹可能會較有系統一些。要學習jQuery，我強力推薦

6.Selector是什麼？ 為什麼一堆人對它津津樂道?

"我想要在將表格中的單數列加上淺藍色背景"
"我希望這五個輸入欄位可以用一個按鈕切換顯示或隱藏"
這些需求在傳統做法中，都要透過事前指定元素ID，或動態掃過全部的元素集合的方式處理。jQuery實現了CSS規格的CSS Selector概念，一行解決原本數十行才能搞定的效果，加上應用廣泛，所有開始使用jQuery的人一定會被它電到，從此愛不釋手。除了前述Visual jQuery可以找到範例外，我還找到另一篇完整的中文整理。

7.你老是在講的接接樂是啥?

利用Selector選出來的結果常是一堆網頁元素的集合(陣列)，此時只要在後方加上處理函數(例如: 修改CSS格式、加掛Click事件)，則可以直接對陣列中的每一個元素都做一次處理，最棒的是處理函數做完後會再傳回原本的陣列，所以可以馬上在後面加上第二個處理函數，再對同陣列的所有元素做其他處理，寫起來超省Code。例如: $("..選擇100個元素..").css(設定CSS格式).click(加上Click事件).append(在其中插入其他物件)。

8.寫Javascript過過癮，還有什麼好康?

並不是什麼東西都要自己用Javascript寫才能發揮jQuery的價值，jQuery是很受歡迎的Javascript Framework，現在已經有很多善心人士寫好的好用插件(Plug-In)，例如: 照片展示、動態選單、自動完成、表格排序... 官方網站上有完整的整理，要自己動手做之前，不妨先找找有無現成的插件，可以省下可觀的時間。