隨著Web 2.0的興起，JavaScript越來越受到重視，一系列JavaScript程序庫也蓬勃發展起來。從早期的Prototype、Dojo到2006年的jQuery，再到2007年的Ext JS，互聯網正在掀起一場JavaScript風暴。jQuery以其獨特優雅的姿態，始終處於這場風暴的中心，受到越來越多的人的追捧。
1.1 JavaScript和JavaScript庫
1.1.1 JavaScript簡介
在正式介紹jQuery之前，有必要先瞭解一下JavaScript。
JavaScript是Netscape公司開發的一種腳本語言（scripting language）。JavaScript的出現使得網頁和用戶之間實現了一種實時的、動態的和交互的關係，使網頁可以包含更多活躍的元素和更加精彩的內容。JavaScript自身存在3個弊端，即複雜的文檔對像模型（DOM）、不一致的瀏覽器實現和便捷的開發、調試工具的缺乏。
正當JavaScript從開發者的視線中漸漸隱去時，一種新型的基於JavaScript的Web技術——Ajax（Asynchronous JavaScript And XML，異步的JavaScript和XML）誕生了。而使人們真正認識到Ajax技術的強大的導火索是Google公司推出的一系列新型Web應用，例如Gmail、Google Suggest和Google Map等。如今，浩瀚的互聯網中基於JavaScript的應用越來越多，JavaScript不再是一種僅僅用於製作Web頁面的簡單腳本。
1.1.2 JavaScript庫作用及對比
為了簡化JavaScript的開發，一些JavaScript程序庫誕生了。JavaScript程序庫封裝了很多預定義的對象和實用函數，能幫助使用者輕鬆地建立有高難度交互的Web 2.0特性的富客戶端頁面，並且兼容各大瀏覽器。下面是目前幾種流行的JavaScript程序庫的介紹和對比。
Prototype（http://www.prototypejs.org/），Logo如圖1-1所示。
圖1-1 Prototype的Logo
Prototype是最早成型的JavaScript庫之一，對JavaScript的內置對像（例如String對像、Array對像等）做了大量的擴展。現在還有很多項目使用Prototype。Prototype可以看做是把很多好的、有用的JavaScript的方法組合在一起而形成的JavaScript庫。使用者可以在需要的時候隨時將其中的幾段代碼抽出來放進自己的腳本裡。但是由於Prototype成型年代較早，從整體上對面向對象的編程思想把握得不是很到位，導致了其結構的鬆散。不過現在Prototype也在慢慢改進。
Dojo（http://dojotoolkit.org/），Logo如圖1-2所示。
圖1-2 Dojo的Logo
Dojo的強大之處在於Dojo提供了很多其他JavaScript庫所沒有提供的功能。例如離線存儲的API、生成圖標的組件、基於SVG/VML的矢量圖形庫和Comet支持等。Dojo是一款非常適合企業級應用的JavaScript庫，並且得到了IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺點也是很明顯的：學習曲線陡，文檔不齊全，最嚴重的就是API不穩定，每次升級都可能導致已有的程序失效。但是自從Dojo的1.0.0版出現以後，情況有所好轉，Dojo還是一個很有發展潛力的庫。
YUI（http://developer.yahoo.com/yui/），Logo如圖1-3所示。
圖1-3 YUI的Logo
YUI（Yahoo! UI，The Yahoo! User Interface Library），是由Yahoo公司開發的一套完備的、擴展性良好的富交互網頁程序工具集。YUI封裝了一系列比較豐富的功能，例如DOM操作和Ajax應用等，同時還包括了幾個核心的CSS文件。該庫本身文檔極其完備，代碼編寫得也非常規範。
Ext JS（http://www.extjs.com/），Logo如圖1-4所示。
圖1-4 Ext JS的Logo
Ext JS常簡稱為Ext，原本是對YUI的一個擴展，主要用於創建前端用戶界面，如今已經發展到可以利用包括jQuery在內的多種JavaScript框架作為基礎庫，而Ext作為界面的擴展庫來使用。Ext可以用來開發富有華麗外觀的富客戶端應用，能使B/S應用更加具有活力。但是由於Ext側重於界面，本身比較臃腫，所以使用之前請先權衡利弊。另外，需要注意的是，Ext並非完全免費，如果用於商業用途，需要付費獲得授權許可。
MooTools（http://mootools.net/），Logo如圖1-5所示。
圖1-5 MooTools的Logo
MooTools是一套輕量、簡潔、模塊化和面向對象的JavaScript框架。MooTools的語法幾乎跟Prototype一樣，但卻提供了更為強大的功能、更好的擴展性和兼容性。其模塊化思想非常優秀，核心代碼大小只有8KB。無論用到哪個模塊都可即時導入，即使是完整版大小也不超過160KB。MooTools完全徹底的貫徹了面向對象的編程思想，語法簡潔直觀，文檔完善，是一個非常不錯的JavaScript庫。
jQuery（http://jquery.com），Logo如圖1-6所示。
圖1-6 jQuery的Logo
本書的重點jQuery同樣是一個輕量級的庫，擁有強大的選擇器、出色的DOM操作、可靠的事件處理、完善的兼容性和鏈式操作等功能。這些優點吸引了一批批的JavaScript開發者去學習它、研究它。
總之，每個JavaScript庫都有各自的優點和缺點，同時也有各自的支持者和反對者，目前幾個最流行的JavaScript庫的Google訪問量趨勢圖，如圖1-7所示。很明顯，自從jQuery誕生那天起，其關注度就一直在穩步上升，jQuery已經逐漸從其他JavaScript庫中脫穎而出，成為Web開發人員的最佳選擇。
圖1-7 各種JavaScript庫的Google訪問量趨勢圖
注意：讀者可以通過鏈接http://www.google.com/trends來查找更多相關搜索量指數。
1.2 加入jQuery
1.2.1 jQuery簡介
jQuery是繼Prototype之後又一個優秀的JavaScript庫，是一個由John Resig創建於2006年1月的開源項目。現在的jQuery團隊主要包括核心庫、UI、插件和jQuery Mobile等開發人員以及推廣和網站設計、維護人員。
jQuery憑借簡潔的語法和跨平台的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax的操作。其獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之，無論是網頁設計師、後台開發者、業餘愛好者還是項目管理者，也無論是JavaScript初學者還是JavaScript高手，都有足夠多的理由去學習jQuery。
1.2.2 jQuery的優勢
jQuery強調的理念是寫得少，做得多（write less，do more）。jQuery獨特的選擇器、鏈式操作、事件處理機制和封裝完善的Ajax都是其他JavaScript庫望塵莫及的。概括起來，jQuery有以下優勢。
（1）輕量級。jQuery非常輕巧，採用UglifyJS（https://github.com/mishoo/UglifyJS）壓縮後，大小保持在30KB左右。
注意：為了使jQuery變得輕巧，jQuery一直在尋求最好的壓縮工具，所以jQuery的壓縮工具也一直在變化，從最早採用Dean Edwards編寫的Packer（http://dean.edwards.name/packer/），到後來使用Google推出的Closure Compiler進行壓縮，最後到目前使用UglifyJS進行壓縮。
（2）強大的選擇器。jQuery允許開發者使用從CSS 1到CSS 3幾乎所有的選擇器，以及jQuery獨創的高級而複雜的選擇器。另外還可以加入插件使其支持XPath選擇器，甚至開發者可以編寫屬於自己的選擇器。由於jQuery支持選擇器這一特性，因此有一定CSS經驗的開發人員可以很容易地切入到jQuery的學習中來。第2章將詳細講解jQuery中強大的選擇器。
（3）出色的DOM操作的封裝。jQuery封裝了大量常用的DOM操作，使開發者在編寫DOM操作相關程序的時候能夠得心應手。jQuery輕鬆地完成各種原本非常複雜的操作，讓JavaScript新手也能寫出出色的程序。第3章將重點介紹jQuery中的DOM操作。
（4）可靠的事件處理機制。jQuery的事件處理機制吸收了JavaScript專家Dean Edwards編寫的事件處理函數的精華，使得jQuery在處理事件綁定的時候相當可靠。在預留退路（graceful degradation）、循序漸進以及非入侵式（Unobtrusive）編程思想方面，jQuery也做得非常不錯。第4章將重點介紹jQuery中的事件處理。
（5）完善的Ajax。jQuery將所有的Ajax操作封裝到一個函數$.ajax裡，使得開發者處理Ajax的時候能夠專心處理業務邏輯而無需關心複雜的瀏覽器兼容性和XMLHttpRequest對象的創建和使用的問題。第6章將重點介紹jQuery中的Ajax處理。
（6）不污染頂級變量。jQuery只建立一個名為jQuery的對象，其所有的函數方法都在這個對象之下。其別名$也可以隨時交出控制權，絕對不會污染其他的對象。該特性使jQuery可以與其他JavaScript庫共存，在項目中放心地引用而不需要考慮到後期可能的衝突。
（7）出色的瀏覽器兼容性。作為一個流行的JavaScript庫，瀏覽器的兼容性是必須具備的條件之一。jQuery能夠在IE 6.0+、FF 3.6+、Safari 5.0+、Opera和Chrome等瀏覽器下正常運行。jQuery同時修復了一些瀏覽器之間的差異，使開發者不必在開展項目前建立瀏覽器兼容庫。
（8）鏈式操作方式。jQuery中最有特色的莫過於它的鏈式操作方式——即對發生在同一個jQuery對像上的一組動作，可以直接連寫而無需重複獲取對象。這一特點使jQuery的代碼無比優雅。在第1.3.3小節中，將要討論代碼風格的問題，從最開始就培養良好的編程習慣，將受益無窮。
（9）隱式迭代。當用jQuery找到帶有「.myClass」類的全部元素，然後隱藏它們時，無需循環遍歷每一個返回的元素。相反，jQuery裡的方法都被設計成自動操作對像集合，而不是單獨的對象，這使得大量的循環結構變得不再必要，從而大幅地減少了代碼量。
（10）行為層與結構層的分離。開發者可以使用jQuery選擇器選中元素，然後直接給元素添加事件。這種將行為層與結構層完全分離的思想，可以使jQuery開發人員和HTML或其他頁面開發人員各司其職，擺脫過去開發衝突或個人單干的開發模式。同時，後期維護也非常方便，不需要在HTML代碼中尋找某些函數和重複修改HTML代碼。
（11）豐富的插件支持。jQuery的易擴展性，吸引了來自全球的開發者來編寫jQuery的擴展插件。目前已經有成百上千的官方插件支持，而且還不斷有新插件面世。第7章將介紹目前流行的幾款插件並指導大家編寫自己的插件。
（12）完善的文檔。jQuery的文檔非常豐富，不管是英文文檔，還是中文文檔。我們也在長期更新著jQuery的中文文檔。
（13）開源。jQuery是一個開源的產品，任何人都可以自由地使用並提出改進意見。
下面就一起開始我們的jQuery之旅吧。
1.3 jQuery代碼的編寫
1.3.1 配置jQuery環境
1．獲取jQuery最新版本
進入jQuery的官方網站http://jquery.com/。圖1-8所示的右邊的GRAB THE LATEST VERSION區域，下載最新的jQuery庫文件。
圖1-8 jQuery官方網站截圖
2．jQuery庫類型說明
jQuery庫的類型分為兩種，分別是生產版（最小化和壓縮版）和開發版（未壓縮版），它們的區別如表1-1所示。
表1-1 幾種jQuery庫類型對比
名 稱大 小說 明jquery.js（開發版）約229 KB完整無壓縮版本，主要用於測試、學習和開發jquery.min.js（生產版）約31 KB經過工具壓縮或經過服務器開啟Gzip壓縮 主要應用於產品和項目為統一本書的講解，建議選擇下載jQuery最新版本。
3．jQuery環境配置
jQuery不需要安裝，把下載的jquery.js放到網站上的一個公共的位置，想要在某個頁面上使用jQuery時，只需要在相關的HTML文檔中引入該庫文件的位置即可。
4．在頁面中引入jQuery
本書將jquery.js放在目錄scripts下，在所提供的jQuery例子中為了方便調試，引用時使用的是相對路徑。在實際項目中，讀者可以根據實際需要調整jQuery庫的路徑。
在編寫的頁面代碼中<head>標籤內引入jQuery庫後，就可以使用jQuery庫了，程序如下：
注意：在本書的所有章節中，如果沒有特別說明，jQuery庫都是默認導入的。
1.3.2 編寫簡單的jQuery代碼
在開始編寫第1個jQuery程序之前，首先應該明確一點，在jQuery庫中，$就是jQuery的一個簡寫形式，例如$("#foo")和jQuery("#foo")是等價的，$.ajax和jQuery.ajax是等價的。如果沒有特別說明，程序中的$符號都是jQuery的一個簡寫形式。
下面開始編寫第1個jQuery程序。
運行結果如圖1-9所示。
圖1-9 輸出Hello World!
在上面的代碼中有一個陌生的代碼片段，如下：
這段代碼的作用類似於傳統JavaScript中的window.onload方法，不過與window.onload還是有些區別。表格1-2對它們進行了簡單對比。
表1-2 window.onload與$(document).ready的對比
注意：關於$(document).ready的詳細說明可以參考附錄A；關於$(document).ready和window.onload的詳細對比，可以參考第4章4.1.1小節。
1.3.3 jQuery代碼風格
代碼風格即程序開發人員所編寫源代碼的書寫風格。良好代碼風格的特點是使代碼易讀。如果能統一jQuery代碼編碼風格，對日後代碼的維護是非常有利的。
1．鏈式操作風格
以一個實際項目中的代碼為例，這是一個導航欄，HTML代碼如下：
代碼執行效果如圖1-10所示。
圖1-10 導航欄初始化
項目需求是做一個導航欄，單擊不同的商品名稱鏈接，顯示相應的內容，同時高亮顯示當前選擇的商品。
選擇jQuery來實現這個導航欄效果，編寫的代碼片段如下：
這段代碼的作用是，當鼠標單擊到a元素（它是class含有level1的子元素）的時候，給其添加一個名為current的class，然後將緊鄰其後面的元素顯示出來，同時將它的父輩的同輩元素內部的子元素<a>都去掉一個名為current的class，並且將緊鄰它們後面的元素都隱藏。
單擊導航欄，效果如圖1-11和圖1-12所示。
圖1-11 效果1
圖1-12 效果2
這就是jQuery強大的鏈式操作，一行代碼就完成了導航欄的功能。
雖然jQuery做到了行為和內容的分離，但jQuery代碼本身也應該擁有良好的層次結構及規範，這樣才能進一步改善代碼的可讀性和可維護性。因此，推薦一種帶有適當的格式的代碼風格。上面的代碼改成如下格式：
代碼格式調整後，易讀性好了很多。
也許讀者看了上面的代碼還是不明白其中的要領，這裡總結3種情況。
（1）對於同一個對像不超過3個操作的，可以直接寫成一行。代碼如下：
（2）對於同一個對象的較多操作，建議每行寫一個操作。代碼如下：
（3）對於多個對象的少量操作，可以每個對象寫一行，如果涉及子元素，可以考慮適當地縮進。例如上面提到的代碼：
注意：程序塊嚴格採用縮進風格書寫，能保證代碼清晰易讀，風格一致。
2．為代碼添加註釋
jQuery以其強大的選擇器著稱，有時候很複雜的問題用一行選擇器就可以輕鬆解決。但是使用jQuery進行代碼編寫時應該注意一個問題，就是必要的註釋。請看下面的例子，代碼如下：
這行代碼即使是經驗豐富的jQuery開發者也不能立刻看懂。
這行代碼的作用是，在一個id為table的表格的tbody元素中，如果每行的一列中的checkbox沒有被禁用，則把這一行的背景色設為紅色。
jQuery的選擇器很強大，能夠省去使用普通的JavaScript必須編寫的很多行代碼。但是，在編寫一個優秀的選擇器的時候，千萬不要忘記給這一段代碼加上註釋，這很重要。無論是自己日後閱讀還是與他人分享、合作開發，註釋都能起到良好的效果。在上段代碼片段中加上註釋就能提高其易讀性，如下所示：
通過類似有意義的註釋，能夠培養良好的編碼習慣和風格，提高開發效率。
1.4 jQuery對像和DOM對像
1.4.1 DOM對像和jQuery對像簡介
第一次學習jQuery，經常分辨不清哪些是jQuery對像、哪些是DOM對象，因此需要重點瞭解jQuery對像和DOM對像以及它們之間的關係。
1．DOM對像
DOM（Document Object Model，文檔對像模型），每一份DOM都可以表示成一棵樹。下面來構建一個非常基本的網頁，網頁代碼如下：
初始化效果圖如圖1-13所示。
圖1-13 一個非常基本的網頁
可以把上面的HTML結構描述為一棵DOM樹，如圖1-14所示。
圖1-14 把網頁元素表示為DOM樹
在這棵DOM樹中，<h3>、<p>、<ul>以及<ul>的3個<li>子節點都是DOM元素節點。可以通過JavaScript中的getElementsByTagName或者getElementById來獲取元素節點。像這樣得到的DOM元素就是DOM對象。DOM對象可以使用JavaScript中的方法，示例如下：
2．jQuery對像
jQuery對象就是通過jQuery包裝DOM對像後產生的對象。
jQuery對象是jQuery獨有的。如果一個對象是jQuery對象，那麼就可以使用jQuery裡的方法。例如：
這段代碼等同於：
在jQuery對像中無法使用DOM對象的任何方法。例如$("#id").innerHTML和$("#id").checked之類的寫法都是錯誤的，可以用$("#id").html和$("#id").attr("checked")之類的jQuery方法來代替。同樣，DOM對象也不能使用jQuery裡的方法。例如document.get Element ById("id").html也會報錯，只能用document.getElementById("id").innerHTML語句。
注意：用#id作為選擇符取得的是jQuery對像而並非document.getElementById("id")所得到的DOM對象，兩者並不等價。關於「#」選擇符的運用，將在下一章進行講解。從學習jQuery開始就應當樹立正確的觀念，分清jQuery對像和DOM對像之間的區別，之後學習jQuery就會輕鬆很多。
1.4.2 jQurey對像和DOM對象的相互轉換
在討論jQurey對像和DOM對象的相互轉換之前，先約定好定義變量的風格。如果獲取的對象是jQuery對象，那麼在變量前面加上$，例如：
如果獲取的是DOM對象，則定義如下：
本書中的例子均會以這種方式呈現，以方便讀者閱讀。
1．jQuery對像轉成DOM對像
jQuery對像不能使用DOM中的方法，但如果對jQuery對像所提供的方法不熟悉，或者jQuery沒有封裝想要的方法，不得不使用DOM對象的時候，有以下兩種處理方法。
jQuery提供了兩種方法將一個jQuery對像轉換成DOM對象，即[index]和get（index）。
（1）jQuery對象是一個類似數組的對象，可以通過[index]的方法得到相應的DOM對象。
jQuery代碼如下：
（2）另一種方法是jQuery本身提供的，通過get(index)方法得到相應的DOM對象。
jQuery代碼如下：
2．DOM對像轉成jQuery對像
對於一個DOM對象，只需要用$把DOM對像包裝起來，就可以獲得一個jQuery對象了。方式為$（DOM對像）。
jQuery代碼如下：
轉換後，可以任意使用jQuery中的方法。
通過以上方法，可以任意地相互轉換jQuery對像和DOM對象。
最後再次強調，DOM對像才能使用DOM中的方法，jQuery對像不可以使用DOM中的方法，但jQuery對像提供了一套更加完善的工具用於操作DOM，關於jQuery的DOM操作將在第3章進行詳細講解。
注意：平時用到的jQuery對象都是通過$函數製造出來的，$函數就是一個jQuery對象的製造工廠。
1.4.3 實例研究
下面舉個簡單的例子，來加深對jQuery對像和DOM對象的理解。
有些論壇在用戶註冊的時候，必須先要同意論壇的規章制度，才可以進行下一步操作。如圖1-15是某個論壇的註冊頁面，用戶必須選中頁面下方的「同意並接受註冊協議」復選框，否則不能提交。
圖1-15 某論壇註冊的截圖
編寫一段簡單的代碼來實現這個功能。新建一個空白的頁面，然後添加以下HTML代碼：
HTML代碼初始效果如圖1-16所示。
圖1-16 初始效果
然後編寫JavaScript部分。前面講過，沒有特殊聲明，jQuery庫是默認導入的。
通過$("#cr")獲取到復選框元素，然後通過判斷復選框是否被選中，來執行下一步操作。
首先，用DOM方式來判斷復選框是否被選中，代碼如下：
實現上述代碼後，選中「我已經閱讀了上面制度」復選框，如圖1-17所示。
圖1-17 選中選項後的效果圖
換一種方式，使用jQuery中的方法來判斷選項是否被選中，代碼如下：
上面的例子簡單地演示了DOM對像和jQuery對象的不同，但最終效果是一樣的。
注意：is(":checked")是jQuery中的方法，判斷jQuery對象是否被選中，返回boolean值。
1.5 解決jQuery和其他庫的衝突
在jQuery庫中，幾乎所有的插件都被限制在它的命名空間裡。通常，全局對象都被很好地存儲在jQuery命名空間裡，因此當把jQuery和其他JavaScript庫（例如Prototype、MooTools或YUI）一起使用時，不會引起衝突。
注意：默認情況下，jQuery用$作為自身的快捷方式。
1．jQuery庫在其他庫之後導入
在其他庫和jQuery庫都被加載完畢後，可以在任何時候調用jQuery.noConflict函數來將變量$的控制權移交給其他JavaScript庫。示例如下：
然後，就可以在程序裡將jQuery函數作為jQuery對象的製造工廠。
此外，還有另一種選擇。如果想確保jQuery不會與其他庫衝突，但又想自定義一個快捷方式，可以進行如下操作：
可以自定義備用名稱，例如jq、$J、awesomequery等。
如果不想給jQuery自定義這些備用名稱，還想使用$而不管其他庫的$方法，同時又不想與其他庫相衝突，那麼可以使用以下兩種解決方法。
其一：
其二：
這應該是最理想的方式，因為可以通過改變最少的代碼來實現全面的兼容性。
2．jQuery庫在其他庫之前導入
如果jQuery庫在其他庫之前就導入了，那麼可以直接使用「jQuery」來做一些jQuery的工作。同時，可以使用$方法作為其他庫的快捷方式。這裡無需調用jQuery.noConflict函數。示例如下：
有了這些方法來解決衝突，就可以在項目中放心地引用jQuery了。
1.6 jQuery開發工具和插件
1．Dreamweaver
Dreamweaver是建立Web站點和應用程序的專業工具。Dreamweaver將可視佈局工具、應用程序開發功能和代碼編輯支持組合在一起，使得各個層次的開發人員和設計人員都能夠快速創建基於標準的網站和應用程序。從對基於CSS的設計的領先支持到手工編碼功能，Dreamweaver提供了專業人員在一個集成、高效的開發環境中所需的工具。
目前新版的Adobe Dreamweaver CS 5.5已經加入了jQuery語法自動提示功能。如果你還在使用老的版本，又想有jQuery語法提示功能的話，可以下載一個插件。在http://code.google.com/p/jquery-api-zh-cn/downloads/list網址中下載一個名為jQuery_api_for_dw4.rar或jQuery_api_for_dw3.rar的插件。
在Dreamweaver中依次選擇「命令」→「擴展管理」→「安裝擴展」→「jQuery_api_for_dw4.mxp」命令後，就會自動安裝插件了。
如果效果如圖1-18所示，即表明安裝成功。
圖1-18 安裝Dreamweaver插件
擴展成功後，重新啟動Dreamweaver，新建空白頁面，引入jQuery，然後編寫jQuery代碼，會發現已經具有自動提示功能了，如圖1-19所示。
圖1-19 自動提示
注意：（1）如果用戶的Dreamweaver沒有擴展管理功能，可以去http://www.adobe.com/cn/exchange/下載相應軟件即可。
（2）建議讀者安裝最新版本的Dreamweaver。
2．Aptana
Aptana是一個功能非常強大、開源和專注於JavaScript的Ajax開發IDE。
Aptana的特性如下。
提供JavaScript、JavaScript函數、HTML和CSS語言的Code Assist功能。
顯示JavaScript、HTML和CSS的代碼結構。
支持JavaScript、HTML和CSS代碼提示，包括JavaScript自定義函數。
代碼語法錯誤提示。
支持Aptana UI自定義和擴展。
支持跨平台。
支持FTP/SFTP。
調試JavaScript。
支持流行Ajax框架的Code Assist功能，包括AFLAX、Dojo、jQuery、MochiKit、Prototype、Rico、script.aculo.us、Yahoo UI和Ext。
通過插件擴展後則可以作為Adobe AIR iPhone和Nakia等的開發工具。
提供了Eclipse插件。
當然Aptana功能強大也是有代價的，它佔用電腦內存比較多。可以在http://www.aptana.com/網址下載相應的軟件進行安裝。
要使Aptana支持jQuery自動提示代碼功能，非常簡單，只要下載一個jquery.ruble文件即可。可以去https://github.com/aptana/javascript-jquery.ruble下載，這個文件是「.sdocml」後綴，並將之放到你的項目下（當然，jQuery文件是必須引入的）。插件效果如圖1-20所示。
圖1-20 Aptana自動提示截圖
3．jQueryWTP和Spket插件
jQueryWTP和Spket這兩款插件都可以使Eclipse支持jQuery自動提示代碼功能，可以分別在http://www.langtags.com/jquerywtp/和http://spket.com/網址中下載相應的插件。截圖如圖1-21所示。
圖1-21 jQueryWTP自動提示功能截圖
4．Visual Studio2008
Visual Studio是Microsoft公司推出的程序集成開發環境，最近一次升級（Visual Studio 2008）之後便可以使用jQuery智能提示了。首先需要下載一個補丁，地址如下：
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736。
補丁安裝好後，下載jquery.vsdoc.js（http://docs.jquery.com/Downloading_jQuery）文件，把它與jquery.js文件放在同一個文件夾下。最後在頁面中用<script>標籤引入jQuery腳本庫，Visual Studio 2008會自動識別並找到jquery.vsdoc.js文件。這樣就實現了代碼智能提示功能。如圖1-22所示。
圖1-22 Visual Studio 2008智能提示截圖
5．其他工具
由於jQuery本身就是JavaScript，因此也可以使用任意通用文本編輯器進行開發，例如EditPlus、EmEditor和VIM等等。
合理地利用這些工具，能節約大量的腳本開發時間。
1.7 小結
本章前半部分簡單介紹了JavaScript，同時也對目前流行的幾個JavaScript庫進行了介紹和對比。然後介紹了jQuery的由來和優勢，接下來編寫了一個最簡單的jQuery程序。在程序中，接觸到了$(document).ready，此外還約定了jQuery的代碼風格和變量風格。
後半部分重點介紹了jQuery對像和DOM對象的區別以及它們之間的相互轉換，中間插入了一個簡單的實例用來加強對jQuery對像和DOM對象的理解。然後講解了如何解決jQuery和其他JavaScript庫衝突的問題，幫助那些項目上已經使用了其他JavaScript庫的使用者。最後介紹了幾個jQuery的自動提示代碼功能的插件。
第1章特意強調了代碼風格和變量風格，jQuery對像和DOM對象，希望能引起初學者的注意。