王者歸來：jQuery開發權威指南

前言

jQuery 是功能豐富的JavaScript 函數庫，可以幫助使用者毫不費力地把動態功能應用到網頁。它的體積很小，程式風格獨特而又優雅，改變了JavaScript 程式設計師撰寫程式的方式和想法。jQuery 函數庫有一個設計理念，那就是「寫得少，做得多」（write less, do more），其獨特的選擇器、鏈式的DOM 操作方式、事件綁定機制及封裝完整的Ajax 使其在許多優秀的JavaScript 函數庫中脫穎而出、獨樹一幟，贏得了許多使用者的擁護和信賴。

jQuery 的語法簡單易學，而且具有很強大的跨平台性，可以相容多種核心的瀏覽器。目前，已經有一百多個外掛程式來擴充jQuery 的功能，使得jQuery 能滿足幾乎所有用戶端的指令稿開發。

本書透過理論與實作相結合的方式，由淺入深、循序漸進地介紹了jQuery 函數庫的使用，同時又輔以大量真實的開發案例，讓讀者輕鬆使用jQuery 來增強網頁的互動性，做出更好的Web 前端產品以及各種更炫更酷的效果。

如果讀者簡單了解HTML、CSS 和JavaScript 基礎知識，那麼這本書正是為你而準備的，因為本書涵蓋了利用jQuery 工作時可能遇到的大多數問題。

本書特色

◎循序漸進，由淺入深

閱讀本書不需要對jQuery 有所了解，甚至對JavaScript 也不需要有很深的了

解。為了方便讀者學習，本書系統地說明了jQuery 技術在網頁設計中各個方面的應用知識，從為什麼要用jQuery 開始說明，循序漸進，配合大量實例，幫助讀者奠定堅實的理論基礎，做到知其所以然，以期讀者可以在不參考其他資料的情況下順利過渡到jQuery 的學習和使用。

◎大量的案例實戰

書中設定大量應用實例，重點強調實際技術的靈活應用，全書結合了作者長期的網頁設計製作和教學經驗，讓讀者真正做到學以致用。讀者可以透過這些實例對jQuery 的理論知識有更加深刻的了解，同時，這些實例稍作修改，就可以用在讀者正在開發的專案中，實現各種精彩的效果。

◎技術全面，內容充實

本書是關於jQuery 的初級入門讀物，書中詳細介紹了jQuery 1.6.4 幾乎所有的特性和屬性，並對每個模組均有很翔實的實例說明，以期讀者對jQuery 有個很好的整體把握，同時以後需要用到一些特性時，可以查閱。另外，本書還在開始介紹了Web 開發的基礎知識，如Web 開發中比較常用的工具等，可以讓讀者從一個完全的新手很快變成專業人士。

◎圖文結合，了解深刻

說明技術類別的知識，最好的方式就是面對面地講授，但是圖書卻不太容易做到這一點。為了彌補這個缺憾，本書在說明實際實例時，除了大量的註釋、說明之外，還輔以一些簡潔的圖片，以期讓讀者對實例以及jQuery 效果有更直觀的了解。

◎配有原始程式碼，加速學習

為了讓初學者快速入門，可在本公司官網(http://www.topteam.cc) 對應處下載大部分實例的原始程式碼，讀者可以參考閱讀。但是，筆者依然強烈建議，在學習本書時應該邊學邊練，即使不能直接寫程式，最好也要對著書上的程式手動敲入一遍，以加深印象和對知識本身的了解。

本書內容

本書分為三大部分，共18章，實際結構劃分如下。

第一部分： jQuery 基礎知識部分，包含第1 ∼ 9章。這部分主要介紹jQuery

相關基礎知識，包含jQuery 相關概念、使用選擇器、使用篩檢程式、DOM

操作、事件處理、Ajax 應用、動畫設計、工具函數、功能擴充。

第二部分：應用程式開發部分，包含第10 ∼ 15章。這部分主要介紹表格開

發、表單開發、UI 開發、UI 互動開發、UI 套件開發、UI 特效開發。

第三部分：核心部分，包含第16 ∼ 18章。這部分重點說明jQuery 核心組成

和工作原理，主要包含JavaScript 函數式基礎、JavaScript 物件導向基礎以及jQuery 框架透析。

本書透過理論與實作相結合的方式，由淺入深、循序漸進地介紹jQuery 函數庫的使用，同時又輔以大量真實的開發案例，讓讀者輕鬆使用jQuery 來增強網頁的互動性，做出更好的Web 前端產品以及各種更炫更酷的效果。如果讀者簡單了解HTML、CSS 和JavaScript 基礎知識，那麼這本書正是為你而準備的，因為本書涵蓋了利用jQuery 工作時可能遇到的大多數問題。

本書讀者

◎希望學習網頁設計、網站製作的初學者。

◎從事網頁設計製作和網站建設的專業人士。

◎既適合初學者，也適合進階者。

◎Web 前台開發和後台設計人員。

◎可以作為各大專院校相關專業的教學輔導和參考用書或相關教育訓練機構的教育訓練教材。

本書約定

◎ 本書程式都以灰色背景顯示，以方便讀者閱讀。考慮到版面限制，部分展

示出來的程式僅包含JavaScript 指令稿和必要的結構程式。讀者在學習測試

時，應該把這些程式輸入到網頁。

◎本書以jQuery 1.6.4 版本為基礎介紹和示範，能夠相容jQuery 3.0 以後的任何版本。

◎在預設情況下，jQuery 1.6.4 函數庫檔案都會自動匯入檔案，如果沒有特別說明，我們會在範例中省略該行指令。jQuery 1.6.4 儲存在jQuery 資料夾中。

◎在預設情況下，使用jQuery 的別名$ 來表示jQuery 命名空間，同時直接把呼叫的函數放在$() 函數中，該函數實際上是$("document").ready() 方法的簡寫，它相當於JavaScript 中的window.onload =function • (){} 事件處理函數。

◎由於jQuery 與JavaScript 變數之間存在區別，預設情況下，當定義jQuery 物件變數時，在變數的前面附加一個$ 字首，以便與JavaScript 變數區分。

前言

jQuery 是功能豐富的JavaScript 函數庫，可以幫助使用者毫不費力地把動態功能應用到網頁。它的體積很小，程式風格獨特而又優雅，改變了JavaScript 程式設計師撰寫程式的方式和想法。jQuery 函數庫有一個設計理念，那就是「寫得少，做得多」（write less, do more），其獨特的選擇器、鏈式的DOM 操作方式、事件綁定機制及封裝完整的Ajax 使其在許多優秀的JavaScript 函數庫中脫穎而出、獨樹一幟，贏得了許多使用者的擁護和信賴。

jQuery 的語法簡單易學，而且具有很強大的跨平台性，可以相容多種核心的瀏覽器。目前，已經有一百多個...

Chapter01 初識jQuery
1.1 jQuery 概述
1.1.1 jQuery 能幫我做什麼
1.1.2 我需要學習jQuery
1.2 使用jQuery
1.2.1 下載jQuery
1.2.2 安裝jQuery
1.2.3 測試jQuery
1.3 jQuery 框架的優勢
1.4 jQuery 框架核心功能
1.4.1 對外介面單一讓使用更簡單 .
1.4.2 鏈式語法讓程式設計更快速、優雅
1.4.3 模仿CSS 選擇器讓選取元素更精確、靈活
1.4.4 擴充介面讓jQuery 更開放、富有活力
1.5 初學jQuery 最容易混淆的幾個概念
1.5.1 jQuery 物件不等於DOM 物件
1.5.2 jQuery 物件與DOM 物件之間的轉換
1.5.3 jQuery 的ready 不等於JavaScript 的load
1.6 學習資源
1.6.1 jQuery 開發工具
1.6.2 jQuery 參考手冊
1.6.3 jQuery 線上資源
Chapter02 使用選擇器Chapter02 | 使用選擇器
2.1 基本選擇器
2.1.1 ID 選擇器
2.1.2 標籤選擇器
2.1.3 類別選取器
2.1.4 萬用選擇器
2.1.5 分組選擇器
2.2 層級選擇器
2.2.1 包含選擇器
2.2.2 子選擇器
2.2.3 相鄰選擇器
2.2.4 兄弟選擇器
2.2.5 層級選擇器綜合應用
2.2.6 解析層級選擇器實現原理
2.3 簡單的虛擬類別選取器
2.3.1 特定位置選擇器
2.3.2 指定範圍選擇器
2.3.3 排除選擇器
2.3.4 特殊選擇器
2.3.5 解析簡單虛擬類別選取器的實現原理
2.4 與內容相關的虛擬類別選取器
2.4.1 比對包含文字選擇器
2.4.2 比對包含元素選擇器
2.4.3 包含判斷選擇器
2.4.4 解析內容篩檢程式實現原理
2.5 與元素顯示狀態相關的虛擬類別選取器
2.6 比對子元素的虛擬類別選取器
2.7 與表單物件相關的虛擬類別選取器
2.8 與表單屬性相關的虛擬類別選取器
2.9 屬性選擇器
2.10 jQuery 選擇器應用最佳化
Chapter03 使用篩檢程式檢程式
3.1 過濾
3.1.1 類別過濾
3.1.2 索引過濾
3.1.3 運算式過濾
3.1.4 判斷
3.1.5 對映
3.1.6 清洗
3.1.7 截取
3.2 查詢
3.2.1 向下尋找後代元素
3.2.2 向上尋找父項目
3.2.3 向上尋找兄弟元素
3.2.4 向下尋找兄弟元素
3.2.5 尋找兄弟元素
3.2.6 增加尋找物件
3.3 串聯
3.3.1 綁定前後jQuery 物件
3.3.2 傳回前一個jQuery 物件 apter04 | DOM 操作
Chapter04 DOM操作
4.1 建立節點
4.1.1 建立元素
4.1.2 輸入文字
4.1.3 設定屬性
4.2 插入內容
4.2.1 內部插入
4.2.2 外部插入
4.3 刪除內容
4.3.1 移出
4.3.2 清空
4.3.3 分離
4.4 複製內容
4.5 取代內容
4.6 包裹內容
4.6.1 外包
4.6.2 內包
4.6.3 總包
4.6.4 卸包
4.7 屬性操作
4.7.1 設定屬性
4.7.2 存取屬性
4.7.3 刪除屬性
4.8 類別操作
4.8.1 增加類別樣式
4.8.2 刪除類別樣式
4.8.3 切換類別樣式
4.8.4 判斷樣式
4.9 讀寫文字和值
4.9.1 讀寫HTML
4.9.2 讀寫文字
4.9.3 讀寫值
4.10 樣式表操作
4.10.1 讀寫CSS 樣式
4.10.2 絕對定位
4.10.3 相對定位
4.10.4 設定大小
4.11 存取文件樹 er05 |
Chapter05 事件處理處理
5.1 事件處理模型
5.1.1 原始事件模型
5.1.2 DOM 事件模型
5.1.3 IE 事件模型
5.2 事件處理機制
5.2.1 Event 物件
5.2.2 事件流
5.2.3 事件控制
5.3 jQuery 事件封裝機制
5.3.1 註冊事件
5.3.2 登出事件
5.4 jQuery 事件應用
5.4.1 事件觸發
5.4.2 事件切換
5.4.3 事件委派
5.4.4 事件命名空間
5.4.5 綁定多個事件
5.4.6 自訂事件
5.4.7 頁面初始化事件 Chpter06 | Ajax 應用
Chapter06 Ajax應用
6.1 XMLHttpRequest 基礎
6.1.1 XMLHttpRequest 物件
6.1.2 產生實體XMLHttpRequest
6.1.3 建立連接
6.1.4 請求和回應
6.2 jQuey Ajax
6.2.1 設計一個簡單的範例
6.2.2 GET 請求
6.2.3 POST 請求
6.2.4 ajax() 方法請求
6.2.5 回應狀態
6.2.6 回應資訊
6.2.7 載入網頁檔案
6.2.8 預設參數項
6.2.9 前置處理字串 hapter07 | 動畫設計
Chapter07 動畫設計
7.1 CSS 動畫設計基礎
7.2 顯隱動畫
7.2.1 簡單的顯示和隱藏
7.2.2 控制顯示速度
7.2.3 顯隱切換
7.2.4 折疊動畫
7.2.5 樹狀動畫
7.2.6 標籤動畫
7.3 滑動動畫
7.3.1 顯隱滑動效果
7.3.2 顯隱切換滑動
7.4 漸變效果
7.4.1 淡入和淡出
7.4.2 設定淡出透明效果
7.4.3 漸層切換
7.5 複雜動畫
7.5.1 模擬show() 方法的效果
7.5.2 自訂動畫
7.5.3 動態定位
7.5.4 停止動畫
7.5.5 關閉動畫
7.5.6 設定動畫頻率
7.5.7 延遲動畫
7.6 動畫佇列
7.6.1 增加動畫佇列
7.6.2 顯示動畫佇列
7.6.3 更新動畫佇列
7.6.4 刪除動畫佇列 Chapter08 | 工具函數
Chapter08 工具函數
8.1 jQuery 標示
8.1.1 檢測使用者代理
8.1.2 檢測版本編號
8.1.3 檢測盒模型
8.1.4 檢測功能或缺陷
8.2 相容JavaScript 函數庫
8.3 物件和集合操作
8.3.1 處理字串
8.3.2 把物件轉為字串
8.3.3 判斷陣列類型
8.3.4 判斷函數類型
8.3.5 判斷特殊物件
8.3.6 對陣列和集合進行反覆運算
8.3.7 產生陣列
8.3.8 對陣列進行篩選
8.3.9 對陣列進行轉換
8.3.10 把多個陣列合併在一起
8.3.11 刪除陣列中重複元素
8.3.12 在陣列中尋找指定值
8.4 快取
8.4.1 定義快取
8.4.2 讀取快取
8.4.3 刪除快取 ter09 | 功能擴充
Chapter09 功能擴充
9.1 自訂外掛程式
9.1.1 jQuery 外掛程式形式
9.1.2 自訂jQuery 外掛程式基本規則
9.1.3 使用extend() 函數
9.1.4 自訂jQuery 函數
9.1.5 自訂jQuery 指令
9.1.6 自訂選擇器
9.2 封裝和最佳化外掛程式
9.2.1 封裝外掛程式
9.2.2 最佳化外掛程式
9.3 案例實戰：製作jQuery 文字提示外掛程式
9.3.1 功能說明
9.3.2 建構結構
9.3.3 設計想法
9.3.4 困難突破
9.3.5 程式實現
9.3.6 應用外掛程式 Chapter0 | 表格開
Chapter10 表格開發發
10.1 資料排序
10.1.1 建構符合資料排序的表格結構
10.1.2 JavaScript 的基本排序方法
10.1.3 實現表格基本排序
10.1.4 最佳化排序效能
10.1.5 設計其他類型排序
10.1.6 增強排序互動的視覺效果
10.2 資料分頁
10.2.1 伺服器端分頁
10.2.2 JavaScript 實現分頁
10.3 資料過濾
10.3.1 快速過濾資料
10.3.2 處理多關鍵字比對
10.3.3 處理特定列過濾
10.3.4 合成資料篩檢程式
10.4 資料編輯
10.4.1 快速編輯資料
10.4.2 增強資料編輯功能
Chapter11 表單開發
11.1 設計可用性表單
11.1.1 設計表單結構
11.1.2 設計表單圖示
11.1.3 設計提示訊息
11.1.4 設計條件欄位
11.2 表單驗證
11.2.1 驗證服務概述
11.2.2 認識正規表示法
11.2.3 字元比對
11.2.4 重複比對
11.2.5 進階比對
11.2.6 比對操作
11.2.7 聯結表單驗證
11.3 增強型表單
11.3.1 自我調整多行文字標籤
11.3.2 註冊碼文字標籤
11.3.3 隱藏輸入文字標籤
Chapter12 jQuery UI開發概述ery UI 開發概述
12.1 jQuery UI 開發
12.1.1 設計思想
12.1.2 設計體驗
12.2 使用jQuery UI 函數庫
12.2.1 認識jQuery 外掛程式庫
12.2.2 使用外部外掛程式
12.2.3 認識UI 外掛程式
12.2.4 建立開發環境
12.2.5 jQuery UI 函數庫結構
12.2.6 主題訂製器
12.2.7 如何使用jQuery UI元件
12.2.8 元件類別
12.2.9 瀏覽器支援
Chapter13 jQuery UI互動開發開發
13.1 拖放
13.1.1 滑動物件
13.1.2 放開物件
13.2 縮放
13.3 選擇
13.4 排序 er
Chapter14 jQuery UI套件開發y UI 套件開發
14.1 標籤
14.2 手風琴
14.3 交談視窗
14.4 滑桿
14.5 日期選擇器 pter15 | jQ
Chapter15 jQuery UI特效開發uery UI 特效開發
15.1 特效核心
15.2 反白
15.3 彈跳
15.4 搖動
15.5 轉換
15.6 縮放
15.7 爆炸
15.8 抖動
15.9 落體
15.10 滑動
15.11 剪輯
15.12 百葉窗
15.13 折疊
Chapter16 jQuery 框架透析之函數式基礎
16.1 定義函數
16.1.1 建構函數
16.1.2 函數直接量
16.1.3 選擇恰當的方法
16.2 使用函數
16.2.1 函數呼叫
16.2.2 生命週期
16.2.3 形式參數和實際參數
16.2.4 參數物件Arguments
16.2.5 回呼函數callee
16.2.6 傳回值
16.3 函數物件
16.4 動態指標
16.4.1 認識this
16.4.2 this 物件
16.4.3 this 應用
16.4.4 this 陷阱
16.5 動態呼叫
16.6 函數作用域
16.6.1 詞法作用域與執行作用域
16.6.2 作用域鏈
16.6.3 呼叫物件
16.7 閉包函數
16.7.1 認識閉包
16.7.2 閉包基本特性
16.7.3 閉包基本用法
16.7.4 閉包標識系統
16.7.5 閉包函數作用域
16.7.6 閉包函數生存週期
16.7.7 比較函數和閉包
16.7.8 閉包函數與函數實例
16.7.9 閉包函數和呼叫物件
16.7.10 閉包獨立性
16.7.11 建構函數閉包
16.7.12 應用閉包函數
16.7.13 閉包副作用 pter17 | jQuery 框架透析之
Chapter17 jQuery 框架透析之物件導向基礎物件導向基礎
17.1 定義物件
17.1.1 認識物件
17.1.2 定義物件
17.2 使用物件
17.2.1 參考物件
17.2.2 銷毀物件
17.2.3 定義物件屬性
17.2.4 存取物件屬性
17.2.5 操作物件屬性
17.2.6 操作物件方法
17.3 物件作用域
17.3.1 公共作用域
17.3.2 私有作用域
17.3.3 靜態作用域
17.3.4 物件指標this
17.4 物件類型
17.4.1 建構物件
17.4.2 實例物件
17.4.3 原型物件
17.4.4 建構元constructor
17.5 核心方法
17.5.1 toString() 方法
17.5.2 valueOf() 方法
17.5.3 hasOwnProperty() 方法
17.5.4 propertyIsEnumerable()方法
17.5.5 isPrototypeOf() 方法
17.6 核心物件
17.6.1 物件系統
17.6.2 Global 物件
17.6.3 Math 物件
17.6.4 Date 物件
17.7 類別
17.7.1 認識類別
17.7.2 定義類別
17.8 介面
17.8.1 認識介面
17.8.2 定義介面
17.9 原型
17.9.1 認識prototype
17.9.2 原型特性
17.9.3 原型操作
17.9.4 定義靜態原型
17.9.5 原型域和原型域鏈
17.10 繼承
17.10.1 原型繼承
17.10.2 類別繼承（上）
17.10.3 類別繼承（下）
17.10.4 實例繼承
17.10.5 複製繼承
17.10.6 複製繼承
17.10.7 混合繼承
17.10.8 多重繼承
17.11 封裝
17.11.1 被動封裝
17.11.2 主動封裝
17.11.3 靜態方法
17.12 多載和多形
17.12.1 多載
17.12.2 覆蓋
17.12.3 多形
17.13 建構和解構
17.13.1 建構
17.13.2 解構
17.14 擴充
17.14.1 超類別和子類別
17.14.2 母類別 apter18
Chapter18 jQuery 框架透析之實戰
18.1 設計思路
18.2 設計框架
18.2.1 定義建構函數
18.2.2 傳回jQuery 物件
18.2.3 設計作用域
18.2.4 跨域存取
18.2.5 設計選擇器
18.2.6 設計反覆運算器
18.2.7 設計擴充介面
18.2.8 解決參數傳遞問題
18.2.9 設計命名空間
18.3 建構jQuery 物件
18.4 建構jQuery DOM 元素
18.4.1 產生DOM 元素
18.4.2 間接參考DOM 節點
18.4.3 採用CSS 方式尋找DOM節點
18.5 類別陣列
18.5.1 建構類別陣列
18.5.2 操作類別陣列
18.6 Sizzle 引擎
18.6.1 設計想法
18.6.2 設計框架

Chapter01 初識jQuery
1.1 jQuery 概述
1.1.1 jQuery 能幫我做什麼
1.1.2 我需要學習jQuery
1.2 使用jQuery
1.2.1 下載jQuery
1.2.2 安裝jQuery
1.2.3 測試jQuery
1.3 jQuery 框架的優勢
1.4 jQuery 框架核心功能
1.4.1 對外介面單一讓使用更簡單 .
1.4.2 鏈式語法讓程式設計更快速、優雅
1.4.3 模仿CSS 選擇器讓選取元素更精確、靈活
1.4.4 擴充介面讓jQuery 更開放、富有活力
1.5 初學jQuery 最容易混淆的幾個概念
1.5.1 jQuery 物件不等於DOM 物件
1.5.2 jQuery 物件與DOM 物件之間的轉換
1....