自從jQuery被微軟選秀入宮採納應用於未來產品之後,從原本Javascript老鳥才會識貨相挺的另類神兵利器,忽然一夕間傳遍鄉里,老幼皆知。不過我相信仍有不少人對jQuery十分陌生,這篇文章的對象鎖定對jQuery毫無所悉的朋友,以Q&A方式解答幾個基本問題,以觀念介紹為主,儘量不涉及Coding細節。

  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,我強力推薦http://visualjquery.com/!! 它很完整地彙緦了jQuery的大小函數、語法,最棒的是它的範例寫得非常用心,一看就明白。
  6. Selector是什麼? 為什麼一堆人對它津津樂道?
    "我想要在將表格中的單數列加上淺藍色背景"
    "我希望這五個輸入欄位可以用一個按鈕切換顯示或隱藏"
    這些需求在傳統做法中,都要透過事前指定元素ID,或動態掃過全部的元素集合的方式處理。jQuery實現了CSS規格的CSS Selector概念,一行解決原本數十行才能搞定的效果,加上應用廣泛,所有開始使用jQuery的人一定會被它電到,從此愛不釋手。
    除了前述Visual jQuery可以找到範例外,我還找到另一篇完整的中文整理
  7. 你老是在講的接接樂是啥?
    利用Selector選出來的結果常是一堆網頁元素的集合(陣列),此時只要在後方加上處理函數(例如: 修改CSS格式、加掛Click事件),則可以直接對陣列中的每一個元素都做一次處理,最棒的是處理函數做完後會再傳回原本的陣列,所以可以馬上在後面加上第二個處理函數,再對同陣列的所有元素做其他處理,寫起來超省Code。例如: $("..選擇100個元素..").css(設定CSS格式).click(加上Click事件).append(在其中插入其他物件)。
  8. jQuery除了讓老鳥狂寫Javascript過過癮,還有什麼好康?
    並不是什麼東西都要自己用Javascript寫才能發揮jQuery的價值,jQuery是很受歡迎的Javascript Framework,現在已經有很多善心人士寫好的好用插件(Plug-In),例如: 照片展示、動態選單、自動完成、表格排序... 官方網站上有完整的整理,要自己動手做之前,不妨先找找有無現成的插件,可以省下可觀的時間。

Comments

# by Albert

簡單明瞭,推!

# by mOMo

用祂一段時間了,我想我擺脫不了祂了吧!

# by kink

可以麻煩版大替小弟說明jQuery.extend到底該怎麼用嗎? 又或者白話點替小弟描述一下她呢? 我好難懂她阿...................

# by Jeffrey

to kink, PO了一篇文回答你的問題: http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/03/01/jquery-extend.aspx。

# by jQuery初學者一枚!

內容好詳細 謝謝你! 我終於了解為什麼大家都喜歡用 jQuery 了

Post a comment