內容簡介
《jQuery動態網頁設計案例課堂》以零基礎講解為宗旨,用實例引導讀者深入學習,採取“基礎入門→核心技術→移動網頁開發→項目實戰”的講解模式,深入淺出地講解
jQuery的各項技術及實戰技能。
《jQuery動態網頁設計案例課堂》第1篇“基礎入門”主要內容包括:必須了解的JavaScript知識、深入學習JavaScript對象與數組、jQuery的基礎知識、jQuery的選擇器等;第2篇“核心技術”主要內容包括:用jQuery控制頁面、jQuery的動畫特效、jQuery的事件處理、jQuery的功能函式、jQuery與Ajax技術的套用、jQuery外掛程式開發與使用等;第3篇“移動網頁開發”主要內容包括:走進jQuery Mobile、jQuery Mobile UI組件、jQuery Mobile 事件等;第4篇“項目實戰”主要內容包括:開發時鐘特效系統、開發動態字元演示系統、開發圖片堆疊系統、開發商品信息展示系統、開發連鎖酒店移動網站。
《jQuery動態網頁設計案例課堂》適合任何想學習jQuery網頁設計的人員,無論您是否從事計算機相關行業,無論您是否接觸過jQuery,通過本書的學習均可快速掌握jQuery網頁設計的方法和技巧。
圖書目錄
第1篇 基 礎 入 門
第1章 必須了解的JavaScript知識 3
1.1 認識JavaScript 4
1.1.1 什麼是JavaScript 4
1.1.2 JavaScript的特點 4
1.2 JavaScript的編寫工具 5
1.2.1 記事本 5
1.2.2 Dreamweaver CC 6
1.3 JavaScript在HTML 5中的使用 6
1.3.1 在HTML 5網頁頭中嵌入
JavaScript代碼 7
1.3.2 在HTML 5網頁中嵌入
JavaScript代碼 8
1.3.3 在HTML 5中調用已經存在的
JavaScript檔案 9
1.4 JavaScript的核心語法 10
1.4.1 變數的聲明和賦值 10
1.4.2 看透代碼中的數據類型 12
1.4.3 邏輯控制語句 16
1.5 實戰演練——一個簡單的JavaScript
示例 19
1.6 疑難解惑 20
第2章 深入學習JavaScript對象
與數組 21
2.1 了解對象 22
2.1.1 什麼是對象 22
2.1.2 面向對象編程 23
2.1.3 JavaScript的內部對象 24
2.2 對象訪問語句 25
2.2.1 for-in循環語句 25
2.2.2 with語句 26
2.3 JavaScript中的數組 27
2.3.2 創建和訪問數組對象 27
2.3.3 使用for-in語句 30
2.4 詳解常用的數組對象方法 39
2.4.1 連線其他數組到當前數組 39
2.4.2 將數組元素連線為字元串 40
2.4.3 移除數組中最後一個元素 41
2.4.4 將指定的數值添加到數組中 41
2.4.5 反序排列數組中的元素 42
2.4.6 刪除數組中的第一個元素 43
2.4.7 獲取數組中的一部分數據 44
2.4.8 對數組中的元素進行排序 45
2.4.9 將數組轉換成字元串 46
2.4.10 將數組轉換成本地字元串 47
2.4.11 在數組開頭插入數據 47
2.5 創建和使用自定義對象 48
2.5.1 通過定義對象構造函式的方法 48
2.5.2 通過對象直接初始化的方法 51
2.5.3 修改和刪除對象實例的屬性 52
2.5.4 通過原型為對象添加新屬性
和新方法 53
2.5.5 自定義對象的嵌套 54
2.5.6 記憶體的分配和釋放 57
2.6 實戰演練——利用二維數組創建
動態下拉選單 57
2.7 疑難解惑 59
第3章 jQuery的基礎知識 61
3.1 jQuery概述 62
3.1.1 jQuery能做什麼 62
3.1.2 jQuery的特點 62
3.1.3 jQuery的技術優勢 63
3.2 下載並配置jQuery 65
3.2.1 下載jQuery 66
3.2.2 配置jQuery 67
3.3 jQuery的開發工具 67
3.3.1 JavaScript Editor Pro 67
3.3.2 Dreamweaver 68
3.3.3 UltraEdit 69
3.3.4 記事本工具 69
3.4 jQuery的調試小工具 70
3.4.1 Firebug 70
3.4.2 Blackbird 73
3.4.3 jQueryPad 75
3.5 jQuery與CSS 3 75
3.5.1 CSS 3構造規則 75
3.5.2 瀏覽器的兼容性 76
3.5.3 jQuery的引入 77
3.6 實戰演練——我的第一個jQuery程式 78
3.6.1 開發前的一些準備工作 78
3.6.2 具體的程式開發 79
3.7 疑難解惑 79
第4章 jQuery的選擇器 81
4.1 jQuery的$ 82
4.1.1 $符號的套用 82
4.1.2 功能函式的前綴 83
4.1.3 創建DOM元素 83
4.2 基本選擇器 84
4.2.1 通配符選擇器(*) 84
4.2.2 ID選擇器(#id) 85
4.2.3 類名選擇器(.class) 87
4.2.5 複合選擇器 89
4.3 層級選擇器 90
4.3.1 祖先
後代選擇器(ancestor descendant) 90
4.3.2 父子選擇器(parent>child) 92
4.3.3 相鄰
元素選擇器(prev+next) 94
4.3.4 兄弟選擇器(prev~siblings) 95
4.4 過濾選擇器 97
4.4.1 簡單過濾選擇器 97
4.4.2 內容過濾選擇器 104
4.4.3 可見性過濾器 110
4.4.4 表單過濾器 114
4.5 表單選擇器 116
4.5.1 :input選擇器 116
4.5.2 :text選擇器 117
4.5.3 :password選擇器 117
4.5.4 :radio選擇器 118
4.5.5 :checkbox選擇器 119
4.5.6 :submit選擇器 121
4.5.7 :reset選擇器 121
4.5.8 :button選擇器 122
4.5.9 :image選擇器 123
4.5.10 :file選擇器 124
4.6 屬性選擇器 125
4.6.1 [attribute]選擇器 125
4.6.2 [attribute=value]選擇器 127
4.6.3 [attribute!=value]選擇器 128
4.6.4 [attribute$=value]選擇器 129
4.7 實戰演練——匹配表單中的元素
並實現不同的操作 130
4.8 疑難解惑 132
第2篇 核 心 技 術
第5章 用jQuery控制頁面 137
5.1 對頁面的內容進行操作 138
5.1.1 對文本內容進行操作 138
5.1.2 對HTML內容進行操作 140
5.1.3 移動和複製頁面內容 141
5.1.4 刪除頁面內容 142
5.1.5 克隆頁面內容 143
5.2 對標記的屬性進行操作 144
5.2.1 獲取屬性的值 144
5.2.2 設定屬性的值 145
5.2.3 刪除屬性的值 146
5.3 對表單元素進行操作 147
5.3.1 獲取表單元素的值 147
5.3.2 設定表單元素的值 148
5.4.1 添加CSS類 149
5.4.2 刪除CSS類 151
5.4.3 動態切換CSS類 153
5.4.4 獲取和設定CSS樣式 154
5.5 實戰演練——製作奇偶變色的表格 156
5.6 疑難解惑 158
第6章 jQuery的動畫特效 161
6.1 jQuery的基本動畫效果 162
6.1.1 隱藏元素 162
6.1.2 顯示元素 165
6.1.3 狀態切換 167
6.2 淡入淡出的動畫效果 168
6.2.1 淡入隱藏元素 169
6.2.2 淡出可見元素 170
6.2.3 切換淡入淡出元素 171
6.2.4 淡入淡出元素至指定數值 172
6.3 滑動效果 174
6.3.1 滑動顯示匹配的元素 174
6.3.2 滑動隱藏匹配的元素 175
6.3.3 通過高度的變化動態切換
元素的可見性 176
6.4 自定義的動畫效果 178
6.4.1 創建自定義動畫 178
6.4.2 停止動畫 179
6.5 疑難解惑 181
第7章 jQuery的事件處理 183
7.1 jQuery的事件機制概述 184
7.1.1 什麼是jQuery的事件機制 184
7.1.2 事件切換 184
7.1.3 事件冒泡 186
7.2 頁面載入回響事件 187
7.3 jQuery中的事件函式 188
7.3.1 鍵盤操作事件 188
7.3.2 滑鼠操作事件 190
7.3.3 其他的常用事件 193
7.4 事件的基本操作 195
7.4.1 綁定事件 195
7.4.2 觸發事件 196
7.4.3 移除事件 197
7.5 實戰演練——製作絢麗的多級動畫
選單 199
7.6 疑難解惑 204
第8章 jQuery的功能函式 205
8.1 功能函式概述 206
8.2 常用的功能函式 207
8.2.1 運算元組和對象 207
8.2.2 操作字元串 210
8.2.3 序列化操作 212
8.3 調用外部代碼 213
8.4 疑難解惑 214
第9章 jQuery與Ajax技術的套用 217
9.1 Ajax快速入門 218
9.1.1 什麼是Ajax 218
9.1.2 Ajax的關鍵元素 221
9.1.3 CSS在Ajax套用中的地位 221
9.2 Ajax的核心技術 222
9.2.1 全面剖析XMLHttpRequest
對象 222
9.2.2 發出Ajax請求 224
9.2.3 處理伺服器回響 226
9.3 jQuery中的Ajax 227
9.3.1 load()方法 227
9.3.2 $.get()方法和$.post()方法 230
9.3.3 $.getScript()方法和$.getJson()方法 233
9.3.4 $.ajax()方法 236
9.4 疑難解惑 237
第10章 jQuery外掛程式的開發與使用 239
10.1 理解外掛程式 240
10.1.1 什麼是外掛程式 240
10.1.2 如何使用外掛程式 240
10.2 流行的外掛程式 241
10.2.1 jQueryUI外掛程式 242
10.2.2 Form外掛程式 243
10.2.3 提示信息外掛程式 245
10.2.4 jcarousel外掛程式 245
10.3 定義自己的外掛程式 246
10.3.1 外掛程式的工作原理 246
10.3.2 自定義一個簡單的外掛程式 247
10.4 實戰演練——創建拖曳購物車效果 250
10.5 疑難解惑 251
第3篇 移動網頁開發
第11章 走進jQuery Mobile 255
11.1 認識jQuery Mobile 256
11.2 跨平台移動設備網頁jQuery Mobile 256
11.2.1 移動設備模擬器 256
11.2.2 jQuery Mobile的安裝 258
11.2.3 jQuery Mobile網頁的架構 260
11.3 創建多頁面的jQuery Mobile網頁 261
11.4 將頁面作為對話框使用 262
11.5 絢麗多彩的頁面切換效果 264
11.6 疑難解惑 266
第12章 jQuery MobileUI組件 267
12.1 套用UI組件 268
12.1.1 表單組件 268
12.1.2 按鈕和按鈕組 276
12.1.3 按鈕圖示 278
12.1.4 彈窗 280
12.2 列表 281
12.2.1 列表視圖 281
12.2.2 列表內容 284
12.2.3 列表過濾 286
12.3 面板和可摺疊塊 287
12.3.1 面板 288
12.3.2 可摺疊塊 289
12.4 導航條 291
12.5 實戰演練——使用jQuery Mobile
主題 294
12.6 疑難解惑 297
第13章 jQuery Mobile事件 299
13.1 頁面事件 300
13.1.1 初始化事件 300
13.1.2 外部頁面載入事件 302
13.1.3 頁面過渡事件 304
13.2 觸摸事件 306
13.2.1 點擊事件 306
13.2.2 滑動事件 309
13.3 滾屏事件 311
13.4 定位事件 314
13.5 疑難解惑 316
第4篇 項 目 實 戰
第14章 項目演練1——開發時鐘特效
系統 319
14.1 項目需求分析 320
14.2 項目技術分析 321
14.3 系統的代碼實現 321
14.3.1 設計首頁 322
14.3.2 定義時鐘類 323
14.3.3 定義數字時鐘的視圖類 325
14.3.4 定義圓形指針時鐘的視圖類 329
14.3.5 合併多個js檔案 331
14.3.6 合併Clock.js、DigitalView.js
和CircleView.js檔案 332
第15章 項目演練2——開發動態字元
演示系統 343
15.1 項目需求分析 344
15.2 項目技術分析 345
15.3 系統的代碼實現 345
15.3.1 設計首頁 345
15.3.2 定義動畫的類和執行
動畫的類 348
15.3.3 封裝jQuery外掛程式 358
15.3.4 合併js檔案和編譯CSS
檔案 359
15.3.5 合併TextAnimate.js和
jquery.textanimate.js檔案 360
第16章 項目演練3——開發圖片堆疊
系統 367
16.1 項目需求分析 368
16.2 系統的代碼實現 369
16.2.1 設計首頁 369
16.2.2 圖片堆疊核心功能 374
16.2.3 封裝jQuery外掛程式 382
16.2.4 合併js檔案和編譯CSS
檔案 383
16.2.5 合併ImgPile.js和
jquery.imgpile.js檔案 384
第17章 項目演練4——開發商品信息
展示系統 393
17.1 項目需求分析 394
17.2 項目技術分析 396
17.3 系統的代碼實現 396
17.3.1 設計首頁 396
17.3.2 開發控制器類的檔案 398
17.3.3 開發數據模型類檔案 400
17.3.4 開發視圖抽象類的檔案 402
17.3.5 項目中的其他js檔案說明 405
第18章 項目演練5——開發連鎖酒店
移動網站 407
18.1 連鎖酒店訂購的需求分析 408
18.2 網站的結構 408
18.3 連鎖酒店系統的代碼實現 409
18.3.1 設計首頁 409
18.3.2 訂購頁面 410
18.3.3 連鎖分店頁面 415
18.3.4 查看訂單頁面 417
18.3.5 酒店介紹頁面 418