JQuery動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與制作

第1章  jQuery快速入門 1
1.1  認(rèn)識(shí)jQuery 2
1.1.1  jQuery能做什么 2
1.1.2  jQuery的特點(diǎn) 2
1.2  下載并安裝jQuery 3
1.2.1  下載jQuery 3
1.2.2  安裝jQuery 4
1.3  測試jQuery 4
1.4  jQuery與CSS 5
1.4.1  CSS 構(gòu)造規(guī)則 5
1.4.2  jQuery的引入 6
1.5  通過案例理解jQuery的技術(shù)優(yōu)勢 7
1.6  上機(jī)練習(xí) 9
第2章  jQuery的選擇器 11
2.1  jQuery中美元符號(hào)$的使用 12
2.1.1  $符號(hào)的使用 12
2.1.2  功能函數(shù)的前綴 13
2.1.3  創(chuàng)建DOM元素 14
2.2  基本選擇器 14
2.2.1  通配符選擇器(*) 15
2.2.2  ID選擇器(#id) 16
2.2.3  類名選擇器(.class) 17
2.2.4  元素選擇器(element) 18
2.2.5  復(fù)合選擇器 19
2.3  層級(jí)選擇器 20
2.3.1  祖先后代選擇器(ancestor descendant) 20
2.3.2  父子選擇器(parent>child) 22
2.3.3  相鄰元素選擇器(prev next) 23
2.3.4  兄弟元素選擇器(prev~siblings) 25
2.4  過濾選擇器 26
2.4.1  簡單過濾選擇器 26
2.4.2  內(nèi)容過濾選擇器 32
2.4.3  可見性過濾器 38
2.4.4  表單過濾器 41
2.5  表單選擇器 43
2.5.1  :input 43
2.5.2  :text 44
2.5.3  :password 45
2.5.4  :radio 46
2.5.5  :checkbox 47
2.5.6  :submit 48
2.5.7  :reset 49
2.5.8  :button 50
2.5.9  :image 50
2.5.10  :file 51
2.6  屬性選擇器 52
2.6.1  [attribute] 52
2.6.2  [attribute=value] 53
2.6.3  [attribute!=value] 55
2.6.4  [attribute$=value] 56
2.7  上機(jī)練習(xí) 58
第3章  使用jQuery控制頁面 59
3.1  對(duì)頁面的內(nèi)容進(jìn)行操作 60
3.1.1  對(duì)文本內(nèi)容進(jìn)行操作 60
3.1.2  對(duì)HTML內(nèi)容進(jìn)行操作 61
3.2  對(duì)標(biāo)記的屬性進(jìn)行操作 63
3.2.1  獲取屬性的值 63
3.2.2  設(shè)置屬性的值 64
3.2.3  刪除屬性的值 65
3.3  對(duì)表單元素進(jìn)行操作 66
3.3.1  獲取表單元素的值 66
3.3.2  設(shè)置表單元素的值 67
3.4  對(duì)元素的CSS樣式進(jìn)行操作 68
3.4.1  添加CSS類 68
3.4.2  刪除CSS類 70
3.4.3  動(dòng)態(tài)切換CSS類 71
3.4.4  獲取和設(shè)置CSS樣式 72
3.5  獲取與編輯DOM節(jié)點(diǎn) 74
3.5.1  插入節(jié)點(diǎn) 74
3.5.2  刪除節(jié)點(diǎn) 76
3.5.3  復(fù)制節(jié)點(diǎn) 78
3.5.4  替換節(jié)點(diǎn) 79
3.6  上機(jī)練習(xí) 80
第4章  使用jQuery操作事件 83
4.1  jQuery的事件機(jī)制 84
4.1.1  什么是jQuery的事件機(jī)制 84
4.1.2  切換事件 84
4.1.3  事件冒泡 85
4.2  頁面加載響應(yīng)事件 86
4.3  jQuery中的事件函數(shù) 87
4.3.1  鍵盤操作事件函數(shù) 87
4.3.2  鼠標(biāo)操作事件 89
4.3.3  其他的常用事件 92
4.4  事件的基本操作 94
4.4.1  綁定事件 94
4.4.2  觸發(fā)事件 95
4.4.3  移除事件 96
4.5  上機(jī)練習(xí) 97
第5章  使用jQuery操作動(dòng)畫 99
5.1  網(wǎng)頁動(dòng)畫特效的實(shí)現(xiàn)方法 100
5.1.1  通過CSS實(shí)現(xiàn)動(dòng)畫特效 100
5.1.2  通過jQuery實(shí)現(xiàn)動(dòng)畫特效 101
5.2  jQuery的基本動(dòng)畫效果 103
5.2.1  隱藏元素 103
5.2.2  顯示元素 106
5.2.3  狀態(tài)切換 108
5.3  淡入淡出的動(dòng)畫效果 109
5.3.1  淡入隱藏元素 109
5.3.2  淡出可見元素 111
5.3.3  切換淡入淡出元素 112
5.3.4  淡入淡出元素至指定數(shù)值 113
5.4  滑動(dòng)效果 114
5.4.1  滑動(dòng)顯示匹配的元素 114
5.4.2  滑動(dòng)隱藏匹配的元素 116
5.4.3  通過高度的變化動(dòng)態(tài)切換元素的可見性 117
5.5  自定義的動(dòng)畫效果 119
5.5.1  創(chuàng)建自定義動(dòng)畫 119
5.5.2  停止動(dòng)畫 120
5.6  上機(jī)練習(xí) 121
第6章  jQuery的功能函數(shù) 123
6.1  功能函數(shù)概述 124
6.2  常用的功能函數(shù) 124
6.2.1  操作數(shù)組和對(duì)象 125
6.2.2  操作字符串 128
6.2.3  序列化操作 130
6.3  上機(jī)練習(xí) 131
第7章  jQuery插件的應(yīng)用與開發(fā) 133
7.1  理解插件 134
7.1.1  什么是插件 134
7.1.2  從哪里獲取插件 134
7.1.3  如何使用插件 134
7.2  流行的jQuery插件 135
7.2.1  jQueryUI插件 135
7.2.2  Form插件 139
7.2.3  提示信息插件 140
7.2.4  jcarousel插件 141
7.3  自定義插件 141
7.3.1  插件的工作原理 141
7.3.2  自定義一個(gè)簡單的插件 142
7.4  上機(jī)練習(xí) 144
第8章  jQuery與Ajax技術(shù)的應(yīng)用 147
8.1  Ajax概述 148
8.1.1  什么是Ajax 148
8.1.2  Ajax的工作原理 149
8.1.3  Ajax的優(yōu)缺點(diǎn) 150
8.2  Ajax技術(shù)的組成 150
8.2.1  XMLHttpRequest對(duì)象 150
8.2.2  XML語言 150
8.2.3  JavaScript語言 152
8.2.4  CSS技術(shù) 152
8.2.5  DOM技術(shù) 152
8.3  XMLHttpRequest對(duì)象 153
8.3.1  初始化XMLHttpRequest對(duì)象 153
8.3.2  XMLHttpRequest對(duì)象的屬性 153
8.3.3  XMLHttpRequest對(duì)象的方法 155
8.4  Ajax異步交互的應(yīng)用 157
8.4.1  什么是異步交互 157
8.4.2  異步對(duì)象連接服務(wù)器 157
8.4.3  GET和POST模式 159
8.4.4  服務(wù)器返回XML文檔 161
8.4.5  處理多個(gè)異步請求 164
8.5  jQuery中的Ajax 166
8.5.1  load()方法 166
8.5.2  $.get()方法和$.post()方法 169
8.5.3  $.getScript()方法和$.getJson()方法 171
8.5.4  $.ajax()方法 173
8.6  上機(jī)練習(xí) 174
第9章  jQuery的經(jīng)典交互特效案例 177
9.1  設(shè)計(jì)時(shí)間軸特效 178
9.2  設(shè)計(jì)tab頁面切換效果 181
9.3  設(shè)計(jì)滑動(dòng)門特效 183
9.4  設(shè)計(jì)焦點(diǎn)圖輪播特效 185
9.5  設(shè)計(jì)網(wǎng)頁定位導(dǎo)航特效 189
9.6  設(shè)計(jì)導(dǎo)航條菜單效果 191
9.7  設(shè)計(jì)瀑布流特效 194
9.8  設(shè)計(jì)彈出層效果 196
9.9  設(shè)計(jì)倒計(jì)時(shí)效果 198
9.10  設(shè)計(jì)抽獎(jiǎng)效果 200
9.11  上機(jī)練習(xí) 203
第10章  設(shè)計(jì)響應(yīng)式網(wǎng)頁 205
10.1  什么是響應(yīng)式網(wǎng)頁設(shè)計(jì) 206
10.2  像素和屏幕分辨率 207
10.3  視口 207
10.3.1  視口的分類和常用屬性 207
10.3.2  媒體查詢 208
10.4  響應(yīng)式網(wǎng)頁的布局設(shè)計(jì) 209
10.4.1  常用布局類型 209
10.4.2  布局的實(shí)現(xiàn)方式 210
10.4.3  響應(yīng)式布局的設(shè)計(jì)與實(shí)現(xiàn) 211
10.5  響應(yīng)式圖片 212
10.5.1  使用標(biāo)簽 212
10.5.2  使用CSS圖片 213
10.6  響應(yīng)式視頻 215
10.7  響應(yīng)式導(dǎo)航菜單 216
10.8  響應(yīng)式表格 218
10.8.1  隱藏表格中的列 218
10.8.2  滾動(dòng)表格中的列 221
10.8.3  轉(zhuǎn)換表格中的列 223
10.9  上機(jī)練習(xí) 226
第11章  流行的響應(yīng)式開發(fā)框架 Bootstrap 227
11.1  Bootstrap概述 228
11.1.1  Bootstrap的特色 228
11.1.2  Bootstrap 4的重大更新 229
11.2  下載Bootstrap 229
11.3  安裝和使用Bootstrap 231
11.3.1  本地安裝Bootstrap 231
11.3.2  初次使用Bootstrap 232
11.4  使用常用組件 233
11.4.1  使用下拉菜單 233
11.4.2  使用按鈕組 234
11.4.3  使用導(dǎo)航組件 235
11.4.4  綁定導(dǎo)航和下拉菜單 237
11.4.5  使用面包屑導(dǎo)航 239
11.4.6  使用廣告屏 240
11.4.7  使用card(卡片) 241
11.4.8  使用進(jìn)度條 243
11.4.9  使用模態(tài)框 248
11.4.10  使用滾動(dòng)監(jiān)聽 250
11.5  膠囊導(dǎo)航選項(xiàng)卡(Tab欄) 252
11.6  上機(jī)練習(xí) 253
第12章  綜合項(xiàng)目1——開發(fā)商品信息展示系統(tǒng) 255
12.1  項(xiàng)目需求分析 256
12.2  項(xiàng)目技術(shù)分析 258
12.3  系統(tǒng)的代碼實(shí)現(xiàn) 258
12.3.1  設(shè)計(jì)首頁 258
12.3.2  開發(fā)控制器類的文件 260
12.3.3  開發(fā)數(shù)據(jù)模型類文件 261
12.3.4  開發(fā)視圖抽象類的文件 263
12.3.5  項(xiàng)目中的其他js文件 說明 266
第13章  綜合項(xiàng)目2——開發(fā)企業(yè)門戶網(wǎng)站 267
13.1  系統(tǒng)分析 268
13.2  系統(tǒng)設(shè)計(jì) 268
13.2.1  系統(tǒng)目標(biāo) 268
13.2.2  系統(tǒng)功能結(jié)構(gòu) 268
13.2.3  文件夾組織結(jié)構(gòu) 268
13.3  網(wǎng)頁預(yù)覽 269
13.3.1  網(wǎng)站首頁 269
13.3.2  產(chǎn)品分類頁面 270
13.3.3  產(chǎn)品介紹頁面 271
13.3.4  新聞中心頁面 271
13.3.5  新聞詳情頁面 272
13.4  項(xiàng)目代碼實(shí)現(xiàn) 273
13.4.1  網(wǎng)站首頁頁面代碼 273
13.4.2  圖片動(dòng)態(tài)效果代碼 279
13.4.3  公司簡介頁面代碼 280
13.4.4  產(chǎn)品介紹頁面代碼 281
13.4.5  新聞中心頁面代碼 286
13.4.6  聯(lián)系我們頁面代碼 288
13.5  項(xiàng)目總結(jié) 289
第14章  綜合項(xiàng)目3——開發(fā)連鎖咖啡響應(yīng)式網(wǎng)站 291
14.1  網(wǎng)站概述 292
14.1.1  網(wǎng)站結(jié)構(gòu) 292
14.1.2  設(shè)計(jì)效果 292
14.1.3  設(shè)計(jì)準(zhǔn)備 293
14.2  設(shè)計(jì)首頁布局 294
14.3  設(shè)計(jì)可切換導(dǎo)航 295
14.4  主體內(nèi)容 300
14.4.1  設(shè)計(jì)輪播廣告區(qū) 301
14.4.2  設(shè)計(jì)產(chǎn)品推薦區(qū) 303
14.4.3  設(shè)計(jì)登錄注冊按鈕 和Logo 303
14.4.4  設(shè)計(jì)特色展示區(qū) 305
14.4.5  設(shè)計(jì)產(chǎn)品生產(chǎn)流程區(qū) 307
14.5  設(shè)計(jì)底部隱藏導(dǎo)航 309
第15章  綜合項(xiàng)目4——開發(fā)網(wǎng)上商城網(wǎng)站 311
15.1  系統(tǒng)分析 312
15.2  系統(tǒng)設(shè)計(jì) 312
15.2.1  系統(tǒng)功能結(jié)構(gòu) 312
15.2.2  文件夾組織結(jié)構(gòu) 312
15.3  網(wǎng)頁預(yù)覽 313
15.3.1  網(wǎng)站首頁效果 313
15.3.2  關(guān)于我們效果 314
15.3.3  商品展示效果 315
15.3.4  商品詳情效果 317
15.3.5  購物車效果 317
15.3.6  品牌故事效果 318
15.3.7  用戶登錄效果 318
15.3.8  用戶注冊效果 318
15.4  項(xiàng)目代碼實(shí)現(xiàn) 319
15.4.1  首頁頁面代碼 319
15.4.2  動(dòng)態(tài)效果代碼 331
15.4.3  購物車代碼 332
15.4.4  登錄頁面代碼 334
15.4.5  商品展示頁面代碼 335
15.4.6  “聯(lián)系我們”頁面代碼 340
15.5  項(xiàng)目總結(jié) 341