jQuery 前端開發 (全案例微課版)

劉輝在河南財經大學主要負責網頁設計、網站開發和Android開發課程，主要擅長HTML5、CSS3、JavaScript、jQuery技術，一直負責畢業班的實訓工作，在移動終端軟件開發有多年的開發經驗，具有很強的實戰經驗。

第1章 jQuery框架快速入門 001
1.1 認識jQuery 002
1.1.1 jQuery能做什麼 002
1.1.2 jQuery的特點 002
1.2 下載並安裝jQuery 003
1.2.1 下載jQuery 003
1.2.2 安裝jQuery 004
1.3 網頁的開發工具 004
1.3.1 使用記事本手工編寫HTML文件 004
1.3.2 使用WebStorm編寫HTML文件 005
1.4 jQuery與CSS 008
1.4.1 CSS構造規則 008
1.4.2 瀏覽器的兼容性 009
1.4.3 jQuery的引入 010
1.5 jQuery的技術優勢 010
1.6 新手常見疑難問題 012
1.7 實戰訓練營 013
第2章 jQuery的選擇器 014
2.1 jQuery的$ 015
2.1.1 $符號的應用 015
2.1.能函數的前綴 015
2.1.3 創建DOM元素 016
2.2 基本選擇器 017
2.2.1 通配符選擇器（*） 017
2.2.2 ID選擇器（#id） 017
2.2.3 類名選擇器（.class） 018
2.2.4 元素選擇器（element） 019
2.2.5 複合選擇器 020
2.3 層級選擇器 020
2.3.1 祖先後代選擇器（ancestor descendant） 020
2.3.2 父子選擇器（parent>child） 022
2.3.3 相鄰元素選擇器（prev+next） 023
2.3.4 兄弟選擇器（prev～lings） 023
2.4 過濾選擇器 024
2.4.1 簡單過濾選擇器 024
2.4.2 內容過濾選擇器 028
2.4.3 可見性過濾器 031
2.4.4 表單過濾器 033
2.5 表單選擇器 035
2.5.1 :input 035
2.5.2 :text 036
2.5.3 :password 036
2.5.4 :radio 037
2.5.5 :checkbox 038
2.5.6 :mit 038
2.5.7 :reset 039
2.5.8 :button 040
2.5.9 :image 040
2.5.10 :file 041
2.6 屬性選擇器 042
2.6.1 [attribute] 042
2.6.2 [attribute=value] 043
2.6.3 [attribute!=value] 043
2.6.4 [attribute$=value] 044
2.7 新手常見疑難問題 045
2.8 實戰訓練營 047
第3 章 使用jQuery 控制頁面 048
3.1 對頁面的內行操作 049
3.1.1 對文本內行操作 049
3.1.2 對HTML 內行操作 050
3.2 對標籤的屬行操作 051
3.2.1 獲取屬性的值 051
3.2.2 設置屬性的值 052
3.2.3 刪除屬性的值 052
3.3 對錶單元行操作 053
3.3.1 獲取表單元素的值 053
3.3.2 設置表單元素的值 054
3.4 對元素的CSS 樣行操作 054
3.4.1 添加CSS 類 054
3.4.2 刪除CSS 類 056
3.4.3 動態切換CSS 類 056
3.4.4 獲取和設置CSS 樣式 057
3.5 獲取與編輯DOM 節點 058
3.5.1 插入節點 058
3.5.2 刪除節點 060
3.5.3 節點 061
3.5.4 替換節點 062
3.6 新手常見疑難問題 063
3.7 實戰訓練營 064
第4 章 事件處理 066
4.1 jQuery 的事件機制 067
4.2 頁面加載響應事件 069
4.3 jQuery 中的事件函數 069
4.3.1 鍵盤操作事件 069
4.3.2 鼠標操作事件 071
4.3.3 其他的常用事件 073
4.4 事件的基本操作 075
4.5 新手常見疑難問題 077
4.6 實戰訓練營 078
第5 章 設計網頁中動畫特效 080
5.1 網頁動畫特效的實現方法 081
5.1.1 通過CSS 實現動畫特效 081
5.1.2 通過jQuery 實現動畫特效 082
5.2 jQuery 的基本動畫效果 083
5.2.1 隱藏元素 083
5.2.2 顯示元素 085
5.2.3 狀態切換 087
5.3 淡入淡出的動畫效果 088
5.3.1 淡入隱藏元素 088
5.3.2 淡出可見元素 089
5.3.3 切換淡入淡出元素 089
5.3.4 淡入淡出元素至指定數值 090
5.4 滑動效果 091
5.4.1 滑動顯示匹配的元素 091
5.4.2 滑動隱藏匹配的元素 092
5.4.3 通過高度的切換元素的可見性 093
5.5 自定義動畫效果 094
5.5.1 創建自定義動畫 094
5.5.2 停止動畫 095
5.6 新手常見疑難問題 096
5.7 實戰訓練營 096
第6 章 jQuery能函數 098
6.能函數概述 099
6.2 常能函數 099
6.2.1 操作數組和對象 099
6.2.2 操作字符串 102
6.2.3 序列化操作 103
6.3 新手常見疑難問題 104
6.4 實戰訓練營 104
第7 章 jQuery 插件的應用與開發 106
7.1 理解插件 107
7.2 流行的jQuery 插件 108
7.2.1 jQueryUI 插件 108
7.2.2 Form 插件 110
7.2.3 提示信息插件 111
7.2.4 jcarousel 插件 112
7.3 自定義插件 113
7.3.1 插件的工作原理 113
7.3.2 自定義一個簡單的插件 114
7.4 新手常見疑難問題 116
7.5 實戰訓練營 117
第8 章 jQuery 與Ajax 技術的應用 118
8.1 Ajax 概述 119
8.2 Ajax 技術的組成 121
8.3 XMLHttpRequest 對象的使用 123
8.3.1 初始化XMLHttpRequest 對象 123
8.3.2 XMLHttpRequest 對象的屬性 124
8.3.3 XMLHttpRequest 對象的方法 125
8.4 Ajax 異步交互的應用 126
8.4.1 什麼是異步交互 127
8.4.2 異步對象連接服務器 127
8.4.3 GET 和POST 模式 129
8.4.4 服務器返回XML 130
8.4.5 處理多個異步請求 132
8.5 jQuery 中的Ajax 133
8.5.1 load() 方法 134
8.5.2 $.get() 方法和$.post() 方法 136
8.5.3 $.getScript() 方法和$.getJson() 方法 137
8.5.4 $.ajax() 方法 139
8.6 新手常見疑難問題 140
8.7 實戰技能訓練營 141
第9 章 jQuery 的經典交互特效案例 143
9.1 設計時間軸特效 144
9.2 設計tab 頁面切換效果 145
9.3 設計滑動門特效 147
9.4 設計焦點圖輪播特效 148
9.5 設計網頁定位導航特效 150
9.6 設計導航條菜單效果 152
9.7 設計瀑布流特效 154
9.8 設計彈出層效果 155
9.9 設計效果 156
9.10 設計效果 157
9.11 新手常見疑難問題 159
9.12 實戰技能訓練營 160
第10 章 jQuery Mobile 快速入門 161
10.1 認識jQuery Mobile 162
10.2 台移動設備網頁jQuery Mobile 162
10.2.1 移動設備模擬器 162
10.2.2 jQuery Mobile 的安裝 164
10.2.3 jQuery Mobile 網頁的架構 166
10.3 創建多頁面的jQuery Mobile 網頁 166
10.4 創建模態頁 167
10.5 絢麗多彩的頁面切換效果 169
10.6 新手常見疑難問題 170
10.7 實戰技能訓練營 171
第11 章 使用UI 組件 172
11.1 套用UI 組件 173
11.1.1 表單組件 173
11.1.2 按鈕和組按鈕 179
11.1.3 按鈕圖標 181
11.1.4 彈窗 182
11.2 列表 183
11.2.1 列表視圖 184
11.2.2 列表內容 186
11.2.3 列表過濾 187
11.3 面板和可折疊塊 189
11.3.1 面板 189
11.3.2 可折疊塊 190
11.4 導航條 191
11.5 jQuery Mobile 主題 194
11.6 新手常見疑難問題 197
11.7 實戰技能訓練營 197
第12 章 jQuery Mobile 事件 199
12.1 頁面事件 200
12.1.1 初始化事件 200
12.1.2 外部頁面加載事件 202
12.1.3 頁面過渡事件 203
12.2 觸摸事件 205
12.2.1 點擊事件 205
12.2.2 滑動事件 207
12.3 滾屏事件 208
12.4 定位事件 210
12.5 新手常見疑難問題 211
12.6 實戰技能訓練營 212
第13 章 數據存儲和讀取技術 213
13.1 認識Web 存儲 214
13.1.1 本地存儲和Cookies 的區別 214
13.1.2 Web 存儲方法 214
13.2 使用HTML5 Web Storage API 214
13.2.1 測試瀏覽器的支持情況 214
13.2.2 使用sessionStorage方法創建對象 215
13.2.3 使用localStorage 方法創建對象 216
13.2.4 Web Storage API 的其他操作 217
13.2.5 使用JSON 對象存取數據 218
13.3 目前瀏覽器對Web 存儲的支持情況 220
13.4 製作簡單Web 留言本 220
13.5 認識Web SQL Database 221
13.6 使用Web SQL Database 操作數據 222
13.6.1 數據庫的基本操作 222
13.6.2 數據表的基本操作 223
13.6.3 數據的基本操作 224
13.7 創建簡易的學生管理系統 225
13.8 選擇文件 227
13.8.1 選擇單個文件 227
13.8.2 選擇多個文件 228
13.9 使用FileReader 接口讀取文件 228
13.9.1 檢測瀏覽器是否支持FileReader 接口 228
13.9.2 FileReader 接口的方法 229
13.9.3 使用readAsDataURL方法預覽圖片 229
13.9.4 使用readAsText 方法讀取文本文件 230
13.10 新手常見疑難問題 232
13.11 實戰技能訓練營 232
第14 章 響應式網頁設計 234
14.1 什麼是響應式網頁設計 235
14.2 像素和屏幕分辨率 236
14.3 視口 236
14.4 響應式網頁的佈局設計 238
14.5 響應式圖片 240
14.6 響應式 242
14.7 響應式導航菜單 243
14.8 響應式表格 245
14.8.1 隱藏表格中的列 245
14.8.2 滾動表格中的列 246
14.8.3 轉換錶格中的列 247
14.9 新手常見疑難問題 249
14.10 實戰技能訓練營 250
第15 章 流行的響應式開發框架Bootstrap 251
15.1 Bootstrap 概述 252
15.2 下載Bootstrap 253
15.3 安裝和使用Bootstrap 255
15.4 使用常用組件 256
15.4.1 使用下拉菜單 256
15.4.2 使用按鈕組 257
15.4.3 使用導航組件 258
15.4.4 綁定導航和下拉菜單 260
15.4.5 使用屑 261
15.4.6 使用廣告屏 261
15.4.7 使用card（卡片） 262
15.4.8 使度條 263
15.4.9 使用模態框 266
15.4.10 使用滾動監聽 268
15.5 膠囊導航選項卡（Tab 欄） 269
15.6 新手常見疑難問題 271
15.7 實戰技能訓練營 272
第16 章 項目實訓1——開發時尚購物網站 273
16.1 系統分析 274
16.2 系統設計 274
16.3 網頁預覽 275
16.4 項目代碼實現 280
16.4.1 首頁頁面代碼 280
16.4.2 動態效果代碼 292
16.4.3 購物車代碼 293
16.4.4 登錄頁面代碼 295
16.4.5 商品展示頁面代碼 296
16.4.6 聯繫我們頁面代碼 301
16.5 項結 302
第17 章 項目實訓2——開發連鎖咖啡響應式網站 304
17.1 網站概述 305
17.2 設計首頁佈局 307
17.3 設計可切換導航 308
17.4 主體內容 313
17.4.1 設計輪播廣告區 313
17.4.2 設計區 315
17.4.3 設計登錄註冊和logo 316
17.4.4 設計展示區 317
17.4.5 設計產品生產流程區 318
17.5 設計底部隱藏導航 321
第18 章 項目實訓3——連鎖酒店訂購系統APP 322
18.1 連鎖酒店訂購的需求分析 323
18.2 網站的結構 323
18.3 連鎖酒店系統的代碼實現 324
18.3.1 設計首頁 324
18.3.2 設計訂購頁面 325
18.3.3 設計連鎖分店頁面 329
18.3.4 設計查看訂單頁面 331
18.3.5 設計酒店介紹頁面 332
18.4 APP 的和測試 332