網(wǎng)頁(yè)設(shè)計(jì)與制作：JavaScript+jQuery標(biāo)準(zhǔn)教程

第 1章　網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)
【學(xué)習(xí)目標(biāo)】　01
【導(dǎo)引示例】　01
1.1　網(wǎng)頁(yè)設(shè)計(jì)概述　01
1.1.1　網(wǎng)頁(yè)設(shè)計(jì)常用技術(shù)　02
1.1.2　網(wǎng)頁(yè)設(shè)計(jì)工具　02
1.1.3　網(wǎng)頁(yè)展示工具　02
1.2　HTML和CSS　02
1.2.1　HTML基礎(chǔ)　03
1.2.2　HTML常用標(biāo)簽　03
1.2.3　CSS基礎(chǔ)語(yǔ)法　04
1.2.4　CSS選擇器　04
1.2.5　CSS常用樣式屬性　04
1.3　初識(shí)JavaScript　05
1.3.1　JavaScript發(fā)展史　05
1.3.2　引入方式　05
1.3.3　輸出語(yǔ)句　06
1.3.4　注釋　06
【案例分析1-1】Hello，JavaScript！程序　07
1.4　初識(shí)jQuery　07
1.4.1　jQuery發(fā)展史　07
1.4.2　引入jQuery　08
1.4.3　jQuery基礎(chǔ)語(yǔ)法　08
【案例分析1-2】Hello，jQuery！程序　08
1.5　思考與練習(xí)　09
1.5.1　疑難解讀　09
1.5.2　課后習(xí)題　10
第　2章 JavaScript基礎(chǔ)
【學(xué)習(xí)目標(biāo)】　11
【導(dǎo)引示例】　11
2.1　變量　11
2.1.1　定義變量　11
2.1.2　關(guān)鍵字　12
【案例分析2-1】數(shù)據(jù)交換編程思想　13
2.2　數(shù)據(jù)類(lèi)型　13
2.2.1　數(shù)據(jù)類(lèi)型分類(lèi)　13
2.2.2　數(shù)值類(lèi)型　14
2.2.3　字符串類(lèi)型　14
2.2.4　布爾類(lèi)型　15
2.2.5　其他基本數(shù)據(jù)類(lèi)型　15
2.2.6　數(shù)據(jù)類(lèi)型轉(zhuǎn)換　16
【案例分析2-2】輸出多種類(lèi)型變量的值　18
2.3　運(yùn)算符　18
2.3.1　運(yùn)算符概述　18
2.3.2　運(yùn)算規(guī)則　18
2.3.3　運(yùn)算符優(yōu)先級(jí)　20
【案例分析2-3】連接并輸出多個(gè)變量的內(nèi)容　21
2.4　分支結(jié)構(gòu)　21
2.4.1　if語(yǔ)句　21
2.4.2　if...else語(yǔ)句　22
2.4.3　if...else if語(yǔ)句　23
2.4.4　switch語(yǔ)句　24
【案例分析2-4】根據(jù)分?jǐn)?shù)輸出等級(jí)評(píng)價(jià)　24
2.5　循環(huán)結(jié)構(gòu)　25
2.5.1　for循環(huán)　25
2.5.2　while循環(huán)　26
2.5.3　do...while循環(huán)　26
【案例分析2-5】控制臺(tái)輸出九九乘法表　27
2.6　跳轉(zhuǎn)結(jié)構(gòu)　27
2.6.1　continue語(yǔ)句　28
2.6.2　break語(yǔ)句　28
【案例分析2-6】當(dāng)累加和大于100時(shí)跳出循環(huán)　28
【案例分析2-7】根據(jù)用戶(hù)輸入的層數(shù)繪制金字塔　28
2.7　思考與練習(xí)　29
2.7.1　疑難解讀　29
2.7.2　課后習(xí)題　30
第3章　數(shù)組和函數(shù)
【學(xué)習(xí)目標(biāo)】　31
【導(dǎo)引示例】　31
3.1　初識(shí)數(shù)組　32
3.1.1　創(chuàng)建數(shù)組　32
3.1.2　訪(fǎng)問(wèn)數(shù)組元素　33
3.1.3　數(shù)組遍歷　33
【案例分析3-1】獲取數(shù)組元素中的最大值　34
3.2　數(shù)組元素操作　34
3.2.1　修改數(shù)組元素　34
3.2.2　數(shù)組元素排序　36
【案例分析3-2】對(duì)數(shù)組元素進(jìn)行排序后輸出　36
3.3　初識(shí)函數(shù)　37
3.3.1　函數(shù)定義　37
3.3.2　函數(shù)的參數(shù)　38
3.3.3　函數(shù)的返回值　38
3.3.4　自調(diào)用函數(shù)　39
【案例分析3-3】利用函數(shù)判斷閏年　39
3.4　作用域　40
3.4.1　作用域的分類(lèi)　40
3.4.2　訪(fǎng)問(wèn)父級(jí)作用域變量　40
3.4.3　閉包函數(shù)　41
【案例分析3-4】求任意兩個(gè)數(shù)的和　42
【案例分析3-5】輸出楊輝三角　42
3.5　思考與練習(xí)　44
3.5.1　疑難解讀　44
3.5.2　課后習(xí)題　44
第4章　類(lèi)和對(duì)象
【學(xué)習(xí)目標(biāo)】　46
【導(dǎo)引示例】　46
4.1　面向?qū)ο蟆?7
4.1.1　自定義對(duì)象　47
4.1.2　訪(fǎng)問(wèn)對(duì)象的屬性和方法　47
4.1.3　對(duì)象構(gòu)造器　48
4.1.4　定義類(lèi)　48
4.1.5　實(shí)例化對(duì)象　49
4.1.6　內(nèi)置對(duì)象　49
【案例分析4-1】根據(jù)輸入內(nèi)容輸出員工工資信息　50
4.2　初識(shí)瀏覽器對(duì)象模型　51
4.2.1　初識(shí)BOM　51
4.2.2　BOM結(jié)構(gòu)　51
4.3　window對(duì)象　52
4.3.1　window對(duì)象的屬性和方法　52
4.3.2　窗口加載事件　53
【案例分析4-2】根據(jù)需求修改窗口尺寸　54
4.4　BOM中的其他對(duì)象　54
4.4.1　location對(duì)象　54
4.4.2　navigator對(duì)象　55
4.4.3　history對(duì)象　56
4.4.4　screen對(duì)象　57
【案例分析4-3】定時(shí)切換詩(shī)句　58
4.5　思考與練習(xí)　59
4.5.1　疑難解讀　59
4.5.2　課后習(xí)題　59
第5章　文檔對(duì)象模型和事件
【學(xué)習(xí)目標(biāo)】　61
【導(dǎo)引示例】　61
5.1　初識(shí)DOM　62
5.1.1　DOM樹(shù)　62
5.1.2　document對(duì)象　62
5.2　對(duì)元素的操作　63
5.2.1　查找元素　63
5.2.2　設(shè)置元素的文本內(nèi)容和屬性值　65
5.2.3　設(shè)置元素樣式　66
【案例分析5-1】側(cè)邊欄折疊效果　67
5.3　事件　68
5.3.1　事件概述　68
5.3.2　鼠標(biāo)事件　68
5.3.3　鍵盤(pán)事件　69
5.3.4　表單事件　70
【案例分析5-2】圖片交互效果　71
5.4　DOM節(jié)點(diǎn)　72
5.4.1　節(jié)點(diǎn)基礎(chǔ)　72
5.4.2　創(chuàng)建節(jié)點(diǎn)　73
5.4.3　添加和刪除節(jié)點(diǎn)　73
5.4.4　替換節(jié)點(diǎn)　75
【案例分析5-3】添加快捷方式　76
【案例分析5-4】圖片移動(dòng)到鼠標(biāo)指針?biāo)谖恢谩?7
5.5　思考與練習(xí)　78
5.5.1　疑難解讀　78
5.5.2　課后習(xí)題　79
第6章　jQuery基礎(chǔ)
【學(xué)習(xí)目標(biāo)】　80
【導(dǎo)引示例】　80
6.1　jQuery選擇器　81
6.1.1　元素選擇器　81
6.1.2　屬性選擇器　82
6.1.3　關(guān)系選擇器　82
6.1.4　過(guò)濾器　83
6.1.5　表單過(guò)濾器　85
【案例分析6-1】選項(xiàng)卡　85
6.2　jQuery事件　86
6.2.1　事件方法的基礎(chǔ)語(yǔ)法　86
6.2.2　綁定事件　87
6.2.3　注銷(xiāo)事件　89
【案例分析6-2】使用on()方法實(shí)現(xiàn)文本交互效果　91
6.3　jQuery中的交互事件方法　91
6.3.1　鼠標(biāo)事件　91
6.3.2　鍵盤(pán)事件　92
6.3.3　頁(yè)面事件　93
6.3.4　表單事件　94
6.3.5　event對(duì)象的方法和屬性　95
【案例分析6-3】調(diào)用自定義事件方法切換文本樣式　96
【案例分析6-4】商品展示欄的交互效果　97
6.4　思考與練習(xí)　98
6.4.1　疑難解讀　98
6.4.2　課后習(xí)題　98
第7章　jQuery頁(yè)面操作
【學(xué)習(xí)目標(biāo)】　100
【導(dǎo)引示例】　100
7.1　HTML元素操作　101
7.1.1　獲取和設(shè)置元素內(nèi)容　101
7.1.2　操作元素屬性　102
7.1.3　創(chuàng)建元素　103
7.1.4　添加元素　104
7.1.5　替換和克隆元素　106
7.1.6　刪除元素　107
7.1.7　包裹元素　109
7.1.8　DOM樹(shù)操作　110
【案例分析7-1】購(gòu)物車(chē)　111
7.2　CSS類(lèi)操作　112
7.2.1　添加CSS類(lèi)　112
7.2.2　刪除CSS類(lèi)　113
7.2.3　動(dòng)態(tài)切換CSS類(lèi)　113
7.2.4　獲取和設(shè)置CSS樣式　114
7.2.5　元素尺寸操作　115
【案例分析7-2】下拉菜單效果　115
【案例分析7-3】多圖片商品展示框　117
7.3　思考與練習(xí)　118
7.3.1　疑難解讀　118
7.3.2　課后習(xí)題　118
第8章　jQuery動(dòng)畫(huà)
【學(xué)習(xí)目標(biāo)】　120
【導(dǎo)引示例】　120
8.1　基礎(chǔ)動(dòng)畫(huà)效果　121
8.1.1　隱藏元素　121
8.1.2　顯示元素　121
8.1.3　狀態(tài)切換　122
【案例分析8-1】側(cè)邊欄　123
8.2　淡入/淡出動(dòng)畫(huà)效果　124
8.2.1　淡入顯示元素　124
8.2.2　淡出隱藏元素　125
8.2.3　淡入/淡出切換元素　125
8.2.4　精準(zhǔn)控制淡入/淡出動(dòng)畫(huà)效果　126
【案例分析8-2】補(bǔ)全古詩(shī)并顯示和隱藏譯文　127
8.3　滑動(dòng)動(dòng)畫(huà)效果和自定義動(dòng)畫(huà)效果　127
8.3.1　滑動(dòng)顯示和隱藏匹配的元素　127
8.3.2　滑動(dòng)切換元素的可見(jiàn)性　129
8.3.3　自定義動(dòng)畫(huà)效果　129
8.3.4　停止動(dòng)畫(huà)　131
【案例分析8-3】實(shí)現(xiàn)下拉菜單左右抖動(dòng)后的隱藏和顯示　132
【案例分析8-4】圖片順序切換效果　132
8.4　思考與練習(xí)　134
8.4.1　疑難解讀　134
8.4.2　課后習(xí)題　134
第9章　jQuery的工具函數(shù)
【學(xué)習(xí)目標(biāo)】　136
【導(dǎo)引示例】　136
9.1　工具函數(shù)概述與數(shù)組操作　137
9.1.1　工具函數(shù)概述　137
9.1.2　獲取數(shù)組元素　137
9.1.3　數(shù)組操作　139
【案例分析9-1】將數(shù)組數(shù)據(jù)添加到表格中　140
9.2　字符串操作函數(shù)　141
9.2.1　字符串空格處理　141
9.2.2　JSON字符串格式處理　141
【案例分析9-2】登錄數(shù)據(jù)處理　142
9.3　測(cè)試操作函數(shù)　142
9.3.1　判斷對(duì)象是否為空　142
9.3.2　判斷參數(shù)類(lèi)型　143
【案例分析9-3】判斷參數(shù)的類(lèi)型　143
9.4　函數(shù)擴(kuò)展　144
9.4.1　合并對(duì)象函數(shù)　144
9.4.2　擴(kuò)展屬性和方法函數(shù)　145
【案例分析9-4】擴(kuò)展一個(gè)求和方法　146
9.5　其他工具函數(shù)　146
9.5.1　元素操作函數(shù)　146
9.5.2　獲取時(shí)間函數(shù)　148
9.5.3　判斷對(duì)象類(lèi)型函數(shù)　148
【案例分析9-5】將用戶(hù)輸入的內(nèi)容存儲(chǔ)到元素　149
【案例分析9-6】模擬用戶(hù)注冊(cè)和登錄　150
9.6　思考與練習(xí)　151
9.6.1　疑難解讀　151
9.6.2　課后習(xí)題　152
第　10章 jQuery插件
【學(xué)習(xí)目標(biāo)】　153
【導(dǎo)引示例】　153
10.1　jQuery插件基礎(chǔ)　154
10.1.1　jQuery插件概述　154
10.1.2　jQuery插件的使用方式　154
10.2　常用的jQuery插件　154
10.2.1　Validate插件　154
10.2.2　Cookie插件　157
10.2.3　Growl插件　158
10.2.4　EasyZoom插件　159
【案例分析10-1】帶狀縮略圖放大　160
10.3　jQuery UI插件　162
10.3.1　jQuery UI插件基礎(chǔ)　162
10.3.2　交互　162
10.3.3　小部件　166
10.3.4　效果　170
【案例分析10-2】選項(xiàng)卡　172
【案例分析10-3】菜單　173
10.4　思考與練習(xí)　174
10.4.1　疑難解讀　174
10.4.2　課后習(xí)題　175
第　11章 綜合實(shí)訓(xùn)：開(kāi)發(fā)網(wǎng)絡(luò)相冊(cè)
【學(xué)習(xí)目標(biāo)】　176
11.1　分析頁(yè)面　176
11.1.1　設(shè)計(jì)分析　176
11.1.2　功能分析　176
11.2　模塊拆分　177
11.2.1　相冊(cè)列表　177
11.2.2　標(biāo)準(zhǔn)相片展示框　178
11.2.3　相片縮略圖列表　178
11.3　交互效果設(shè)計(jì)　179
11.3.1　相冊(cè)排序效果　179
11.3.2　相片輪播效果　180
11.3.3　切換縮略圖效果　181
11.3.4　相片切換和局部放大效果　182
11.4　網(wǎng)絡(luò)相冊(cè)效果展示　183
11.5　思考與練習(xí)　186
11.5.1　疑難解讀　186
11.5.2　課后習(xí)題　187
第　12章
綜合實(shí)訓(xùn)：開(kāi)發(fā)汽車(chē)銷(xiāo)售門(mén)戶(hù)網(wǎng)頁(yè)
【學(xué)習(xí)目標(biāo)】　188
12.1　網(wǎng)頁(yè)分析　188
12.1.1　首頁(yè)布局分析　188
12.1.2　詳情頁(yè)面布局分析　188
12.2　網(wǎng)頁(yè)結(jié)構(gòu)設(shè)計(jì)　189
12.2.1　首頁(yè)元素布局　189
12.2.2　首頁(yè)樣式添加　191
12.2.3　詳情頁(yè)面元素布局　193
12.2.4　詳情頁(yè)面樣式添加　194
12.3　首頁(yè)交互效果設(shè)計(jì)　195
12.3.1　下拉菜單自動(dòng)顯示效果　195
12.3.2　汽車(chē)信息列表切換效果　196
12.3.3　點(diǎn)擊按鈕關(guān)閉下拉菜單效果　196
12.3.4　廣告圖片自動(dòng)輪播效果　196
12.3.5　點(diǎn)擊列表切換廣告圖片效果　197
12.3.6　圖片放大和文字顯示效果　197
12.3.7　按鈕交互效果　198
12.4　詳情頁(yè)面交互效果設(shè)計(jì)　199
12.4.1　滾動(dòng)頁(yè)面切換導(dǎo)航欄效果　199
12.4.2　點(diǎn)擊元素滾動(dòng)頁(yè)面效果　199
12.4.3　滾動(dòng)頁(yè)面顯示相應(yīng)元素效果　200
12.4.4　表格交互效果　200
12.5　汽車(chē)銷(xiāo)售網(wǎng)頁(yè)效果展示　201
12.6　思考與練習(xí)　203
12.6.1　疑難解讀　203
12.6.2　課后習(xí)題　204