jQuery Web開(kāi)發(fā)案例教程

## 章名目錄
【上篇】 jQurey基礎(chǔ)篇
第 1章 jQuery基礎(chǔ)
第 2章 HTML5、CSS3和JavaScript基礎(chǔ)知識(shí)
第3章 jQuery選擇器與管理結(jié)果集
第4章 使用jQuery控制DOM
第5章 jQuery事件
第6章 jQuery的功能函數(shù)
第7章 jQuery與AJAX
第8章 利用jQuery制作動(dòng)畫(huà)與特效
第9章 jQuery插件
【下篇】 jQuery綜合實(shí)例篇
第 10章 綜合實(shí)例一：網(wǎng)頁(yè)留言本
第 11章 綜合實(shí)例二：網(wǎng)絡(luò)相冊(cè)
第 12章 綜合實(shí)例三：交互式流量套餐選擇頁(yè)面
第 13章 綜合實(shí)例四：網(wǎng)頁(yè)圖片剪裁器
第 14章 綜合實(shí)例五：前端工程化

## 詳細(xì)目錄
【上篇】 jQurey基礎(chǔ)篇
第 1章 jQuery基礎(chǔ)
1.1 jQuery概述 2
1.1.1 jQuery簡(jiǎn)介 2
1.1.2 下載并使用jQuery 3
1.2 jQuery的$ 4
1.2.1 選擇器 4
1.2.2 功能函數(shù)的前綴 6
1.2.3 window.onload 6
1.2.4 創(chuàng)建DOM元素 7
1.2.5 擴(kuò)展jQuery 8
1.2.6 沖突問(wèn)題 9
1.3 使用VSCode編寫(xiě)第 一個(gè)jQuery頁(yè)面 10
1.3.1 創(chuàng)建基礎(chǔ)的HTML文檔 10
1.3.2 編寫(xiě)jQuery代碼 11
本章小結(jié) 12
習(xí)題1 12
第 2章 HTML5、CSS3和JavaScript基礎(chǔ)知識(shí)
2.1 ES6的新特性 14
2.1.1 let關(guān)鍵字 15
2.1.2 const關(guān)鍵字 15
2.1.3 for…of循環(huán) 16
2.1.4 字符串模板 16
2.1.5 參數(shù)默認(rèn)值 17
2.1.6 類(lèi)與繼承 17
2.1.7 箭頭函數(shù) 18
2.1.8 剩余運(yùn)算符與剩余參數(shù) 20
2.1.9 展開(kāi)運(yùn)算符 20
2.1.10 數(shù)組的解構(gòu)賦值 21
2.1.11 對(duì)象的解構(gòu)賦值 21
2.1.12 模塊 22
2.2 HTML5新增的語(yǔ)義化標(biāo)記 23
2.3 CSS3引入的常用新特性 24
2.3.1 CSS3新增的常用樣式屬性 25
2.3.2 新增的布局方式——彈性盒子布局 27
2.3.3 新增的布局方式——網(wǎng)格布局 28
本章小結(jié) 29
習(xí)題2 29
第3章 jQuery選擇器與管理結(jié)果集
3.1 選擇器 30
3.1.1 屬性選擇器 31
3.1.2 包含選擇器 33
3.1.3 位置選擇器 34
3.1.4 過(guò)濾選擇器 37
3.1.5 反向選擇器 39
3.2 遍歷DOM 39
3.2.1 children() 40
3.2.2 parent()和parents() 42
3.2.3 siblings() 44
3.3 管理結(jié)果集 45
3.3.1 獲取選中元素的個(gè)數(shù) 46
3.3.2 提取元素 47
3.3.3 添加、刪除、過(guò)濾 49
3.3.4 查找 52
3.3.5 遍歷 53
3.4 jQuery鏈 54
本章小結(jié) 54
習(xí)題3 55
第4章 使用jQuery控制DOM
4.1 網(wǎng)頁(yè)中的DOM框架 57
4.2 DOM中的節(jié)點(diǎn) 57
4.2.1 元素節(jié)點(diǎn) 58
4.2.2 文本節(jié)點(diǎn) 58
4.2.3 屬性節(jié)點(diǎn) 58
4.3 標(biāo)記的屬性 58
4.3.1 獲取屬性的值 59
4.3.2 設(shè)置屬性的值 60
4.3.3 刪除屬性 62
4.4 元素的樣式 62
4.4.1 添加、刪除CSS類(lèi)別 63
4.4.2 動(dòng)態(tài)切換 63
4.4.3 直接獲取、設(shè)置樣式 64
4.5 頁(yè)面的元素 66
4.5.1 直接獲取和編輯內(nèi)容 66
4.5.2 添加元素 68
4.5.3 刪除元素 72
4.5.4 克隆元素 74
4.6 表單元素的值 75
4.6.1 獲取表單元素的值 75
4.6.2 設(shè)置表單元素的值 77
4.7 元素的尺寸 77
4.7.1 width()和height()方法 78
4.7.2 innerWidth()和innerHeight()方法 79
4.7.3 outerWidth()和outerHeight()方法 80
4.8 元素的位置 81
4.8.1 offset()方法 81
4.8.2 position()方法 82
4.8.3 scrollTop()方法 83
本章小結(jié) 84
習(xí)題4 84
第5章 jQuery事件
5.1 事件與事件流 86
5.2 事件監(jiān)聽(tīng) 87
5.2.1 bind()方法 87
5.2.2 one()方法 89
5.2.3 JavaScript的事件監(jiān)聽(tīng) 90
5.3 事件刪除 92
5.4 事件對(duì)象 93
5.5 事件觸發(fā) 95
5.6 事件的動(dòng)態(tài)交替 96
5.6.1 hover事件的交替 96
5.6.2 click事件的交替 97
5.7 事件委托 98
5.8 綜合實(shí)例：快餐在線(xiàn) 100
5.8.1 框架搭建 100
5.8.2 添加事件 101
5.8.3 樣式 104
本章小結(jié) 106
習(xí)題5 107
第6章 jQuery的功能函數(shù)
6.1 處理JavaScript對(duì)象 108
6.1.1 遍歷 108
6.1.2 數(shù)據(jù)過(guò)濾 110
6.1.3 數(shù)組的轉(zhuǎn)化 112
6.1.4 數(shù)組元素的查找 114
6.2 獲取外部代碼 115
6.3 $.data()方法 116
6.4 $.extend()方法 118
6.5 類(lèi)型判斷 119
本章小結(jié) 120
習(xí)題6 121
第7章 jQuery與AJAX
7.1 認(rèn)識(shí)AJAX 122
7.1.1 AJAX的基本概念 122
7.1.2 AJAX的組成 124
7.2 獲取異步數(shù)據(jù) 124
7.2.1 傳統(tǒng)方法 124
7.2.2 jQuery的load()方法 126
7.3 GET與POST 128
7.4 控制AJAX 130
7.4.1 設(shè)置AJAX訪(fǎng)問(wèn)服務(wù)器的細(xì)節(jié) 130
7.4.2 全局設(shè)定AJAX 133
7.4.3 AJAX事件 133
7.4.4 實(shí)例：模擬百度的數(shù)據(jù)加載 135
7.5 實(shí)例：利用jQuery制作自動(dòng)提示的文本框 137
7.5.1 框架結(jié)構(gòu) 138
7.5.2 匹配用戶(hù)輸入 139
7.5.3 顯示 清除提示框 139
本章小結(jié) 143
習(xí)題7 143
第8章 利用jQuery制作動(dòng)畫(huà)與特效
8.1 元素的顯示和隱藏 145
8.1.1 show()和hide() 145
8.1.2 實(shí)例：多級(jí)菜單 146
8.1.3 toggle() 148
8.2 淡入淡出的特效 149
8.2.1 再探討show()、hide()和toggle() 149
8.2.2 fadeIn()和fadeOut() 150
8.2.3 自定義變化透明度 151
8.3 幻燈片特效 153
8.4 自定義動(dòng)畫(huà) 155
本章小結(jié) 156
習(xí)題8 156
第9章 jQuery插件
9.1 模擬加入購(gòu)物車(chē) 158
9.1.1 鼠標(biāo)拖曳 158
9.1.2 拖入購(gòu)物車(chē) 162
9.1.3 模態(tài)框提示 163
9.2 流行的Tab菜單 167
9.3 輪播圖 170
9.3.1 使用輪播圖插件前的準(zhǔn)備 170
9.3.2 使用輪播圖插件 171
9.3.3 調(diào)整輪播圖效果 172
本章小結(jié) 174
習(xí)題9 174
【下篇】 jQuery綜合實(shí)例篇
第 10章 綜合實(shí)例一：網(wǎng)頁(yè)留言本
10.1 基本留言本 177
10.2 改用AJAX方式實(shí)現(xiàn)留言本 179
10.2.1 讀取留言列表 180
10.2.2 保存并返回新留言 180
10.2.3 制作留言本入口頁(yè)面 180
10.3 對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證 182
本章小結(jié) 184
第 11章 綜合實(shí)例二：網(wǎng)絡(luò)相冊(cè)
11.1 整體分析 185
11.2 模塊拆分 186
11.2.1 縮略圖排列 186
11.2.2 縮略圖提示 189
11.2.3 顯示大圖 189
11.3 功能細(xì)化 191
11.3.1 初始化頁(yè)面 191
11.3.2 單擊縮略圖 191
11.3.3 關(guān)閉按鈕 192
11.3.4 大圖瀏覽 193
本章小結(jié) 195
第 12章 綜合實(shí)例三：交互式流量套餐選擇頁(yè)面
12.1 表格框架 197
12.1.1 表格 197
12.1.2 選擇套餐 198
12.1.3 商用頁(yè)面 199
12.2 交互選擇 201
12.3 注冊(cè)單 202
12.3.1 注冊(cè)單框架 202
12.3.2 注冊(cè)單的顯示和隱藏 204
12.3.3 AJAX校驗(yàn) 206
12.3.4 密碼校驗(yàn) 208
12.3.5 AJAX提交 208
本章小結(jié) 210
第 13章 綜合實(shí)例四：網(wǎng)頁(yè)圖片剪裁器
13.1 整體分析 212
13.2 頁(yè)面HTML結(jié)構(gòu)和CSS樣式 213
13.2.1 HTML結(jié)構(gòu) 213
13.2.2 選區(qū)部分的結(jié)構(gòu)與樣式 214
13.3 實(shí)現(xiàn)核心邏輯 215
13.3.1 定義基礎(chǔ)類(lèi) 215
13.3.2 定義Cropper類(lèi) 217
13.4 使用jQuery處理交互 221
13.4.1 初始化圖像 221
13.4.2 控制選區(qū) 222
13.4.3 終剪裁 226
本章小結(jié) 227
第 14章 綜合實(shí)例五：前端工程化
14.1 在瀏覽器中監(jiān)視與調(diào)試 228
14.1.1 使用console.log()和alert()方法監(jiān)視輸出值 228
14.1.2 使用調(diào)試器 230
14.2 JavaScript優(yōu)化 232
14.2.1 壓縮代碼量 232
14.2.2 變量作用域 234
14.2.3 使用內(nèi)置函數(shù) 236
14.2.4 優(yōu)化if語(yǔ)句 237
14.2.5 小化語(yǔ)句數(shù)量 237
14.2.6 減少DOM操作 238
14.3 使用webpack構(gòu)建系統(tǒng) 238
14.3.1 安裝Node.js環(huán)境 239
14.3.2 準(zhǔn)備項(xiàng)目文件 240
14.3.3 安裝webpack及相關(guān)組件 241
14.3.4 預(yù)覽與調(diào)試 244
14.3.5 打包 246
本章小結(jié) 248