jQuery基礎教程詳解

《jQuery基礎教程詳解》是2009年PacktPublishing、人民郵電出版社出版的圖書，作者是(美)KarlSwedbergJonathanChaffer。

基本介紹

• 書名：jQuery基礎教程詳解
• 又名：Better Interaction Design and Web Development with Simple JavaScript Techniques
• 作者：(美)Karl Swedberg Jonathan Chaffer
• 譯者：李松峰、李煒
• ISBN：9787115181107
• 類別：圖靈程式設計叢書.Web開發系列
• 頁數：298
• 出版社：Packt Publishing、人民郵電出版社
• 出版時間：2009 年4月
• 開本：16開
• 版次：1-4

編輯推薦

全球第一部jQuery著作.

Amazon全五星盛譽..

jQuery官方網站推薦...

內容簡介

本書以通俗易懂的方式介紹了jquery的基本概念，主要包括jquery的選擇符、事件、特效、dom操作、ajax、表格操作、表單函式、拖曳與旋轉和外掛程式等內容，最後幾章以實例操作為主，在前面內容的基礎上，提出了常見的客戶端實際問題並給出了其解決方案。

jquery標誌

本書是一本注重理論與實踐結合的基礎教程，適合web開發人員閱讀和參考。

目錄

第1章　jquery入門

1 1　jquery能做什麼

1 2　jquery為什麼如此出色

1 3　第一個jquery文檔

1 3 1　下載jquery

1 3 2　設定html文檔

1 3 3　編寫jquery代碼

1 4　小結

第2章　選擇符——取得你想要的一切

2 1　dom

2 2　工廠函式$（）

2 3　css選擇符

2 4　xpath選擇符

2 5　自定義選擇符

2 6　dom遍歷方法

2 7　訪問dom元素

2 8　小結

第3章　事件——扣動扳機

3 1　在頁面載入後執行任務

3 1 1　代碼執行的時機選擇

3 1 2　基於一個頁面執行多個腳本

3 1 3　縮短代碼的簡寫方式

3 2　簡單的事件

3 2 1　簡單的樣式轉換器

3 2 2　簡寫的事件

3 3　複合事件

3 3 1　顯示和隱藏高級特性

3 3 2　突出顯示可單擊的項

3 3 3　事件的旅程

3 3 4　事件冒泡的副作用

3 4　限制和終止事件

3 4 1　阻止事件冒泡

3 4 2　移除事件處理程式

3 5　模仿用戶操作

3 6　小結

第4章　效果——為操作添加藝術性

4 1　修改內聯css

4 2　基本的隱藏和顯示

4 3　效果和速度

4 4　多重效果

4 4 1　構建具有動畫效果的show（）

4 4 2　創建一種自定義的動畫效果

4 4 3　理解數字的含義

4 4 4　改進自定義動畫效果

4 5　並發與排隊效果

4 5 1　處理一組元素

4 5 2　處理多組元素

4 6　簡單概括

4 7　小結

第5章　dom操作——基於命令改變頁面

5 1　操作屬性

5 2　插入新元素

5 3　移動元素

5 3 1　標註、編號和連結到上下文

5 3 2　插入腳註

5 4　包裝元素

5 5　複製元素

5 5 1　複製的深度

5 5 2　通過複製創建突出引用

5 6　dom操作方法的簡單歸納

5 7　小結

第6章　ajax——讓網站與時俱進

6 1　基於請求載入數據

6 1 1　追加html

6 1 2　操作javascript對象

6 1 3　載入xml　文檔

6 2　選擇數據格式

6 3　向伺服器傳遞數據

6 3 1　執行get請求

6 3 2　執行post請求

6 3 3　序列化表單

6 4　關注請求

6 5　ajax和事件

6 5 1　限定事件綁定函式的作用域

6 5 2　利用事件冒泡

6 6　安全限制

6 7　小結

第7章　表格操作

7 1　排序

7 1 1　伺服器端排序

7 1 2　javascript排序

7 2　分頁

7 2 1　伺服器端分頁

7 2 2　javascript　分頁

7 3　完成的代碼

7 4　高級行條紋效果

7 4 1　三色交替模式

7 4 2　三行一組交替

7 5　突出顯示行

7 6　工具提示條

7 7　摺疊和擴展

7 8　篩選

7 8 1　篩選選項

7 8 2　同其他代碼整合

7 9　完成的代碼

7 10　小結

第8章　構建功能型表單

8 1　漸進增強的表單設計

8 1 1　圖示符號

8 1 2　必填欄位的提示信息

8 1 3　根據條件顯示的欄位

8 2　表單驗證

8 2 1　即時反饋

8 2 2　最終檢查

8 3　複選框操作

8 4　完成的代碼

8 5　欄位的占位符文本

8 6　ajax自動完成

8 6 1　伺服器端代碼

8 6 2　瀏覽器端腳本

8 6 3　填充搜尋欄位

8 6 4　鍵盤導航

8 6 5　自動完成與實時搜尋

8 7　完成的代碼

8 8　輸入掩碼

8 8 1　購物車表格結構

8 8 2　拒絕非數字輸入

8 9　數字計算

8 9 1　解析和格式化貨幣值

8 9 2　處理小數位

8 9 3　其他計算

8 10　刪除商品

8 11　修改送貨信息

8 12　完成的代碼

8 13　小結

第9章　滑移和翻轉

9 1　標題翻轉效果

9 1 1　設定頁面

9 1 2　取得新聞源

9 1 3　設定翻轉效果

9 1 4　標題翻轉函式

9 1 5　懸停時暫停

9 1 6　從不同的域中取得新聞源

9 1 7　附加的內部漸變效果

9 2　圖像傳送帶

9 2 1　設定頁面

9 2 2　通過javascript修改樣式

9 2 3　通過單擊滑移圖像

9 2 4　添加滑移效果

9 2 5　顯示操作圖示

9 3　放大圖像

9 3 1　隱藏大幅封面

9 3 2　更有價值的標記

9 3 3　為封面放大添加動畫效果

9 4　完成的代碼

9 5　小結

第10章　外掛程式

10 1　使用外掛程式

10 2　流行的外掛程式

10 2 1　dimensions

10 2 2　form

10 2 3　interface

10 3　查找外掛程式文檔

10 4　開發新外掛程式

10 4 1　添加新的全局函式

10 4 2　添加jquery對象方法

10 4 3　dom遍歷方法

10 4 4　添加新的簡寫方法

10 4 5　維護多事件日誌

10 4 6　添加選擇符表達式

10 4 7　創建緩動樣式

10 4 8　做個好公民

10 5　小結

附錄a　線上資源

附錄b　開發工具

附錄c　javascript閉包

譯者序

說起我與jQuery結緣，還要感謝2006年發生在台灣海峽的地震。2006年12月26日，中國南海台灣附近發生7．2級地震，數分鐘後又發生了6．7級地震。受強烈地震影響，中美海纜等多條國際海底通信光纜發生中斷，造成附近國家和地區的國際和地區性通信受到嚴重影響。2007年1月29日，電信網通宣布，經過20多天的搶修，受地震影響中斷的國際通信業務已全部恢復。在此期間，中國雅虎在信箱主頁頂部發布了一個由於海纜中斷可能會造成郵件收發有問題的通告。當時，通告是在頁面載入完成大約1s後，以漸變和動畫形式出現在頁面頂部的——跟jQuery官方網站首頁那個“The quick and dirty”的演示效果很相似。而且，通告顯示了大約幾秒鐘後又以動畫形式自動消失，整個頁面好像什麼都沒有發生過一樣。這個動畫效果深深地吸引了我。以前，我也試著寫過像卓越亞馬遜網站首頁“所有20類商品”按鈕的滑鼠懸停動畫，但使用了幾十行代碼，如今這個更酷的效果是怎么實現的呢?於是，我懷著強烈的好奇心開始查看它的原始碼(這要感謝JavaScript天生的開源特性)。驚奇地發現，這個效果僅用了寥寥幾行代碼!驚訝之餘，溯本求源，最後“認識”了精巧而美妙和jQuery，特別是它優雅的方法連綴能力，更令我如獲至寶、興奮不已!後來我查了很多jQuery的資料，發現它的文檔沒有漢化，就用一周的休息時間翻譯了它的API(1．1版)文檔。這份漢化文檔在jQuery中文資料匱乏的時候為廣大jQuery網友提供了一點幫助，也獲得了大家的認可和好評。

JavaScript庫和框架解決的問題，無非就是(跨瀏覽器的)DOM操作、事件處理、樣式更換和外部通信(AJAX)。但jQuery獨特的集合對象、隱式疊代、方法連綴、自定義選擇符和事件方法，加之只有不到20KB的超輕巧和執行速度超快，贏得了眾多JavaScript開發者的青睞。

jQuery不僅支持各式各樣的CSS選擇符表達式，而且還支持XPath和自定義的選擇符表達式，這一點在JavaScript庫和框架領域中無出其右者，使開發者找到要操作的元素或集合簡單得難以置信；它細膩靈巧而又富有彈性的事件處理機制，包括事件註冊、觸發和自定義，特別是令JavaScript的Guru級人物都喜不自禁的hover()方法，使它在JavaScript庫和框架之林中獨樹一幟、個性十足；它在操作DOM文檔時的大處著眼、小處著手，提供的豐富而實用的各種遍歷和操作DOM結構及元素的方法，令人耳目一新，簡直“直逼每個JavaScript愛好者的心理防線”，那種令人怦然心動的感覺，歷久彌新；它處理AJAX請求和回響的簡潔明快、它的簡單易用、它超級方便的擴展機制、它豐富的外掛程式支持(Interface等)、它背後的強大社區……所有這些，引無數JavaScript高手競折腰!

事實上，網際網路上的JavaScript庫和框架數以百千計，為什麼唯獨jQuery對我們這些愛好者有如此大的吸引力呢?就是因為jQuery採取了與其他庫和框架截然不同的理念，處處匠心獨運，別出心裁——具體細節，請參考第1章。

本書作為第一本全面、深入介紹jQuery庫的圖書，可以說是應運而生的。書中包含了jQuery教程、jQuery實例和JavaScript最佳實踐。jQuery教程部分是本書第2章至第6章，分別介紹了jQuery中的選擇符、事件處理、DOM操作、動畫效果和AJAX方法。其中，第3章、第4章、第5章結尾，特別歸納了相應方法及適用情形，既簡明又實用。jQuery實例部分是本書第7章、第8章、第9章，分別圍繞Web開發中最常見的表格、表單和動畫效果，詳盡地探討了使用jQuery的方方面面。這幾章的實例，深入討論諸多Web開發問題，深入淺出、娓娓道來，時不時令人拍案叫絕、感嘆很多百思不得其解的問題，其實只有一層窗戶紙!第10章介紹了jQuery強大的擴展能力，介紹了擴展jQuery或者編寫自已的jQuery外掛程式的方法。這一章深入到jQuery核心，把整個庫的架構全部展現給了讀者，並向讀者揭示出jQuery庫中的“陷阱”和“關鍵”，令人有豁然開朗、恍然大悟之感。

現代JavaScript開發的一個基準點就是最佳實踐。為了讓讀者不走彎路；不浪費寶貴的時間，本書在介紹通過jQuery進行JavaScript開發的過程中，實踐了“漸進增強”和“平穩退化”這兩個不唐突(unobtrusive)的JavaScript開發原則。把抽象的概念形象化、具體化，字裡行間，滲透著作者對這些先進理念的闡發與啟示。

值得一提的是，本書附錄C是名符其實的“壓軸好戲”。這么舉重若輕、淺顯易懂地討論JavaScript閉包，在譯者看來還是頭一次。幾個精心設計的例子，讀者跟著走下來，不知不覺中就能領略到JavaScript這一高級特性的精髓所在(也許沒有說得那么容易)。

書是人類進步的階梯，這話一點不假，但“盡信書不如無書”。要想學習jQuery不能不看jQuery的圖書，但是，只看是不管用的，還要動手實踐——打開文本編輯器和瀏覽器，親手寫jOuery代碼!書中很多地方講的只是要點，而動手實踐才能收穫書中沒有講到的東西。

本書由李松峰負責翻譯，參加翻譯工作的還有李煒、秦緒文、李麗、程寶傑、宋連海、付榮艷、封耀傑、賈愛華、左艷坡、熊俊芹、劉英、宋會敏等。

最後，也是最重要的，我要感謝在翻譯此書過程中，傅志紅老師給我提供的幫助和建議。感謝武衛東老師、劉江老師對譯稿的指點。感謝本書的責任編輯楊爽對譯稿的認真審核和修改，如果不是她創造性地與我溝通，本書恐怕要留下不少遺憾。此外，還要感謝圖靈俱樂部“明月星光”網友的熱心建言，他的建議解決了一些我在翻譯過程中遇到的問題。不過，囿於個人水平和能力，翻譯中的錯誤和不當之處在所難免。

前言

jQuery是一個強大的JavaScript庫。無論你具有什麼編程背景，都可以通過它來增強自己的網站。

由John Resig創建的jQuery是一個開源項目，其核心團隊由富有獻身精神的頂尖JavaScript開發人員組成。jQuery在一個緊湊的檔案中提供了豐富多樣的特性、簡單易學的語法和穩健的跨平台兼容性。此外，百餘種為擴展jQuery功能而開發的外掛程式，更使得它幾乎成為適用於各類客戶端腳本編程的必備工具。

本書以通俗易懂的方式介紹了jQuery的基本概念，通過學習本書，即使曾經因編寫JavaScript而受過挫折的人，也能夠掌握為網頁添加互動和動態效果的技術。本書將引導讀者跨越AJAX、事件、效果及高級JavaScript語言特性中的各種陷阱。

包含書中各章的線上示例。本書內容

本書的第一部分jQuery簡介，用來幫助讀者對jQuery有個大概的了解。第1章的內容主要涉及如何下載和設定jQuery庫，同時也會指導你使用jQuery編寫第一個腳本。

本書的第二部分將深入討論jQuery庫的各個主要方面。第2章講述如何取得我們想要的一切。通過jQuery中的選擇符表達式，你可以在頁面中的任何地方找到想要的元素。這一章將使用各種選擇符表達式為頁面中的不同元素添加樣式，其中一些是通過純CSS方式做不到的。

第3章講述如何“扣動扳機”。本章介紹如何通過jQuery的事件處理機制，在瀏覽器發生事件時觸發行為。同時，還會介紹jQuery的獨家秘笈——以不唐突的方式添加事件(甚至在頁面載入完成之前)。

第4章講述如何增加操作的藝術感。這一章介紹通過jQuery實現動畫的技術，從中我們能夠體會到隱藏、顯示和移動頁面元素時那種輕鬆自如的感覺。

第5章講述如何通過指令改變頁面。本章講述的是動態修改HTML文檔結構的技術。

第6章講述如何讓你的網站躋身主流行列。在學習完本章後，你也可以做到不用像過去那樣刷新頁面而訪問伺服器端功能。

本書的第三部分與前兩部分不同。這一部分主要以實例為主，即在前幾章學習的基礎上，創建常見問題的穩健jQuery解決方案。第7章將講述排序、篩選和為信息添加樣式並創建優美實用的數據布局。

第8章以客戶端數據驗證為主題。屆時，將設計一個具有適應能力的表單布局，還會實現基於客戶端與伺服器通信的互動式表單功能，例如自動完成。

第9章介紹如何在小視窗內顯示頁面元素來增強它們的美感和實用性。其中，動態顯示和隱藏信息的方式既可是自動的，也可是用戶控制的。

第10章講過jQuery令人印象深刻的擴展能力。讀者將在理解和掌握3個優秀jQuery外掛程式的基礎上，從頭開始構建自己的外掛程式。

附錄A提供了很多與jQuery、JavaScript以及通常的Web開發有關的內容豐富的網站信息。

附錄B推薦了一些有用的第三方程式和實用工具，用於在個人的開發環境中編輯和調試jQuery代碼。

附錄C討論JavaScript語言的常見壁壘之一——閉包。學了本附錄，你將會依賴閉包的強大威力而不是害怕它的副作用。

本書讀者對象

本書適合想在自己的設計中添加互動元素的Web設計者，也適合想在自己的Web套用中創建最佳用戶界面的開發者。

讀者需要具備基本的HTML和CSS知識，並且應該熟悉JavaScript語法。但是，不需要有jQuery的知識，也不必擁有其他JavaScript庫的使用經驗。