從零開始學習jQuery (一) 開天辟地入門篇

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html"></a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html">從零開始學習jQuery (一) 開天辟地入門篇</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html">從零開始學習jQuery (二) 萬能的選擇器</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/04/jQuery-Learn-3.html">從零開始學習jQuery (三) 管理jQuery包裝集</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/05/jQuery-Learn-4.html">從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html">從零開始學習jQuery (五) 事件與事件對象</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jQuery-Learn-6.html">從零開始學習jQuery (六) jQuery中的Ajax</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/11/jQuery-Learn-7.html">從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-8.html">從零開始學習jQuery (八) 插播:jQuery實施方案</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-9.html">從零開始學習jQuery (九) jQuery工具函數</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-10.html">從零開始學習jQuery (十) jQueryUI常用功能實戰</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/22/jQuery-Learn-11.html">從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件</a>

<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-9.html"></a>

本系列文章将帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案,  即使你會使用jQuery也能在閱讀中發現些許秘籍.

本篇文章是入門第一篇, 主要是簡單介紹jQuery, 通過簡單示例指導大家如何編寫jQuery代碼以及搭建開發環境. 詳細講解了如何在Visual Studio中配合使用jQuery.

轉載請注明子秋出品!部落格園首發!

首先道個歉! "從零開始學習ASP.NET MVC"系列文章在即将介紹Filter時就沒有更新了, 原因就是最近我一直在研究和學習jQuery.看到本系列的名稱和文章标題, 看過我的MVC系列文章的人會感到很熟悉. 不久要給公司的人做教育訓練, 是以特意制作了本教程.

在寫作的同時我參考了網上jQuery的系列教程文章, 在部落格園和Google上并沒有找到讓我滿意的系列教程. 我喜歡将知識系統的,深入淺出的講解.不喜歡寫那種"學習筆記"式的文章. 同時本系列将很快全部寫完(有工作壓力就是有動力), 随後如果時間允許我會繼續更新MVC系列文章.再一次對等待MVC文章的朋友們說聲抱歉!

另外本系列文章的大部分知識點來源于圖靈出版社的"jQuery實戰"一書. 推薦大家購買此書, 是jQuery書籍中的經典之作.

下面讓我們開始jQuery之旅.

jQuery是一套Javascript腳本庫.  在我的部落格中可以找到"Javascript輕量級腳本庫"系列文章. Javascript腳本庫類似于.NET的類庫, 我們将一些工具方法或對象方法封裝在類庫中, 友善使用者使用.

注意jQuery是腳本庫, 而不是腳本架構. "庫"不等于"架構", 比如"System程式集"是類庫,而"ASP.NET MVC"是架構. jQuery并不能幫助我們解決腳本的引用管理和功能管理,這些都是腳本架構要做的事.

腳本庫能夠幫助我們完成編碼邏輯,實作業務功能. 使用jQuery将極大的提高編寫javascript代碼的效率, 讓寫出來的代碼更加優雅, 更加健壯. 同時網絡上豐富的jQuery插件也讓我們的工作變成了"有了jQuery,天天喝茶水"--因為我們已經站在巨人的肩膀上了.

建立一個ASP.NET MVC項目時, 會發現已經自動引入了jQuery類庫. jQuery幾乎是微軟的禦用腳本庫了!完美的內建度和智能感覺的支援,讓.NET和jQuery天衣無縫結合在一起!是以用.NET就要選用jQuery而非Dojo,ExtJS等.

jQuery有如下特點:

使用這些功能函數, 能夠幫助我們快速完成各種功能, 而且會讓我們的代碼異常簡潔.

javascript腳本在不同浏覽器的相容性一直是Web開發人員的噩夢,  常常一個頁面在IE7,Firefox下運作正常, 在IE6下就出現莫名其妙的問題. 針對不同的浏覽器編寫不同的腳本是一件痛苦的事情. 有了jQuery我們将從這個噩夢中醒來, 比如在jQuery中的Event事件對象已經被格式化成所有浏覽器通用的, 從前要根據event擷取事件觸發者, 在ie下是event.srcElements 而ff等标準浏覽器下下是event.target. jQuery則通過統一event對象,讓我們可以在所有浏覽器中使用event.target擷取事件對象.

jQuery可以實作比如漸變彈出, 圖層移動等動畫效果, 讓我們獲得更好的使用者體驗. 單以漸變效果為例, 從前我自己寫了一個可以相容ie和ff的漸變動畫, 使用大量javascript代碼實作, 費心費力不說, 寫完後沒有太多幫助過一段時間就忘記了. 再開發類似的功能還要再次費心費力. 如今使用jQuery就可以幫助我們快速完成此類應用.

這一條是我提出的, 原因就是大部分開發人員對于javascript存在錯誤的認識. 比如在頁面中編寫加載時即執行的操作DOM的語句, 在HTML元素或者document對象上直接添加"onclick"屬性,  不知道onclick其實是一個匿名函數等等.  擁有這些錯誤腳本知識的技術人員也能完成所有的開發工作, 但是這樣的程式是不健壯的. 比如"在頁面中編寫加載時即執行的操作DOM的語句", 當頁面代碼很小使用者加載很快時沒有問題, 當頁面加載稍慢時就會出現浏覽器"終止操作"的錯誤.jQuery提供了很多簡便的方法幫助我們解決這些問題, 一旦使用jQuery你就将糾正這些錯誤的知識--因為我們都是用标準的正确的jQuery腳本編寫方法!

按照慣例, 我們來編寫jQuery的Hello World程式, 來邁出使用jQuery的第一步.

在本文最後可以下本章的完整源代碼.

jQuery的項目下載下傳放在了Google Code上, 下載下傳位址:

<a href="http://code.google.com/p/jqueryjs/downloads/list">http://code.google.com/p/jqueryjs/downloads/list</a>

上面的位址是總下載下傳清單, 裡面有很多版本和類型的jQuery庫, 主要分為如下幾類:

建立一個HTML頁面, 引入jQuery類庫并且編寫如下代碼:

<a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2-vsdoc2.js&amp;can=2&amp;q="></a>

效果如下:

頁面上有三個按鈕, 分别用來控制Hello World的顯示,隐藏和修改其内容.

此示例使用了:

(1) jQuery的Id選擇器: $("#btnShow")

(2) 事件綁定函數 bind()

(3) 顯示和隐藏函數. show()和hide()

(4) 修改元素内部html的函數html()

在接下來的教程中我們将深入這些内容的學習.

首先看一下Visual Studio帶給我們的智能感覺驚喜. 要讓Visual Studio支援智能感覺, 需要下列條件:

安裝 VS2008 SP1

安裝VS 2008 Patch KB958502以支援"-vsdoc.js"Intellisense檔案.

必須要引用vsdoc版本的jquery庫

在編寫腳本的時候, 甚至剛剛輸入"$"的時候,VS可以智能提示:

在使用方法時, 還會有更多的提示:

有了智能感覺我們編寫javascript變得和C#一樣快速,便捷,舒服.大部分情況可以一次編寫成功而不用再為了一個大小寫而查詢javascript幫助檔案.能夠讓Visual Studio對jQuery實作智能感覺的前提是要引入vsdoc版本的jQuery類庫. 示例中我們引入了"jquery-1.3.2-vsdoc2.js"檔案. 如果引用其他版本比如min版本的jQuery類庫就無法啟用智能提示.但是在正式環境下, 我們必須要使用"min"版本的jquery庫檔案, 以1.3.2版本号為例,各個版本的大小如下:

其中第一個是未壓縮的jquery庫. 如果啟用gzip壓縮并且使用min版本的jquery.js可以在傳輸過程中壓縮到19KB.

注意,如果我們更新了腳本, 可以通過"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感覺,或者單擊 編輯-&gt;IntelliSense-&gt;更新JScript Intellisense:

為了即能在Visual Studio中增加腳本提示, 又能在上線的時候使用min版本的腳本庫, 我們一般是用如下方式引入jQuery庫:

這是網上推薦的方式. 編譯後的頁面上隻有min版本的引用, 同時在開發時能夠享受到智能感覺.但是注意這種方式引用的min類庫隻能是1.2.6或者之前的版本号. 最新的1.3.2的所有非vsdoc版本的jquery庫引用後都會導緻JScript Intellisense更新出錯. 這是1.3.2版本的一個bug, 期待後續版本中解決. 其實大家完全可以使用1.2.6版本的min庫, 本教程涉及的jquery功能, 1.2.6版本基本都支援.

我們使用了if(false)讓編譯後的頁面不包含vsdoc版本jquery庫的引用, 同樣的思路還可以使用比如将腳本引用放入一個PlaceHolder并設定visible=fasle等.

為了能使用 1.3.2 版本的min庫, 我們隻能通過将腳本引用放在變量裡, 通過頁面輸出的方式, 此種方式可以正常更新JScript Intellisense.但是可能有人和我一樣不喜歡在前端使用變量:

背景聲明變量:

上面我們解決了在頁面中智能感覺的問題, 其實在獨立的.js檔案中我們同樣可以啟用腳本的智能感覺, 在IntellisenseDemo.js檔案中,添加如下語句:

更新JScript Intellisense, 會發現在腳本中也啟用了智能提示:

注意,本文中講解的腳本智能感覺不僅适用于jQuery類庫, 還适用于自己編寫的javascript代碼.

本文簡單介紹了jQuery, 以及如何搭建腳本開發環境. 示例程式沒有複雜的功能, 可能還無法讓沒有接觸過jQuery的人認識到它的強大.但是僅憑借"多浏覽器支援"這一特性, 就足以讓我們學習并使用jQuery, 因為如今想編寫跨浏覽器的腳本真的是一件困難的事情!

在後續文章中我們将深入學習jQuery選擇器, 事件, 工具函數, 動畫, 以及插件等.

本文代碼下載下傳:

<a href="http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-1.rar">http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-1.rar</a>