宣傳語
一線人員,為您講述jQuery那獨特的魅力!
內容簡介
jQuery是目前在Web開發領域最流行的JavaScript庫之一。本書通過理論與實踐相結合的方式,由淺入深、循序漸進地介紹jQuery庫的使用;同時又輔以大量真實開發案例,可以讓用戶很輕鬆地就能使用jQuery來增強網頁的互動性,做出更好的Web前端產品以及各種更炫更酷的效果。
本書是一本注重jQuery理論與Web開發實踐相結合的基礎教程,適合各層次的Web開發人員閱讀和參考。章與章之間的內容相對獨立,讀者可以根據自己的情況選擇閱讀。閱讀本書的讀者最好對XHTML/HTML /CSS有一定的了解。
前言
jQuery是一個優秀的開源JavaScript庫。它的體積很小,代碼風格獨特而又優雅,改變了JavaScript程式設計師編寫程式的方式和思路。jQuery庫有一條設計理念,那就是“寫的少,做的多”(write less, do more)。其獨特的選擇器、鏈式的DOM操作方式、事件綁定機制、封裝完善的AJAX使其在眾多優秀的JavaScript庫中脫穎而出,獨樹一幟,贏得了眾多使用者的擁護和信賴。
jQuery的語法簡單易學,而且具有很強大的跨平台性,可以兼容多種核心的瀏覽器。目前,已經有一百多個外掛程式來擴充jQuery的功能,使得jQuery能滿足幾乎所有客戶端的腳本開發。
但是,目前來說專門介紹jQuery的書籍還很少,中文的書籍更是少之又少,這就給國內一些想要學習jQuery的Web開發愛好者製造了不小的障礙。為了方便廣大讀者學習,本人花費將近一年的時間寫作這本書。本書通過理論與實踐相結合的方式,由淺入深、循序漸進地介紹jQuery庫的使用;同時又輔以大量真實的開發案例,可以讓用戶很輕鬆地就能使用jQuery來增強網頁的互動性,做出更好的Web前端產品以及各種更炫更酷的效果。
本書的特點
1.循序漸進,由淺入深
閱讀本書不需要對jQuery有所了解,甚至對JavaScript也不需要有很深的了解。為了方便讀者學習,本書在第一篇首先介紹Web開發的基礎知識,如JavaScript的基礎語法等,以期讀者可以在不參考其他資料的情況下順利過渡到jQuery的學習和使用。
2.技術全面,內容充實
本書是一本關於jQuery的初級入門讀物。書中詳細介紹了jQuery 1.3.2幾乎所有的特性和屬性,並對每個模組均有很翔實的實例講解。以期讀者對jQuery有個很好的整體把握,同時以後需要用到一些特性的時候,可以進行查閱。另外,本書還在開始介紹了Web開發的基礎知識,如Web開發中比較常用的工具等,可以讓讀者從一個完全的門外漢很快變成業內人士。
3.圖文結合,理解深刻
講解技術類的知識,最好的方式就是面對面的講授,但是圖書卻不太容易做到這一點。為了彌補這個缺憾,本書在講解具體實例的時候,除了大量的注釋、講解之外,還輔以一些簡潔明了的圖片,以期讓讀者對實例以及jQuery效果有更直觀的理解。
4.真實案例,隨學隨用
本書是一本注重實踐的書。因此,有大量的篇幅用在了真實的Web開發案例中。本書第三篇通過若干比較完整的實例來講解jQuery在具體項目中的使用,如增強用戶體驗、AJAX跨域操作、與PHP配合構建動態網站、鍵盤操作以及將數據以可視化形式顯示等。讀者可以通過這些實例對jQuery的理論知識有更加深刻的理解,同時,這些實例稍作修改,就可以用在讀者正在開發的項目中去,來實現各種精彩的效果。
5.配有原始碼光碟,加速學習
為了讓初學者快速入門,本書配套光碟中附贈了本書中的所有原始碼。讀者可以參考閱讀。但是,筆者依然強烈建議,在學習本書的時候應該邊學邊練。即便不能不看書直接寫代碼,最好也要對著書上的代碼手工敲入一邊,以加深印象以及自己對知識本身的理解。
篇 名 章 名 內容介紹
第一篇 jQuery預備基礎篇 第1章 Web開發的發展與趨勢 本章主要介紹當前Web開發的現狀、Web的標準概念、Web 2.0與Web 1.0的區別與聯繫,並通過當前的一些使用jQuery構建的大型網站,對jQuery能實現的效果進行簡單介紹,以期讀者對jQuery的強大有個更加直觀的了解。
第2章 JavaScript基礎 本章主要介紹JavaScript的基礎知識,包括JavaScript中的變數、數據類型、操作符的使用、流程控制的方法,以及JavaScript數組以及函式的創建和使用。
第3章 文檔對象模型(DOM) 本章主要介紹DOM的基本概念,如DOM的樹結構以及節點的概念等。同時,也將介紹JavaScript中訪問以及操作DOM節點的方法,包括獲取元素、獲取元素內的文本和元素內的HTML內容、創建一個新的DOM節點、插入或者刪除一個DOM節點元素等。通過本章的介紹,讀者可以對DOM的操作方式有所了解,為後續章節使用jQuery操作DOM元素做好鋪墊。
第4章 工欲善其事,必先利其器——開發工具 本章將介紹網頁設計過程中經常使用的工具,如SciTE、Notepad++等代碼編輯工具,使用blackbird、FireBug以及Venkman對JavaScript代碼進行調試,以及Web DeveloperToolbar工具列的使用、JavaScript代碼的壓縮及混淆工具等。這些工具可以有效地提高編寫代碼及設計網站的效率,有必要熟練掌握其使用方法。
第二篇 jQuery基礎篇 第5章 jQuery快速上手 本章將介紹了jQuery的由來和優勢,並對目前幾個流行的JavaScript庫進行了介紹和對比。另外還將演示一個最簡單的jQuery程式,通過這個示例,讓讀者對jQuery的$(document).ready()函式有一個基本的認識,並對jQuery選擇器的使用以及click()函式也有初步的概念。
第6章 使用選擇器獲得要操作的元素 本章將介紹jQuery選擇器中的基本選擇器、層次選擇器以及濾鏡選擇器,濾鏡選擇器中又對基本濾鏡選擇器、子元素濾鏡選擇器、表單濾鏡選擇器以及屬性濾鏡選擇器分別結合具體實例展開詳細的介紹。
第7章 操作得到的元素 本章介紹jQuery中操作得到的元素以及元素集的方法,包括對屬性、樣式類、CSS以及內容的操作,對元素集查找以及篩選的函式,以及jQuery中的鏈式操作等。通過使用這些函式,可以很方便地操作頁面上的任意元素。
續表
篇 名 章 名 內容介紹
第二篇 jQuery基礎篇 第8章 使用jQuery進行DOM操作 本章介紹jQuery中比較常用的對頁面上DOM元素的操作方式,包括在元素內部以及外部插入元素,對頁面上的DOM元素進行包裹、替換、刪除以及克隆等操作。通過熟練使用這些DOM元素操作函式,可以很方便地對頁面內容進行操控,再結合其他效果函式的使用,將可以為用戶提供更加強大且有很好用戶體驗的套用。
第9章 jQuery中的事件處理 本章介紹jQuery中的事件處理機制。jQuery在JavaScript基本的事件處理機制的基礎上,對其進行了增強和擴展,使得jQuery事件處理不但有優雅的語法,而且功能也更加強大。本章首先介紹了$(document).ready()事件的概念、jQuery事件的綁定與反綁定、觸發器等,並對jQuery中眾多的內置事件類型作了簡單的分類和介紹。
第10章 jQuery中的動畫與效果 本章介紹jQuery中的動畫與效果,包括隱藏與顯示、滑動效果以及淡入淡出效果等。本章將結合實例討論這些效果的實現和套用,並將介紹jQuery中使用animate自定義動畫的方法,以及jQuery中動畫佇列的概念及其使用方法。
第11章 jQuery 與AJAX 本章將介紹jQuery中AJAX的使用方法。首先介紹AJAX的實現原理及其最核心的組成部分XMLHttpRequest對象的概念和使用方式;然後介紹jQuery中用來支持AJAX的幾個核心函式,包括load、get、post、getScript以及getJSON等,並對最核心的AJAX函式作了較為詳細的介紹;同時,還將介紹jQuery中在使用AJAX時支持的幾種伺服器端數據類型返回方式,以及jQuery在實現AJAX完整請求過程中的各個步驟以及各個階段的主要功能。
第12章 回頭重看jQuery——核心及工具 本章將對jQuery的核心方法進行回顧,主要介紹jQuery中對象訪問的通用函式、jQuery中的數據快取機制和外掛程式機制,以及jQuery中的常用工具類。使用這些工具類,可以更方便地完成對瀏覽器檢測、獲得及處理數組與對象等操作。
第三篇 jQuery套用篇 第13章 jQuery增強用戶體驗 本章將介紹目前在Web設計領域比較流行的網站內容的動態載入技術的jQuery實現,如“高亮選單”、“載入提示”等,並將通過一個動態切換樣式的例子進一步展示如何滿足用戶多元化、個性化的需求,對jQuery的cookie外掛程式也將有所介紹。
第14章 jQuery中使用AJAX跨域操作 本章將介紹使用jQuery中的AJAX技術進行跨域操作的方法,並通過對flickr、delicious以及Google AJAX Search等網站API調用的實例,演示Script方式以及jsonp方式在跨域操作中的套用。使用該特性,可以很容易地做出新穎有趣的混搭套用。
第15章 jQuery+ PHP動態網站實踐 本章將介紹jQuery在PHP動態網站建站中的使用,通過兩個實例來具體講解:一個是構建網站的標籤雲功能;一個是構建簡單的微部落格系統。通過這些實例,讀者可以了解,使用jQuery並結合一種動態腳本語言,可以實現很多很豐富的內容。
第16章 jQuery鍵盤操作 本章將介紹使用jQuery實現與鍵盤操作相關的功能,例如:如何在網頁上使用快捷鍵進行頁面內容的切換,或者使用jQuery來實現軟鍵盤的操作等。
續表
篇 名 章 名 內容介紹
第三篇 jQuery套用篇 第17章 jQuery可視化數據顯示 本章將介紹數據的可視化顯示對用戶的理解以及閱讀帶來的優越性,以及使用jQuery外掛程式對數據進行可視化的方法。在本章的實例中,將使用jQuery為其添加更加豐富的功能,例如Tooltip提示等,進一步增強了用戶體驗。讀者可以在本文基礎上對flot外掛程式進行深入研究,實現出更加複雜與實用的圖表。
適合的讀者
本書是一本注重jQuery理論與Web開發實踐相結合的基礎教程,章與章之間的內容相對獨立,讀者可以根據自己的情況選擇閱讀。適合各層次的Web開發人員閱讀和參考,主要適合於:
Web前端開發人員
Web後台設計人員
Web設計愛好者
大中專院校學生
本書作者
本書由季國飛編寫,參與編寫的人員有昊燃、方振宇、陳冠佐、傅奎、陳勤、梁洋洋、畢夢飛、陳慶、柴相花、陳非凡、陳華、陳嵩、承卓、陳先在,在此表示感謝!
季國飛
2010年1月
目錄
第一篇 jQuery預備基礎篇
第1章 Web開發的發展與趨勢 2
1.1 Web標準 2
1.1.1 XML 3
1.1.2 XHTML 3
1.1.3 CSS 4
1.1.4 DOM 4
1.1.5 ECMAScript 5
1.2 傳統網際網路與Web 2.0 5
1.2.1 傳統網路Web 1.0 5
1.2.2 最近的新寵Web 2.0 6
1.3 jQuery能做什麼 11
1.3.1 更加豐富的導航選單 11
1.3.2 Tab內容的切換 13
1.3.3 人性化的提示信息 13
1.3.4 可定製的用戶內容 14
1.3.5 動態的圖片展示效果 15
1.3.6 AJAX實時局部刷新 16
1.3.7 數據的可視化顯示 17
1.4 jQuery知識體系及學習建議 17
1.4.1 jQuery知識體系 17
1.4.2 學習建議 19
1.5 小結 19
第2章 JavaScript基礎 20
2.1 什麼是JavaScript 20
2.2 語法規則 21
2.2.1 大小寫敏感 21
2.2.2 空格、換行與可選的分號 23
2.2.3 注釋 25
2.2.4 關鍵字和保留字 26
2.2.5 在頁面上插入JavaScript代碼 28
2.3 變數 29
2.3.1 變數的命名 29
2.3.2 變數的聲明 30
2.3.3 變數的使用 32
2.3.4 全局變數和局部變數 33
2.4 JavaScript中的數據類型 35
2.4.1 字元串類型 36
2.4.2 數值類型 37
2.4.3 布爾類型 37
2.4.4 undefined類型 38
2.4.5 null類型 40
2.4.6 NaN類型 40
2.5 數據類型間轉換 41
2.5.1 使用toString()轉換為字元串 41
2.5.2 使用parseInt()轉換為整型數 43
2.5.3 使用parseFloat()轉換為浮點數 45
2.6 JavaScript操作符 47
2.6.1 比較操作符 47
2.6.2 邏輯操作符 48
2.6.3 JavaScript操作符優先權 49
2.7 流程控制 50
2.7.1 條件語句 50
2.7.2 循環語句 54
2.8 數組 56
2.8.1 創建一個數組 57
2.8.2 使用數組元素 58
2.8.3 使用多維數組 58
2.9 函式 59
2.9.1 函式的定義 59
2.9.2 函式的參數及返回值 60
2.10 小結 61
第3章 文檔對象模型(DOM) 62
3.1 什麼是DOM 62
3.2 DOM的結構和節點 63
3.2.1 DOM的樹結構 63
3.2.2 DOM中的節點 65
3.3 訪問DOM節點 67
3.3.1 按id取元素:getElementById() 67
3.3.2 按標籤名取元素集:getElementsByTagName() 68
3.4 操作元素內的文本 70
3.5 操作元素內的HTML 72
3.6 修改DOM節點 73
3.6.1 創建DOM節點 74
3.6.2 插入DOM節點 76
3.6.3 刪除DOM節點 78
3.7 小結 80
第4章 工欲善其事,必先利其器——開發工具 81
4.1 代碼編輯工具 81
4.1.1 SciTE 81
4.1.2 Notepad++ 82
4.1.3 Dreamweaver 83
4.2 調試工具 84
4.2.1 使用Blackbird進行調試 84
4.2.2 使用Firebug進行調試 85
4.2.3 使用Venkman進行調試 91
4.3 其他工具 92
4.3.1 Web Developer Toolbar 92
4.3.2 JavaScript壓縮混淆工具 99
4.4 小結 100
第二篇 jQuery基礎篇
第5章 jQuery快速上手 102
5.1 什麼是jQuery 102
5.2 為什麼選擇jQuery 102
5.2.1 當前流行JavaScript庫比較 103
5.2.2 jQuery的優勢 106
5.3 配置jQuery開發環境 107
5.3.1 獲取jQuery最新版本 107
5.3.2 jQuery庫類型說明 108
5.3.3 在頁面中引用jQuery庫 108
5.3.4 jQuery 1.2.6新特性及主要改變 110
5.3.5 jQuery 1.3.2新特性及主要改變 112
5.4 準備HTML和CSS代碼 114
5.4.1 演示框架目錄結構 115
5.4.2 HTML代碼 115
5.4.3 CSS代碼 117
5.5 編寫jQuery代碼 119
5.6 小結 122
第6章 使用選擇器獲得要操作的元素 123
6.1 CSS選擇器 123
6.1.1 使用CSS選擇器 123
6.1.2 通配選擇器 124
6.1.3標籤選擇器124
6.1.4 ID選擇器 125
6.1.5類選擇器125
6.1.6後代選擇器126
6.1.7 子元素選擇器127
6.1.8 相鄰兄弟選擇器 127
6.1.9 屬性選擇器 128
6.2 jQuery選擇器 130
6.2.1 基本選擇器 130
6.2.2 層次選擇器 135
6.2.3 基本濾鏡選擇器 139
6.2.4 子元素濾鏡選擇器 151
6.2.5 表單濾鏡選擇器 156
6.2.6 屬性濾鏡選擇器 164
6.3 小結 167
第7章 操作得到的元素 168
7.1 操作屬性 168
7.1.1 讀取屬性 168
7.1.2 修改屬性 170
7.1.3 刪除屬性 173
7.2 操作樣式類 174
7.2.1 添加樣式類 174
7.2.2 去除樣式類 176
7.2.3 交替樣式類 177
7.3 操作CSS 178
7.3.1 讀取CSS樣式 178
7.3.2 設定CSS樣式 180
7.3.3 獲得元素偏移信息 182
7.3.4 獲得和設定高度 183
7.3.5 獲得和設定寬度 185
7.4 操作內容 186
7.4.1 操作HTML代碼 186
7.4.2 操作文本 188
7.4.3 操作值 190
7.5 查找與篩選元素 193
7.5.1 過濾元素集 193
7.5.2 在元素集中查找 197
7.6 鏈式操作 202
7.6.1 使用鏈式操作 203
7.6.2 結束當前操作對象 205
7.6.3 添加當前操作對象到先前對象 207
7.7 小結 208
第8章 使用jQuery進行DOM操作 209
8.1 在元素內部插入DOM元素 209
8.2 在元素外部插入DOM元素 214
8.3 包裹DOM元素 217
8.3.1 使用指定的元素標記進行包裹 217
8.3.2 使用HTML標記進行包裹 220
8.3.3 包裹內部元素 222
8.4 替換DOM元素 223
8.5 刪除DOM元素 225
8.6 克隆DOM元素 227
8.7 小結 229
第9章 jQuery中的事件處理 230
9.1 頁面載入完畢回響事件 230
9.1.1 jQuery中的$(document).ready()事件 230
9.1.2 window.onload()事件和$(document).ready()事件的比較 231
9.2 綁定與反綁定事件監聽器 233
9.2.1 綁定事件 233
9.2.2 反綁定事件 238
9.2.3 一次性的事件綁定 239
9.3 事件觸發器 241
9.3.1 trigger觸發事件 241
9.3.2 triggerHandler觸發事件 244
9.4 事件的互動處理 245
9.4.1 hover:模仿滑鼠懸停 246
9.4.2toggle:多次單擊的循環回響 247
9.5 jQuery內置事件類型 248
9.5.1 jQuery內置事件函式的兩種聲明方式 249
9.5.2 jQuery內置事件類型分類 250
9.6 小結 253
第10章 jQuery中的動畫與效果 254
10.1 基本效果 254
10.1.1 隱藏元素 254
10.1.2 顯示元素 258
10.1.3 交替顯示隱藏 259
10.2 滑動效果 260
10.2.1 向上收縮效果 260
10.2.2 向下展開 262
10.2.3 交替伸縮樣式 262
10.3 淡入淡出效果 263
10.3.1 淡入效果 263
10.3.2 淡出效果 265
10.3.3 自定義不透明度 265
10.4 自定義動畫效果 266
10.4.1 自定義動畫 266
10.4.2 jQuery動畫佇列 270
10.5 小結 273
第11章 jQuery與AJAX 274
11.1 AJAX的套用 274
11.1.1 AJAX的歷史 274
11.1.2 AJAX經典套用 275
11.2 AJAX原理與XMLHttpRequest對象 278
11.2.1 AJAX的原理 279
11.2.2 XMLHttpRequest對象 281
11.3 jQuery中的AJAX 284
11.3.1 load()、get()和post()函式 284
11.3.2 ajax函式 294
11.3.3 getScript及getJSON函式 300
11.4 jQuery中的AJAX伺服器端返回方式 304
11.4.1 html方式 305
11.4.2 text方式 307
11.4.3 xml方式 308
11.4.4 script方式 316
11.4.5 json方式 316
11.5 jQuery中的AJAX事件 318
11.5.1 AJAX局部事件 318
11.5.2 AJAX全局事件 320
11.6 小結 323
第12章 回頭重看jQuery——核心及工具 324
12.1 核心函式 324
12.1.1 核心函式形式 324
12.1.2 使用核心函式 326
12.2 jQuery對象訪問 329
12.2.1 獲得長度 329
12.2.2 獲得其中某個對象 329
12.2.3 遍歷對象集 332
12.3 數據快取 333
12.3.1 隱藏數據 333
12.3.2 設定和獲取元素的快取數據 334
12.3.3 刪除快取數據 336
12.4 jQuery常用工具類 337
12.4.1 瀏覽器相關 337
12.4.2 數組與對象相關 340
12.4.3 其他功能性函式 348
12.5 jQuery外掛程式機制 349
12.5.1 jQuery.extend(object) 350
12.5.2 jQuery.fn.extend(object) 351
12.6 小結 352
第三篇 jQuery套用篇
第13章 jQuery增強用戶體驗 354
13.1 動態載入顯示內容 354
13.1.1 設計網站外觀及顯示 354
13.1.2 jQuery 動態載入內容 356
13.2 改進:增強用戶體驗 358
13.2.1 高亮當前選中選單 358
13.2.2 載入時提示“正在載入…” 359
13.3 動態切換樣式 361
13.3.1 jQuery樣式切換簡單實現 361
13.3.2 使用Cookie保存用戶選項 363
13.3.3 使用jQuery.cookie外掛程式 366
13.4 小結 368
第14章 jQuery中使用AJAX跨域操作 369
14.1 跨域操作的實現方式 369
14.1.1 Script方式實現跨域操作 369
14.1.2 JSONP方式實現跨域操作 371
14.2 跨域操作flickr網站API 374
14.3 跨域操作delicious網站API 378
14.4 跨域操作Google AJAX Search API 382
14.5 小結 388
第15章 jQuery+PHP動態網站實踐 389
15.1 標籤雲(Tag Cloud) 389
15.1.1 標籤雲的概念與使用 389
15.1.2 標籤雲顯示樣式設計 390
15.1.3 設計MySQL資料庫 394
15.1.4 構建PHP代碼 395
15.1.5 構建jQuery代碼 398
15.2 類twitter微部落格系統 399
15.2.1 微部落格系統 400
15.2.2 設計MySQL資料庫 403
15.2.3 構建PHP代碼及jQuery代碼 404
15.2.4 功能改進:增加字數統計功能 408
15.3 小結 410
第16章 jQuery鍵盤操作 411
16.1 鍵盤快捷鍵動態切換頁面 411
16.1.1 需求與最終效果 411
16.1.2 HTML及CSS代碼 412
16.1.3 jQuery代碼 416
16.2 使用外掛程式進行改進 420
16.2.1 存在的問題 420
16.2.2 js-hotkeys外掛程式的使用 421
16.2.3 使用js-hotkeys外掛程式改進本章示例 423
16.3 軟鍵盤的實現 425
16.3.1 軟鍵盤的使用 425
16.3.2 準備HTML及CSS代碼 425
16.3.3 構建jQuery代碼 430
16.3.4 最終效果 433
16.4 小結 435
第17章 jQuery可視化數據顯示 436
17.1 數據的可視化顯示 436
17.2 使用flot外掛程式可視化數據顯示 438
17.2.1 flot外掛程式介紹 438
17.2.2 準備HTML及CSS代碼 439
17.2.3 構建jQuery代碼 442
17.2.4 實現折點上的Tooltip顯示 448
17.3 小結 451