第一章 基本概念第一章 基本概念\1-1 JQuery介紹

1-1 JQuery介紹

 

JQuery是一種JavaScript的程式庫(Library)或框架(Framework),他的特點就是Do More With Less(Code寫的少,但功能實現的多),也就是說用幾行的JQuery程式碼就能做到很多想要的功能或效果。除了以符號或縮寫來簡化之前JavaScript程式碼外,它也提供常用的公用函數,來讓開發者直接取用。更重要的是它是個免費又開放原始碼的程式庫,並吸引成千上萬的開發者也投入JQuery程式庫擴充與組件的提供。

JQuery始於2006年由美國人John Resig所開發並發行1.0版本,2009年微軟的VS2008 SP1正式支援JQuery,並整合入VS開發環境當中,一直到現在VS2019。在最新的VS2019強調MVC開發模式中,JQuery即被認可最佳的View(使用者的UI操作介面)開發方案;之後網路一哥Google Adobe也紛紛宣布將JQuery 納入其產品線當中,做為開發語言框架的一部分。同時,JQuery在現今全球最知名前1萬個網站中,有59%都使用了JQuery技術,由此可見JQuery大受開發者的青睞。

JQuery 本體是使用Javascript 所寫出來的,因此JQuery Javascript 兩者是並存,JQuery是必須依賴Javascript才能執行。也就是說,只要Javascript 做得到的功能,JQuery 就一定做得到,相對的,如果Javascript 做不到的功能,JQuery 也一樣做不出來。

既然JQuery是出自JavaScript,就代表是選擇性的,不一定非用不可,或說,用了JQuery到底有甚麼好處呢?整理如下:

1. JQuery剛開始立意很簡單,就是簡化JavaScript的編寫方式,如以JavaScript來取得一個 id=my_id”的DOM物件的寫法為:
var obj1 = document.getElementById("my_id");
如果以JQuery來寫的話,可以簡化成 var obj1= $("#my_id"); 即可,所有的Tag都可以是DOM的對象來存取或操作,讓網頁的控制變得更的得心應手。

2. JQuery
提供了很多常用的Class與其程式庫,可以很容易做出很好的UI效果,例如只要一行 $("#div1").fadeIn("slow"); 就可以讓div1慢慢的以淡入效果顯示出來,再如$("#panel").slideDown(); 這可以讓panel產生向下拉開的效果等等,如果在JavaScript中,不但要自己寫,而且程式量也不小又不一定寫得好。

3.
網頁最重視的就是效能與使用者的互動與親和性,傳統網頁就是動不動老是要Postback造成使用者的等待與不便。因此市場上才會出現數不勝數的AJAX框架與技術出現,AJAX就是Asynchronous JavaScript And XML縮寫,代表非同步的JavaScript XML,簡短地說就是在不重新整理網頁(Postback)的情況下,AJAX 透過非同步的方式與後端交換資料,並可立即在網頁上進行局部顯示。JQueryAJAX是透過HTTP PostHTTP Get來進行與後端服務的資料交換,包括呼叫別的網頁程式、取得XMLJSON格式資料等等,JQueryAJAX非常簡潔好寫,使開發者更容易以AJAX開發出與USER互動又具有效能的網頁。

4.
本身JQuery就是屬於開放原始程式碼的免費自由軟體,在市場上你可以找到數以百計的社群或個人以JQuery為基礎開發各種不同的plug-in組件與程式庫供人下載,很多UI與特殊功能組件,基本上社群大都有人寫好了,只需拿來使用與整合即可,省時又方便。

5.
自己開發的JavaScript比較容易遇到各種不同瀏覽器的相容問題,透過JQuery的程式庫,基本上常用的瀏覽器(IEFireFoxSafariChromeOpera)都已經過眾多測試者驗證過了,比較不會遇到跨裝置或跨瀏覽器所延生的相容問題。

6. JQuery
算是一個輕量級的程式庫,簡潔不笨重,壓縮後大約21KB上下 (v1.7),即使這樣,引用JQuery的設備也是第一次使用才會被載入,之後就會Cache住,對網頁的效能影響非常小,反而因JQuery所提供的classAJAX方式讓你的網頁更具有效能優勢。

7.
另有一個子集為JQuery Mobile,用來專門支援各種手機或平板的UI介面,同樣是基於JQuery的基礎,差別是JQuery Mobile規定使用HTML5為標準,主要還支援了多點觸控與不同螢幕大小的自動調整,透過JQuery Mobile即可輕易寫出手機平版的專用網頁。

 


 

Top of Page