第1章 jQuery入門

學習要點：

    1.什麼是jQuery

    2.學習jQuery的條件

    3.jQuery的版本

    4.jQuery的功能和優點

    5.其餘JavaScript庫

    6.是否兼容低版本IE

     7.下載及運行jQuery

 

一．什麼是jQuery

 

jQuery是一個JavaScript庫，它經過封裝原生的JavaScript函數獲得一整套定義好的方法。它的做者是John Resig，於2006年建立的一個開源項目，隨着愈來愈多開發者的加入，jQuery已經集成了JavaScript、CSS、DOM和Ajax於一體的強大功能。它能夠用最少的代碼，完成更多複雜而困難的功能，從而獲得了開發者的青睞。

 

 

 

 

 

主旨：以更少的代碼、實現更多的功能

 

 

 

二．學習jQuery的條件

 

jQuery是JavaScript庫，因此jQuery在使用上要比原生的JavaScript要簡單，可是對於網頁編程來講，有些通用的基礎知識是必備的：

 

1.XHTML或HTML5（含CSS，網頁必備的基礎技術，XHTML已完結90課）；

 

2.JavaScript（雖然jQuery使用比JavaScript簡單，但各類語法來自JavaScript，只要掌握已出課程的第一季149課便可，並不須要徹底精通，只要理解語法和項目中簡單的用法便可。）；

 

3.服務器語言如：PHP（jQuery屬於前端技術，那和後端技術是相輔相成、互相呼應的，而PHP課程目前出到第四季，而jQuery只須要PHP第一季136課的基礎便可。）；

 

 

 

三．jQuery的版本

 

從2005年8月開始，進入公共開發階段，隨之而來的新框架於2006年1月14日正式以jQuery的名稱發佈。

 

2006年8月發佈了jQuery1.0，第一個穩定版本，具備對CSS選擇符、事件處理和Ajax交互的支持。

 

2007年1月發佈了jQuery1.1，極大的簡化API。合併了許多較少使用的方法。

 

2007年7月發佈了jQuery1.1.3，優化了jQuery選擇符引擎執行的速度。

 

2007年9月發佈了jQuery1.2，去掉了XPath選擇器，新增了命名空間事件。

 

2008年5月發佈了jQuery1.2.6，引入了Dimensions插件到核心庫中。

 

2009年1月發佈了jQuery1.3，使用了全新的選擇符引擎Sizzle，性能進一步提高。

 

2010年1月發佈了jQuery1.4，進行了一次大規模更新，提供了DOM操做，增長了不少新的方法或是加強了原有的方法。

 

2010年2月發佈了jQuery1.4.2，添加了.delegate()和.undelegate()兩個新方法，提高了靈活性和瀏覽器一致性，對事件系統進行了升級。

 

2011年1月發佈了jQuery1.5，重寫了AJAX組件，加強了擴展性和性能。

 

2011年5月發佈了jQuery1.6，重寫了Attribute組件，引入了新對象和方法。

 

2011年11月發佈了jQuery1.7，引入了.on()和.off()簡介的API解決事件綁定及委託容易混淆的問題。

 

2012年3月發佈了jQuery1.7.2，進行一些優化和升級。

 

2012年7月發佈了jQuery1.8，8月發佈了1.8.1，9月發佈了1.8.2，重寫了選擇符引擎，修復了一些問題。

 

2013年1月發佈了jQuery1.9，CSS的多屬性設置，加強了CSS3。

 

2013年5月發佈了jQuery1.10，增長了一些功能。

 

 

 

2013年4月發佈了jQuery2.0，5月發佈了jQuery2.0.2，一個重大更新版本，不在支持IE6/7/8，體積更小，速度更快。

 

 

 

在製做這套課程的時候，咱們最新的中文版的API文檔是1.8版本的，有在線和離線兩種手段查閱：

 

1.在線的能夠訪問：http://t.mb5u.com/jquery/

 

2.離線的AP文檔將打包提供給你們

 

3.若是要看最新的文檔，英文版的：http://api.jquery.com/ 看不懂能夠打開谷歌翻譯，雖然不是特別準。

 

 

 

關於版本學習的問題：

 

版本的版本號升級主要有三種：第一種是大版本升級，好比1.x.x升級到2.x.x，這種升級規模是最大的，改動的地方是最多的，週期也是最長的，jQuery從1.x.x到2.x.x用了7年。第二種是小版本更新，好比1.7升級到1.8，改動適中，增長或減小了一些功能，通常週期半年到一年左右。第三種是微版本更新，好比1.8.1升級到1.8.2，修復一些bug或錯誤之類。

 

版本的內容升級主要也有三種：第一種是核心庫的升級，好比優化選擇符、優化DOM或者AJAX等；這種升級不影響開發者的使用。第二種是功能性的升級，好比剔除一些過期的方法、新增或加強一些方法等等；這種升級須要瞭解和學習。第三種就是BUG修復之類的升級，對開發者使用沒有影響。

 

學習者有一種擔心，好比學了1.3版本的jQuery，那麼之後升級新版本是否是還須要重學？不必，由於並非每次升級一個版本都會增長或剔除功能的，一半左右都是內部優化，升級到新版本並不須要任何學習成本。就算在新的版本增長了一些功能，只須要幾分鐘瞭解一下便可使用，無需清零以前的知識，只需後續累加。固然，在早期的jQuery版本都建立了最經常使用的功能，而新版本中增長的功能，也不是最經常使用的，無需當即學習，立馬用起。

 

 

 

四．jQuery的功能和優點

 

jQuery做爲JavaScript封裝的庫，他的目的就是爲了簡化開發者使用JavaScript。主要功能有如下幾點：

 

1.像CSS那樣訪問和操做DOM

 

2.修改CSS控制頁面外觀

 

3.簡化JavaScript代碼操做

 

4.事件處理更加容易

 

5.各類動畫效果使用方便

 

6.讓Ajax技術更加完美

 

7.基於jQuery大量插件

 

8.自行擴展功能插件

 

jQuery最大的優點，就是特別的方便。好比模仿CSS獲取DOM，比原生的JavaScript要方便太多。而且在多個CSS設置上的集中處理很是舒服，而最經常使用的CSS功能又封裝到單獨的方法，感受很是有心。最重要的是jQuery的代碼兼容性很是好，你不須要老是頭疼着考慮不一樣瀏覽器的兼容問題。

 

 

 

五．其餘JavaScript庫

 

目前除了jQuery，還有5個庫較爲流行，他們分別是YUI、Prototype、Mootools、Dojo和ExtJS。

 

YUI，是雅虎公司開發的一套完備的、擴展性良好的富交互網頁工具集。

 

Prototype，是最先成型的JavaScript庫之一，對JavaScript內置對象作了大量的擴展。

 

Dojo，Dojo強大之處在於提供了其餘庫沒有的功能。離線存儲、圖標組件等等。

 

Mootools，輕量、簡潔、模塊化和麪向對象的JavaScript框架。

 

ExtJS，簡稱Ext，本來是對YUI的一個擴展，主要建立前端用戶界面。(付費的)

 

 

 

六．是否兼容IE低版本

 

此次jQuery發佈了大版本2.x.x，徹底放棄兼容IE6/7/8。不僅僅如此，不少國際上的大型站點也開始逐步再也不支持IE6/7/8。但對於國內而言，比較大型的網站最多隻是拋棄IE6，或者部分功能不支持IE6的警示框，還沒可能一會兒把IE6/7/8全面拋棄。這裏咱們就談一談你的項目是否有必要兼容IE6/7/8。

 

徹底不支持IE6的示例：網易雲課堂 -- http://study.163.com

 

 

 

 

 

部分功能不支持IE6的示例：Q+ -- http://web.qq.com

 

 

 

 

 

徹底不支持的作法，就是檢測到是否爲IE6或者IE6/7/8，而後直接跳轉到一個信息錯誤界面，讓你更換或升級瀏覽器，不然沒法訪問使用。

 

部分功能不支持的作法，就是判斷你是IE6或IE6/7/8，而後給一個警示條或彈窗，告訴你使用此款瀏覽器性能下降或部分功能使用不正常或不能使用的提示，但還能夠訪問使用。

 

雖然大部分國內網站用IE6去運行都能基本兼容，但不少細節上仍是有些問題，致使不能流暢的去使用。

 

 

 

疑問：咱們新作的項目應不該該再兼容IE6或IE6/7/8？

 

這個問題爭論好久，支持兼容的人會拿國情和使用率來證實。不支持兼容的人會用技術落後致使整個落後別國來證實。其實這兩種都有商榷的地方。

 

首先，傳統行業失敗率爲97%，而新新的IT行業更高達99%以上（數據可能不精確，但能夠說明失敗率很高）。那麼站在更高的角度去看你的項目，你無論是付出3倍成本去完成一個用戶體驗通常，但兼容性很好的項目；仍是付出正常成本去完成用戶體驗很好，但不兼容低版本瀏覽器；這兩種狀況無論是哪種，最終可能都會失敗。那麼你願意選擇哪一種？

 

 

 

是否兼容IE6或IE6/7/8並不單純是用戶基數和國情的問題，而不少項目發起人只一味的用這種理由去斷定需求，那麼失敗也在所不免。除了這個方面，咱們還應該考慮更多的方面：

 

1.成本控制

 

不少項目每每在6、12、18、32...個月就會發生財務問題，好比資金緊縮甚至斷裂。因此，成本控制尤其重要。項目若是不是老站升級，也不是大門戶的新聞站，成本控制和儘快上線測試纔是最重要的。而若是新站一味要求全面兼容，會致使成本加重（隨着功能多少，成本倍率增長）。爲了鎖緊時間，就不停的加班再加班，又致使員工抵觸，工做效率下降，人員流動開始頻繁，新員工又要接手開發一半的項目。這樣成本不停的再累加。最終很多項目，根本沒上線就失敗了。

 

2.用戶選擇

 

用戶通常能夠分爲兩種用戶：高質量用戶和低質量用戶。所謂高質量用戶，就是爲了一款最新的3D遊戲去升級一塊發燒級的顯卡，或直接換一臺整機。所謂低質量用戶，發現不能玩最新的3D遊戲，就放棄了，去玩「植物大戰殭屍」解解饞算了。在用戶選擇上有一個很好的案例，就是移動互聯網。網易和騰訊在他們的新聞應用上，他們兼容了幾乎全部的手機平臺，好比IOS、安卓、黑莓、塞班等等，由於新聞應用的核心在新聞，而新聞的用戶基數巨大，須要兼顧高質量和低質量用戶。而騰訊在IOS上的幾十個應用，除了新聞、QQ、瀏覽器，其餘的基本都只有IOS和安卓，在塞班和黑莓及其餘上就沒有了。

 

因此，你的應用核心是哪方面？兼容的成本有多大？會不會致使成本控制問題？用戶選擇尤其重要，放棄低質量用戶也是一種成本控制。在用戶基數龐大的項目上，放棄低質量用戶就有點愚笨，好比某個新聞站有1億用戶，2000萬爲使用低版本瀏覽器的低質量的用戶，而面對2000萬用戶，你兼容它或單獨爲2000萬作個低版本服務，成本雖然可能仍是3倍，但對於龐大的用戶基數來看，這種成本又很是低廉。而你的用戶基數只有1000人，而低質量用戶有50人，那麼爲了這50人去作兼容，那麼3倍的成本就變得很是的昂貴。

 

3.項目側重點

 

你的項目重點在哪裏？是爲了看新聞？是爲了宣傳線下產品？那麼你其實有必要兼容低版本瀏覽器。首先這種類型的站不須要太好的用戶體驗，不須要太多的交互操做，只是看，而兼容的成本比較低，而且核心在新聞或產品！但若是你的項目有大量的交互、大量的操做，好比全球最大的社交網已經不兼容IE6/7，最大的微博也再也不兼容IE6/7，就是這個緣由。因此，項目並非一味的全面兼容，或者全面不兼容，主要看你的項目側重點在哪裏！

 

4.用戶體驗

 

若是你的項目在兼容低版本瀏覽器成本巨大，好比社交網，有大量的JS和AJAX操做。那麼兼容IE6/7的成本確實很高，若是兼容，用戶體驗就會不好。兼容有兩種，一種是高版本瀏覽器用性能好，體驗好的模式；低版本的自動切換到兼容模式。第二種就是，無論高版本或低版本都用統一的兼容模式。這兩種成本都很高。用戶體驗好的模式，能增長用戶粘度，增長付費潛在用戶，而用戶體驗差的老是被用戶概括爲心目中的備胎（所謂備胎就是實在沒有了纔去訪問，若是有，很容易被拋棄）。

 

5.數據支持

 

若是對某一種類型的網站項目有必定的研究，那麼手頭必須有支持的數據分析。有數據分析能夠更好的進行成本控制，更有魄力的解決高低質量用戶的取捨。

 

 

 

瓢城Web俱樂部瀏覽器比例圖

 

6.教育用戶

 

不少項目多是有固定客戶羣，或者使用該項目人員質量廣泛較高。那麼，面對零星一點的低質量用戶，咱們不能再去迎合他。由於迎合他，就沒法用高質量的用戶體驗去粘住忠實用戶，又不能獲取到低質量用戶的芳心。因此，咱們應有的策略是：緊緊把握住高質量的忠誠用戶，作到他們心目中的第一；教育那部分低質量用戶（好比企業級開發項目，能夠直接作企業培訓，安裝高版本瀏覽器等等。互聯網項目，就給出提示安裝高版本瀏覽器便可）。那麼一部分低質量用戶被拉攏過來，還有一小撮死性不改的就只有放棄。切不可撿了芝麻丟了西瓜，不要貪大求全。

 

 

 

PS：咱們用了這六點討論了一下是否須要兼容IE6或IE6/7/8，結論就是必須根據實際狀況，你項目的成本狀況、人員狀況、用戶狀況和項目自己類型狀況而制定，沒有一刀切的兼容或不兼容。

 

 

 

七．下載及運行jQuery

 

目前最新的版本，是1.10.1和2.0.2，咱們下載開發版，能夠順便讀一讀源代碼。若是你須要引用到你線上的項目，就必須使用壓縮版，去掉了註釋和空白，是容量最小。

 

本課程使用的軟件是：Nodepad++

 

使用測試的瀏覽器爲：Firefox3.6.8、Firefox21+、Chrome、IE6/7/8/9、Opera和Safari

 

使用的版本爲：1.10.1、2.02做爲拋棄IE6/7/8版本會在單獨章節中講解

 

使用的html版本爲：xhtml1.0，在必要的時候將會使用html5

 

使用的調試工具：Firefox下的firebug

 

 

 

//單擊按鈕彈窗

 

$(function () {

 

$('input').click(function () {

 

alert('第一個jQuery程序！');

 

});

 

});