1、前 言前 言jQuery JavaScript框架是Web開發(fā)領(lǐng)域一顆冉冉升起的新星。在最近幾年，隨著Java Script驅(qū)動的、被稱為Web 2.0的網(wǎng)站如雨后春筍般地不斷增長，JavaScript框架已經(jīng)變得非常流行。這些Web 2.0網(wǎng)站通常會大量使用諸如AJAX和JavaScript的技術(shù)來實現(xiàn)平滑的圖形增強效果，如果不使用JavaScript，這些Web 2.0功能將難以甚至根本無法合并進來。作為一個JavaScript庫，jQuery的任務(wù)是非常簡單的它致力于減輕Web開發(fā)人員的工作負擔，消除跨瀏覽器開發(fā)中的一些困難，并使Web開發(fā)人員需要完成的常見任務(wù)變得簡單了很多。實踐一再證

2、明，jQuery確實可以將多行純JavaScript代碼簡化為區(qū)區(qū)幾行jQuery代碼，甚至在很多情況下簡化為一行jQuery代碼。jQuery致力于消除JavaScript開發(fā)中的道道樊籬，它盡可能地消除了JavaScript開發(fā)的冗余現(xiàn)象，在各個瀏覽器存在差異的關(guān)鍵區(qū)域(例如Microsoft的事件API和W3C的事件API之間，以及其他一些關(guān)鍵任務(wù)，例如獲取事件發(fā)生時用戶鼠標指針的位置等)，jQuery為這些跨瀏覽器開發(fā)工作提供了統(tǒng)一的代碼。jQuery是一個簡潔的、輕量級的JavaScript庫，它可以工作在Microsoft的6.0版本及以上的IE瀏覽器、1.5版本及以上的Firef

3、ox瀏覽器、2.0.2版本及以上的Safari瀏覽器、9.0版本及以上的Opera瀏覽器以及Google新的0.2版本及以上的Chrome瀏覽器上。jQuery的使用方法是非常簡單的只需在HTML或XHTML文檔中添加一個包含jQuery庫文件的標記鏈接即可。本書詳細介紹了jQuery的API(Application Programming Interface，應(yīng)用程序編程接口)組件，并詳細介紹了如何結(jié)合使用jQuery框架的所有基本要點來快速開發(fā)客戶端應(yīng)用程序。本書還介紹了jQuery UI庫的用法。創(chuàng)建客戶端用戶界面曾是一項非常繁瑣的任務(wù)，而如果使用jQuery UI庫，這些任務(wù)則變得出奇

4、簡單，即使沒用豐富JavaScript編程經(jīng)驗的普通開發(fā)者，也可以使用jQuery UI庫創(chuàng)建出專業(yè)的用戶界面。在蘋果公司的Mac主頁也許你想知道，如何在網(wǎng)站中使用JavaScript、HTML和CSS來創(chuàng)建虛擬的彈出窗口呢？jQuery UI庫不但提供了對創(chuàng)建虛擬彈出窗口的支持，此外還允許啟用或關(guān)閉淡入或淡出動畫效果，或者將尺寸從小到大的動畫效果應(yīng)用于彈出窗口。jQuery UI庫還可以讓開發(fā)人員通過使用JavaScript、標記代碼和CSS來創(chuàng)建動畫和漸變的效果。在使用jQuery UI庫之前，你可能會認為這些動畫效果只有在Adobe的Flash player中才能實現(xiàn)。jQuery框架本

5、身已經(jīng)贏得得了大量主流網(wǎng)站的青睞。jQuery已經(jīng)被應(yīng)用于Google,、Dell、Digg、NBC、CBS和Netfli等重要網(wǎng)站，并獲得了Mozilla基金會和流行的WordPress和Drupal PHP框架的支持。jQuery的運行速度很快甚至是非常快但它的體積非常小。如果使用壓縮或gzip壓縮的版本，jQuery庫僅僅有15KB大小。使用jQuery，只需少量的幾行代碼，就可以創(chuàng)建復(fù)雜的而專業(yè)的、視覺驅(qū)動的用戶界面和各種特效。那些曾經(jīng)需要開發(fā)人員花費數(shù)天、甚至數(shù)周才能完成的任務(wù)，現(xiàn)在使用jQuery僅僅只需幾個小時即可實現(xiàn)。讀者對象本書適合于任何希望使用更少代碼實現(xiàn)更多功能的Web開

6、發(fā)人員。在閱讀本書之前，應(yīng)該基本了解JavaScript。本書將復(fù)習一些基本的JavaScript編程概念，如事件API，但不詳細介紹JavaScript語言本身。讀者還需要對DOM(Document Object Model，文檔對象模型)和基本的JavaScript程序設(shè)計語法有一個簡單的理解。另外，讀者還需要對HTML和CSS有所了解，本書假定你已經(jīng)具備了這些知識。對于一個初學的讀者來說，也許雖然能領(lǐng)會本書示例中代碼的含義，但是可能無法理解某些技術(shù)術(shù)語和程序設(shè)計的概念，這些內(nèi)容通常是在JavaScript入門書籍中介紹的。因此，如果你是一個想努力掌握jQuery的初學者，建議你在閱讀本書

7、的同時也閱讀一本JavaScript的入門書籍。筆者建議閱讀下列由清華大學出版社引進并出版的JavaScript入門書籍，以幫助初學者掌握相應(yīng)的基礎(chǔ)知識： Web編程入門經(jīng)典應(yīng)用HTML XHML CSS，2008年第2版，Jon Duckett著。 CSS入門經(jīng)典(第2版)，2007年，筆者所著。 JavaScript入門經(jīng)典(第3版)，2007年，Paul Wilton和Jeremy McPeak著。要想獲得JavaScript方面比較深入的知識，筆者建議參考由Nicholas C. Zakas所著的Professional JavaScript for Web Developers，20

8、09年第2版。內(nèi)容概要本書介紹了jQuery框架和jQuery UI JavaScript框架，并通過詳細的示例演示了如何使用jQuery框架，從而實現(xiàn)比使用純JavaScript更快的速度和更豐富的功能。本書介紹了jQuery的API公開的每個方法，使用這些API所包含的方法，可以用最少的代碼來更快地完成繁瑣的任務(wù)。jQuery的一些方法用于通過DOM從標記文檔中選取元素，一些方法則用于遍歷選擇集或者使用jQuery所提供的精確控制來過濾選擇集。使用jQuery所提供的方法操作DOM將變得更加簡單和輕松。jQuery還消除了跨瀏覽器、跨平臺開發(fā)過程中那些令人頭疼的問題，如不同瀏覽器在事件模型

9、上的差異。jQuery不僅消除了這些令人頭疼的差異，還大大減少了掛鉤事件所需編寫的代碼量，在jQuery中使用事件將變得更加簡單。jQuery甚至還提供了模擬事件的功能。本書的第部分介紹了如何利用jQuery UI庫來創(chuàng)建圖形化驅(qū)動的UI部件(widget)。jQuery可以將某些內(nèi)容拆分為多個部分，用同一頁面上的多個選項卡(tab)來包含每一個部分的內(nèi)容。jQuery還支持自定義這些選項卡的外觀和效果，甚至可以在鼠標移到選項卡上或在選項卡上單擊時為選項卡提供不同的特效，從而使選項卡具有更精美的外觀和效果。用jQuery UI庫來創(chuàng)建類似于蘋果公司Mac網(wǎng)站上的手風琴(accordion)展開

10、、折疊效果的側(cè)邊欄也非常簡單。這些側(cè)邊欄包含有兩個或多個內(nèi)容窗格，當鼠標指針移到某一個內(nèi)容窗格之上時，窗格的展開、折疊狀態(tài)將通過一個平滑、無縫的動畫效果來進行轉(zhuǎn)換，即之前的窗格將被折疊起來，而當前窗格將被展開顯示。jQuery UI庫還支持將任意元素轉(zhuǎn)換為“可拖動”元素，在頁面上只需單擊該元素并按住鼠標進行拖動，就可以使用鼠標將元素拖動到頁面中的任何地方。使用jQuery UI庫來創(chuàng)建具有拖放功能的用戶界面也變得非常容易，可以使用jQuery插件來創(chuàng)建一個投放區(qū)域，可以拖動頁面上的其他元素并投放到該區(qū)域之中，就像在操作系統(tǒng)的文件管理器中拖放元素那樣。另外，jQuery UI庫還可以將一個列表元

11、素轉(zhuǎn)換為一個“可排序”列表，可以通過拖放方式來排序列表，列表將根據(jù)列表項投放的位置來重新排序列表項的順序。另外，jQuery UI庫還支持使用鼠標拖拽出一個選取框來選取元素，就像在操作系統(tǒng)的文件管理器中選取多個文件那樣。jQuery UI庫還提供了使用鼠標來調(diào)整頁面元素尺寸的插件。所有這些在計算機桌面系統(tǒng)中可以實現(xiàn)的簡潔操作，都可以使用jQuery UI庫在Web瀏覽器中實現(xiàn)。jQuery UI庫還提供了一個用于在表單域中輸入日期的Datepicker插件，該插件是一個JavaScript驅(qū)動的、精美易用的日期選擇器插件，當在輸入域中單擊時，將自動彈出該日期選擇器。使用jQuery UI庫，還

12、可以創(chuàng)建類似于虛擬彈出窗口的自定義彈出窗口，但是這種彈出窗口是由標記代碼、CSS和JavaScript所組成的，并且它并不會打開一個單獨的瀏覽器窗口。jQuery UI庫還提供了一個圖形化的滑動條(slider bar)插件，它類似于媒體播放器中的音量控制條。就像在通常情況下jQuery大大簡化了JavaScript的程序設(shè)計一樣，jQuery UI庫也極大地簡化了創(chuàng)建圖形化用戶界面(GUI)的繁重工作。在jQuery UI庫的支持下，只需較少的開發(fā)工作，就可以創(chuàng)建出非常專業(yè)的用戶界面效果。如果讀者對jQuery的最新信息感興趣，如jQuery正在進行的改進，以及與Web開發(fā)相關(guān)的話題等，請參

13、考jQuery的官方博客所提供的資料，或閱讀jQuery之父John Resig的博客，網(wǎng)址是。如果讀者在使用jQuery的過程中需要尋求幫助，可以參加論壇上的關(guān)于程序設(shè)計方面的討論，你可以免費加入相應(yīng)的論壇，并咨詢jQuery程序設(shè)計的相關(guān)問題。jQuery社區(qū)中也提供了一些程序設(shè)計方面的論壇，可以在網(wǎng)站最后，筆者自己也建立了一個博客，網(wǎng)址是。讀者也可以直接聯(lián)系我，就閱讀本書的感想或相關(guān)Web開發(fā)項目的內(nèi)容進行交流和和討論。本書結(jié)構(gòu)本書分為兩個部分：第部分介紹了jQuery庫支持的基本API，第部分則介紹了jQuery UI庫的內(nèi)容。第部分：jQuery API 第

14、1章：jQuery簡介第1章簡要地介紹了jQuery的起源，以及為什么需要使用jQuery。本章還簡要介紹了如何下載jQuery庫和如何創(chuàng)建第一個jQuery驅(qū)動的JavaScript程序。 第2章：選擇和過濾本章簡要介紹了jQuery的選擇器引擎，jQuery使用類似于CSS的選擇器從DOM中選擇元素。本章還介紹了jQuery所支持的操作選擇集的各種方法，這些方法可以用于精確地控制從DOM中選取哪些元素。本章介紹了用于選擇元素、祖先元素、父元素、兄弟節(jié)點元素和后代元素的各種方法，以及如何移除選擇集中的元素，如何將元素添加到選擇集中，以及如何獲取選擇集中的一個特定子集。 第3章：事件在本章開始

15、，我們復(fù)習了在純JavaScript中使用的事件模型。目前存在3種事件模型，即傳統(tǒng)事件模型、W3C事件模型和Microsoft事件模型。本章還討論了這些事件模型之間的差別，并討論了為什么jQuery需要采用一種全新的事件API，以使Web開發(fā)者更加方便地處理事件。本章還介紹了jQuery所提供的事件API，以及如何使用jQuery的事件。 第4章：操縱內(nèi)容和屬性本介紹如何使用jQuery為操縱內(nèi)容、文本和HTML，以及元素屬性所提供的各種方法。jQuery提供了大量方法，可以實現(xiàn)對元素的任何操作。 第5章：數(shù)組和迭代本章介紹如何使用jQuery來遍歷一個包含元素的選擇集，以及如何遍歷一個數(shù)組。

16、對于DOM元素組成的數(shù)組或者選擇集，jQuery提供了一個迭代機制，只需使用更少的代碼就可以循環(huán)遍歷數(shù)組或選擇集。 第6章：CSS本章介紹jQuery為操作CSS屬性和聲明所提供的方法。jQuery提供了直觀和具有多種功能的方法，以便采用不同的方式來操作CSS。 第7章：AJAX本章詳細介紹了jQuery所支持的針對服務(wù)器發(fā)起AJAX請求的各種方法，jQuery的AJAX方法允許向服務(wù)器請求內(nèi)容，而無需直接使用底層的XMLHttpRequest對象，它還支持處理從服務(wù)器返回的不同格式的響應(yīng)。 第8章：特效本章介紹jQuery所提供的一些輔助方法，這些方法可用于檢測用戶端瀏覽器的類型和版本以及當

17、前瀏覽器是否支持W3C的標準CSS盒模型等。本章還介紹了關(guān)于對象、數(shù)組、函數(shù)和字符串的一些零散方法。 第9章：插件本章介紹如何在jQuery中創(chuàng)建自定義的插件。第部分：jQuery UI 第10章：拖放元素本章開始將介紹jQuery的UI庫。第10章介紹了如何使元素成為“可拖動”元素，并介紹了如何創(chuàng)建支持拖放操作的用戶界面，可將一個元素拖動到另外一個元素之上并進行投放，以實現(xiàn)一個完整的拖放操作。 第11章：拖放排序本章討論如何使用Sortables插件將列表元素轉(zhuǎn)換為一個可以通過拖動和投放進行排序的“可排序”列表。 第12章：選取框本章介紹jQuery UI庫中的Selectables插件，該

18、插件允許用戶通過鼠標拖拽出一個選取框來選擇元素，就像在操作系統(tǒng)中的文件管理程序中選取文件那樣。 第13章：Accordion UI本章討論如何使用Accordion插件來創(chuàng)建一個外觀簡潔優(yōu)美的側(cè)邊欄，該側(cè)邊欄包含了多個內(nèi)容窗格，各個窗格可以像手風琴一樣展開和折疊。當鼠標指針移過一個元素時，當前內(nèi)容窗格將通過一個平滑的動畫折疊起來，而另外一個窗格則會以動畫方式平滑展開。 第14章：日期選擇器本章介紹如何使用jQuery的Datepicker插件，為一個標準的表單輸入域創(chuàng)建一個日期選擇器。 第15章：對話框本章介紹如何使用jQuery UI庫來創(chuàng)建一個虛擬的彈出窗口，該虛擬的彈出窗口的外觀和行為看

19、起來就像是一個真正的彈出窗口，但實際上它包含在加載當前頁面之中，并且是使用純粹的標記代碼、CSS和JavaScript來創(chuàng)建的。 第16章：選項卡本章介紹jQuery UI庫的Tabs插件，它可以將一個文檔拆分到幾個不同的選項卡中，在這種選項卡之間導(dǎo)航時，并不需要加載其他頁面。 附錄附錄A中包含了各章習題的參考答案。附錄B到附錄S則列出了jQuery和jQuery UI庫的相關(guān)參考資料。所需條件為了充分發(fā)揮本書示例的作用，需要具備以下兩個使用條件： 具有多個瀏覽器，以便測試本書示例中的Web頁面。 一個文本編輯器或你最喜歡的IDE。為網(wǎng)站設(shè)計的頁面，應(yīng)該支持不同類型的客戶端瀏覽器進行訪問。某些

20、用戶可能會使用不同的操作系統(tǒng)或者不同的瀏覽器進行訪問，而讀者當前使用的計算機上可能并未安裝這些操作系統(tǒng)或瀏覽器。本書的內(nèi)容聚焦于當前最主流的瀏覽器。這些瀏覽器包括： Windows系統(tǒng)上的Microsoft Internet Explorer 6，或者更高版本的IE瀏覽器。 Mac OS X系統(tǒng)上的Safari 2瀏覽器，或者更高版本的Safari瀏覽器。 Mac OS X系統(tǒng)、Windows系統(tǒng)或Linux系統(tǒng)中的Mozilla Firefox瀏覽器 Mac OS X系統(tǒng)、Windows系統(tǒng)或Linux系統(tǒng)中的Opera 9瀏覽器，或者更高版本的Opera瀏覽器。本書約定為了從本書的內(nèi)容中獲

21、得最圓滿的學習效果，以及更好地跟蹤示例代碼，本書中使用了一些約定。值得注意的是，在本書內(nèi)容中所引用的圖例并沒用完全列出來。也就是說，在某一章節(jié)中實際列出的屏幕截圖并不是按照這些圖例的出現(xiàn)順序進行編號的。例如，當我們查看第3章中的屏幕截圖，將發(fā)現(xiàn)第一個截圖是圖3-1，而在書中列出的第2個屏幕截圖，其編號是圖3-3。在第3章的文本內(nèi)容中雖然引用了圖3-2，但實際上在書中并未列出該截圖。這些未列出的屏幕截圖并非是真正遺漏了，實際上它們包含在本書提供的代碼下載中。在書中未列出這些圖例的原因，是由于無論從哪一方面看，這些圖例與之前或之后的屏幕截圖是相同的，因此沒必要再次在書中列出這些圖例。源代碼在讀者學習本書中的示例時，可以手工輸入所有代碼，也可以使用本書附帶的源代碼文件。本書使用的所有源代碼都可以從本書合作站點 Code鏈接，可以獲得所有源代碼。提示：由于許多圖書的標題都很類似，所以按ISBN搜索是最簡單的，本書英文版的ISBN是978-0-470-22779-4。在下載了代碼后，只需用自己喜歡的解壓縮軟件對它進行解壓縮即可。另外，也可以進入勘誤表盡管我們已經(jīng)盡了各種努力來保證文章或代碼中不出現(xiàn)錯誤，但是錯誤總是難免的，如果您在本書中找到了錯誤，例如拼寫錯誤或代碼錯誤，請告訴我們，我們將非常感激。通過勘誤表，可以讓其他讀者避免受挫，當然，這還有助于提供更高質(zhì)量的信息。請給