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

第1章  jQuery快速入門 1
1.1  認(rèn)識jQuery 2
1.1.1  jQuery能做什么 2
1.1.2  jQuery的特點 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中美元符號$的使用 12
2.1.1  $符號的使用 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  層級選擇器 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  對頁面的內(nèi)容進(jìn)行操作 60
3.1.1  對文本內(nèi)容進(jìn)行操作 60
3.1.2  對HTML內(nèi)容進(jìn)行操作 61
3.2  對標(biāo)記的屬性進(jìn)行操作 63
3.2.1  獲取屬性的值 63
3.2.2  設(shè)置屬性的值 64
3.2.3  刪除屬性的值 65
3.3  對表單元素進(jìn)行操作 66
3.3.1  獲取表單元素的值 66
3.3.2  設(shè)置表單元素的值 67
3.4  對元素的CSS樣式進(jìn)行操作 68
3.4.1  添加CSS類 68
3.4.2  刪除CSS類 70
3.4.3  動態(tài)切換CSS類 71
3.4.4  獲取和設(shè)置CSS樣式 72
3.5  獲取與編輯DOM節(jié)點 74
3.5.1  插入節(jié)點 74
3.5.2  刪除節(jié)點 76
3.5.3  復(fù)制節(jié)點 78
3.5.4  替換節(jié)點 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操作動畫 99
5.1  網(wǎng)頁動畫特效的實現(xiàn)方法 100
5.1.1  通過CSS實現(xiàn)動畫特效 100
5.1.2  通過jQuery實現(xiàn)動畫特效 101
5.2  jQuery的基本動畫效果 103
5.2.1  隱藏元素 103
5.2.2  顯示元素 106
5.2.3  狀態(tài)切換 108
5.3  淡入淡出的動畫效果 109
5.3.1  淡入隱藏元素 109
5.3.2  淡出可見元素 111
5.3.3  切換淡入淡出元素 112
5.3.4  淡入淡出元素至指定數(shù)值 113
5.4  滑動效果 114
5.4.1  滑動顯示匹配的元素 114
5.4.2  滑動隱藏匹配的元素 116
5.4.3  通過高度的變化動態(tài)切換元素的可見性 117
5.5  自定義的動畫效果 119
5.5.1  創(chuàng)建自定義動畫 119
5.5.2  停止動畫 120
5.6  上機(jī)練習(xí) 121
第6章  jQuery的功能函數(shù) 123
6.1  功能函數(shù)概述 124
6.2  常用的功能函數(shù) 124
6.2.1  操作數(shù)組和對象 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  自定義一個簡單的插件 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)缺點 150
8.2  Ajax技術(shù)的組成 150
8.2.1  XMLHttpRequest對象 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對象 153
8.3.1  初始化XMLHttpRequest對象 153
8.3.2  XMLHttpRequest對象的屬性 153
8.3.3  XMLHttpRequest對象的方法 155
8.4  Ajax異步交互的應(yīng)用 157
8.4.1  什么是異步交互 157
8.4.2  異步對象連接服務(wù)器 157
8.4.3  GET和POST模式 159
8.4.4  服務(wù)器返回XML文檔 161
8.4.5  處理多個異步請求 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è)計時間軸特效 178
9.2  設(shè)計tab頁面切換效果 181
9.3  設(shè)計滑動門特效 183
9.4  設(shè)計焦點圖輪播特效 185
9.5  設(shè)計網(wǎng)頁定位導(dǎo)航特效 189
9.6  設(shè)計導(dǎo)航條菜單效果 191
9.7  設(shè)計瀑布流特效 194
9.8  設(shè)計彈出層效果 196
9.9  設(shè)計倒計時效果 198
9.10  設(shè)計抽獎效果 200
9.11  上機(jī)練習(xí) 203
第10章  設(shè)計響應(yīng)式網(wǎng)頁 205
10.1  什么是響應(yīng)式網(wǎng)頁設(shè)計 206
10.2  像素和屏幕分辨率 207
10.3  視口 207
10.3.1  視口的分類和常用屬性 207
10.3.2  媒體查詢 208
10.4  響應(yīng)式網(wǎng)頁的布局設(shè)計 209
10.4.1  常用布局類型 209
10.4.2  布局的實現(xiàn)方式 210
10.4.3  響應(yīng)式布局的設(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  滾動表格中的列 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  使用滾動監(jiān)聽 250
11.5  膠囊導(dǎo)航選項卡(Tab欄) 252
11.6  上機(jī)練習(xí) 253
第12章  綜合項目1——開發(fā)商品信息展示系統(tǒng) 255
12.1  項目需求分析 256
12.2  項目技術(shù)分析 258
12.3  系統(tǒng)的代碼實現(xiàn) 258
12.3.1  設(shè)計首頁 258
12.3.2  開發(fā)控制器類的文件 260
12.3.3  開發(fā)數(shù)據(jù)模型類文件 261
12.3.4  開發(fā)視圖抽象類的文件 263
12.3.5  項目中的其他js文件 說明 266
第13章  綜合項目2——開發(fā)企業(yè)門戶網(wǎng)站 267
13.1  系統(tǒng)分析 268
13.2  系統(tǒng)設(shè)計 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àn) 273
13.4.1  網(wǎng)站首頁頁面代碼 273
13.4.2  圖片動態(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  項目總結(jié) 289
第14章  綜合項目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è)計效果 292
14.1.3  設(shè)計準(zhǔn)備 293
14.2  設(shè)計首頁布局 294
14.3  設(shè)計可切換導(dǎo)航 295
14.4  主體內(nèi)容 300
14.4.1  設(shè)計輪播廣告區(qū) 301
14.4.2  設(shè)計產(chǎn)品推薦區(qū) 303
14.4.3  設(shè)計登錄注冊按鈕 和Logo 303
14.4.4  設(shè)計特色展示區(qū) 305
14.4.5  設(shè)計產(chǎn)品生產(chǎn)流程區(qū) 307
14.5  設(shè)計底部隱藏導(dǎo)航 309
第15章  綜合項目4——開發(fā)網(wǎng)上商城網(wǎng)站 311
15.1  系統(tǒng)分析 312
15.2  系統(tǒng)設(shè)計 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àn) 319
15.4.1  首頁頁面代碼 319
15.4.2  動態(tài)效果代碼 331
15.4.3  購物車代碼 332
15.4.4  登錄頁面代碼 334
15.4.5  商品展示頁面代碼 335
15.4.6  “聯(lián)系我們”頁面代碼 340
15.5  項目總結(jié) 341