前言

自網路時代崛起後，網路的應用及發展如雨後春筍般的蔓延開來，人們對於資料的蒐集及網羅有了不同的概念及定義。在圖書館中找資料的時間少了，在網路上查詢相關資訊的時間變多了，從靜態網頁到動態網頁演變到非同步式的動態網頁，每個階段的進步都帶來更多的新技術，而其中，在2006年所竄起的jQuery近年來更是越來越受歡迎。它的使用方便，體積小，外掛程式選擇多，支持多方瀏覽器等等的優點奠定了在程式開發者心目中的重要地位。本篇文章將介紹jQuery的基本概念以及實用範例的簡介。

jQuery的簡單介紹

jQuery的存在主要是為了讓javascript的使用更為直覺，他將javascript中需要很多程式碼實作的功能包裝成方法，讓使用者只要呼叫這個方法便可以得到所需要的結果。這使得大多數的人不再為了javascript的繁複語法而困擾，進而可以善用這個功能強大的工具，讓網站開發事半功倍。

jQuery的功能非常強大，但是檔案容量卻非常輕巧，不僅可以精簡程式碼， 讓一樣的功能用更簡單直覺的方式實作，還提供了方便的選擇器(Selector)，完善的事件處理機制，高度相容於不同的瀏覽器，豐富的外掛程式(plugin)及使用者介面(UI)。此外jQuery的核心程式還加強了非同步傳輸(AJAX)以及事件(Event) 的功能，主要都是針對javascript不足的部分做補強。JQuery的選擇器與css的選取器其實有異曲同工之妙,取得到選取器後才能分別控制要處理的行為。

jQuery在短短的時間內爆紅，更成為網頁程式設計師不可或缺的程式利器。最重要的是，微軟更直接將 jQuery 結合在 .NET Framework，除了在Visual Studio 2010可以直接使用jQuery，下一代的Visual Studio 11 更是以 jQuery 來當作發展的基石，像ASP.NET MVC 4 除了支援 jQuery 外，也直接採用 jQuery Mobile 來發展相關 Mobile UI。

如何安裝jQuery

到jQuery的官方網站 (http://jquery.com/) 下載jQuery，目前最新版已經到達2.X版，不過因為1.9版之後的版本改動比較大，以下示範部分以1.7.1版為主。



就jQuery的本質而言，其實它是javascript library的一種，下載完檔案之後可以看到其中有兩個js檔，檔名相符，但是其中一個檔案後面會有.min的標記檔名，兩者的功能對jQuery的使用上其實是沒有差別，而有著.min標記的檔案代表的是壓縮過後的版本，除了檔案較小以外，對於程式在執行的時候速度也會比未壓縮版本來的快，兩種不同版本的部分內容及呈現方式如圖二及圖三:





如何使用jQuery

將下載好的jquery.js檔案複製到專案底下，並在要使用jQuery的頁面將其宣告，語法如下:
＜script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"＞＜/script＞
只要引入的路徑正確，便可以開始操作既方便功能又多變的jQuery。

jQuery的實用套件及方法介紹

jQuery的特色中最方便的就是選擇器(Seletor)，以下就幾個常用的選擇器作介紹:

• $("#example") 選取網頁元素id為 "example" 的項目。


• $("[href]") 選取所有包含 href 屬性的元素。
  針對所有符合的元素做批次處理，這就是jQuery的強大之處，如果說網頁上有三個符合的元素，jQuery便會將這三個元素都做一樣的處理，與傳統的javascript做比較，javascript並沒有批次操作的概念，必須要使用迴圈的方式來操作，如此一來程式碼會變得越來越難偵錯及維護，使用jQuery來操作，程式碼不僅易讀也比較乾淨，也有助於增進開發上的速度。


• ( ":checkbox" ) 選取所有checkbox元件，用在全選或全取消很實用。


• ([attribute='value']) 選取指定元件的值為指定value的項目，如下圖所示。
  
  
  《圖四》
  
  篩選網頁元件為checkbox的將其全部取消勾選，文字部分欄位皆清除。


• (“:check”) 選取網頁上有被選取的checkbox項目。


• $(document).ready(function(){});
  以往如果我們要在網頁下載完畢後立刻執行一些動作或程式，會使用window.onload或者是在的標籤加上 onload ，jQuery提供了另一種方式給我們使用，與傳統的方式比較優點在於window.onload無法執行多項程式，最後一個執行的程式會覆蓋掉之前的結果，而使用jQuery則可以輕鬆執行多項程式，不用另外做其它設定。實際操作如下圖。
  
  
  《圖五》jQuery document.ready 範例


• Serialize
  
  在網頁處理中，常常會有許多的欄位資料需要往後端傳送做處理，會員註冊的情況尤其明顯。想想，如果有一個上百個欄位的表單需要做填寫，整張表單的欄位都往後傳，如果手動用Key/Value pairs 的型態處理一定相當麻煩而且出錯的機率非常大。jQuery提供了一個相當方便的方法 – serialize()，利用這個方法，可以將表單中的元素自動生成Key/Value pairs 的型態回傳，省去一大部分的苦工，往後需要在表單中多新增欄位時也不需要在傳送參數中新增，因為他一樣會自動生成在傳送的參數中，如此一來便不需要擔心會有漏傳參數的問題了。
  
  
  
  《圖六》利用serialize方法就可以自動生成表單中的欄位對應參數。


• 事件 ( Event ) 控制
  
  在jQuery中也簡化了許多事件控制的動作，而事件項目如滑鼠控制事件(Mouse events)、鍵盤控制事件(Keyboard events)、表格事件(Form Events)、文件及視窗事件(Document/Window Events)，而各事件所對應的jQuery關鍵字如下表:
  
  
  
  《表一》jQuery事件表(參考來源:http://www.w3schools.com/jquery/jquery_events.asp)
  
  
  以表格事件來說，常常在網頁上會有許多欄位需要使用者輸入(例如註冊功能)，如果要提示使用者欄位輸入的注意事項或者是顯目的標記已讓使用者明確知道現在的控制項為哪個欄位，直接在網頁上提示也不是不行，但除了佔版面，美觀及排版也會是一個問題，這時候如果使用”focus”便可以輕鬆解決這個問題。範例及結果如下所示:
  
  
  
  《圖七》
  
  
  結果:
  
  
  《圖八》
  
  
  如結果所示，當控制權移動其中一個欄位時，背景及框線就會改變，如此一來可以清楚的讓使用者知道目前的控制項位於哪裡。

JQuery AJAX

在傳統的網頁設計中，程式設計師在傳送表單時，發出一個請求 (request)傳送到後端伺服器，伺服器接收並處理後送回一個新的表單，進行後續相關操作。這樣的做法不但浪費網路資源，而且每一次的處理都需等待伺服器回應才能繼續，大量的資料傳送也需要花上對等的時間。在表單及伺服器處理的資料中有大部分都是雷同的，卻還要一來一往的傳送，相當浪費資源。為了因應這個問題，AJAX (Asynchronous JavaScript and XML) 的技術出現了，非同步載入的概念節省了許多等待伺服器回應的時間，相同的程式碼不必再重複的往返伺服器與網頁間，只要更動網頁上需要變動的元素即可。

在jQuery AJAX出現前，傳統AJAX 的程式碼撰寫其實也不是很容易就可以上手，原因在於不同的瀏覽器在使用AJAX時皆有不同的實作方式，這使得早期在開發AJAX時常常需要多寫一些額外的程式碼來處理不同瀏覽器。但現在有了jQuery的AJAX便不用擔心這個問題，僅僅只要使用簡單的程式法就可以輕鬆達成支援多瀏覽器的效果。

在jQuery中，將AJAX的技術包裝起來，可以更方便快速的使用，同時也提供了文字、HTML，或者是JSON三種不同格式可以使用。這種在背景處理資料僅更新部分網頁元素的作法，早也已經充斥著我們身邊，如每天收發電子郵件廣受大家使用的Gmail，出門在外旅遊好幫手電子地圖Google maps，以及創造無數網路紅人的媒體共享平台Youtube，當然亞洲人使用率最高的交友平台Facebook也是應用了AJAX的技術，從以上的幾個例子就可以很清楚AJAX技術在未來的發展將是無法限量。

以下將簡單的jQuery AJAX的用法及相關的介紹:

一、基本用法:



二、參數介紹:

url: 要進行呼叫的位址。

data:要傳送到伺服器的資料。一般來說會是傳類似 ”name=XXX” 這種Key/Value pairs 的型態。

type: 請求方式。一般來說就是 POST或是 GET。

dataType: 預期從伺服器傳送回來的接收資料類型。常見的有xml, text,以及json。

success: 處理成功時處理的函式。當資料從後端處理完畢後，依指定的方式回傳後再由這邊的函式作處理。

error: 處理失敗時執行函式。一般來說，有時候有問題發生的時候在網頁上都看不出異狀，所以會建議在程式碼的錯誤部分，加上這一段以回傳錯誤的資訊，比較好辨別處理錯誤的地方。

jQuery Widgets

jQWidgets是一個結合jQuery及HTML5概念整合的使用者介面框架, 提供了一個良好且易懂的方法給程式開發者使用，這個工具的原始開發概念完全符合HTML5, CSS, Javascript及jQuery的開發準則。當然，近幾年來行動裝置的程式開發已經變成一種趨勢，jQWidgets除了應用在一般的網頁開發外，這個工具同時也直援手機程式端的開發，妥善的應用jQWidgets，可以讓網站的開發及互動變得更美觀更直覺。

jQWidgets的優點除了可應用於一般網頁開發及手機應用程式上外，她的效能也是經過特別調校的，除了檔案內容本身很迷你外，程式內容的模組化對於效能上的提升也有不少助益。此外，jQWidgets也可應用在不同的瀏覽器上，像 Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google Chrome, IE Mobile, Android, Opera Mobile, Mobile Safari(IPhone, IPad).

在jQWidgets官方網站上有許多jQWidgets的範例可供參考，以一般實作網頁時最容易碰到的會員註冊為例如，jQWidgets 直接將會員密碼強度檢查、密碼確認以及日期的工具直接都已經實作完畢，我們需要做的只是呼叫套件來使用即可以完成這些繁瑣的工作，不再需要像以往使用javascript一項一項功能實做。jQWidgets不但可以提供城市開發者方便使用的套件，更可以帶給使用者更好的經驗。



結論

在現在這個資訊爆炸的時代，網路上有太多太多的免費資源可供使用，但未經整理過的僅僅是資料而不是有用的資訊。對於程式設計師而言，有太多的工具可以使用反而會無所適從。本文從便利性、擴展性以及未來的發展性為出發點，介紹了幾個在實做網頁程式時常用到的套件，像是jQuery AJAX以及相關的API都可以幫助我們事半功倍，為使用者創造更多友善及直覺性的互動式頁面。

jQuery為網頁發展帶來跳躍式的成長，原本的javaScript在使用上並不是這麼的方便，但有了jQuery既直覺又強大的功能，已經成為網頁設計不可或缺的一環。此外，行動式裝置的發展也將是未來注目的焦點，不管在硬體的競爭還是軟體的角逐都會為人類的未來帶來更多的進步，jQuery的發展也漸漸從桌上型裝置支援到行動裝置，相信在未來jQuery會發展出更多便利及強大的功能。

參考資料
http://jsgears.com/thread-63-1-1.html
http://blog.kkbruce.net/p/javascript.html#jQuery
http://www.w3schools.com/jquery/
http://www.jqwidgets.com/