2016年3月8日 星期二

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),例如: 照片展示、動態選單、自動完成、表格排序... 官方網站上有完整的整理,要自己動手做之前,不妨先找找有無現成的插件,可以省下可觀的時間。

沒有留言: