jQuery網(wǎng)頁(yè)特效任務(wù)驅(qū)動(dòng)式教程（微課版）

項(xiàng)目1 實(shí)現(xiàn)表單輸入框外圍的動(dòng)態(tài)陰影效果 1
【任務(wù)描述】 1
【任務(wù)實(shí)現(xiàn)】 2
【相關(guān)知識(shí)】 4
一、JavaScript簡(jiǎn)介及DOM 4
（一）ECMAScript 5
（二）DOM 6
（三）BOM 9
二、jQuery概述 9
（一）下載和安裝jQuery 9
（二）使用jQuery 10
（三）jQuery對(duì)象與DOM對(duì)象的相互
轉(zhuǎn)換 17
三、jQuery中的選擇器 18
（一）基本選擇器 18
（二）層級(jí)選擇器 22
（三）過(guò)濾器eq()和偽類選擇器：eq() 23
四、jQuery中的元素查找操作 23
（一）向下查找后代元素 24
（二）向上查找祖先元素 24
（三）查找兄弟元素 25
（四）查找方法應(yīng)用舉例 26
五、jQuery中操作DOM元素的
基本方法 27
（一）jQuery中操作屬性的attr()方法 27
（二）jQuery中的each()方法 28
（三）關(guān)于元素的索引的問(wèn)題 32
（四）為元素添加和移除類 33
六、jQuery中的事件機(jī)制 33
（一）注冊(cè)事件 33
（二）注銷事件—— off()方法 36
小結(jié) 37
習(xí)題 37
項(xiàng)目2 制作頁(yè)面中的漂浮廣告 40
任務(wù)2．1 實(shí)現(xiàn)不加任何控制的漂浮廣告 40
【任務(wù)描述】 40
【任務(wù)實(shí)現(xiàn)】 41
一、漂浮廣告的定位及移動(dòng)方向控制 41
二、使用固定定位方式實(shí)現(xiàn)漂浮廣告 42
三、使用絕對(duì)定位實(shí)現(xiàn)漂浮廣告 49
任務(wù)2．2 實(shí)現(xiàn)漂浮廣告中的控制功能 50
【任務(wù)描述】 50
【任務(wù)實(shí)現(xiàn)】 51
【相關(guān)知識(shí)】 53
一、獲取窗口及頁(yè)面的寬度和高度 53
（一）使用JavaScript獲取窗口及頁(yè)面的寬度和高度 53
（二）使用jQuery獲取窗口及頁(yè)面的寬度和高度 60
二、獲取滾動(dòng)條卷入部分的頁(yè)面寬度和高度 64
（一）在JavaScript中獲取 64
（二）在jQuery中獲取 66
三、獲取元素的寬度和高度 66
（一）使用JavaScript獲取元素的寬度和高度 66
（二）使用jQuery獲取元素的寬度和高度 69
四、獲取和設(shè)置頁(yè)面元素的位置 72
（一）在JavaScript中獲取和設(shè)置頁(yè)面元素的位置 72
（二）在jQuery中獲取和設(shè)置元素的位置 76
五、jQuery中的css()方法 78
（一）使用css()方法返回元素的樣式屬性取值 78
（二）使用css()方法設(shè)置元素的樣式屬性取值 80
小結(jié) 80
習(xí)題 80
項(xiàng)目3 在jQuery中實(shí)現(xiàn)表單數(shù)據(jù)驗(yàn)證 83
任務(wù)3．1 實(shí)現(xiàn)表單數(shù)據(jù)驗(yàn)證功能 83
【任務(wù)描述】 84
【任務(wù)實(shí)現(xiàn)】 85
【相關(guān)知識(shí)】 90
一、表單過(guò)濾器 90
二、在jQuery中獲取或設(shè)置表單元素的值 91
三、使用jQuery實(shí)現(xiàn)郵箱自動(dòng)導(dǎo)航 92
任務(wù)3．2 判斷密碼強(qiáng)度 93
【任務(wù)描述】 93
【任務(wù)實(shí)現(xiàn)】 94
任務(wù)3．3 使用JavaScript正則表達(dá)式完成數(shù)據(jù)的即時(shí)驗(yàn)證 97
【任務(wù)描述】 97
【任務(wù)實(shí)現(xiàn)】 97
小結(jié) 98
習(xí)題 98
項(xiàng)目4 使用閉包實(shí)現(xiàn)級(jí)聯(lián)菜單功能 100
任務(wù)4．1 實(shí)現(xiàn)年月日級(jí)聯(lián)菜單 101
【任務(wù)描述】 101
【任務(wù)實(shí)現(xiàn)】 101
【相關(guān)知識(shí)】 107
一、使用JavaScript和jQuery操作select和option 107
二、改變DOM樹形結(jié)構(gòu)的常用方法 108
任務(wù)4．2 實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)菜單 109
【任務(wù)描述】 109
【任務(wù)實(shí)現(xiàn)】 111
一、頁(yè)面元素的結(jié)構(gòu)及樣式要求 112
二、JSON數(shù)據(jù)的定義和訪問(wèn) 114
三、使用閉包實(shí)現(xiàn)省市區(qū)級(jí)聯(lián)菜單 118
【相關(guān)知識(shí)】trigger()方法 125
小結(jié) 127
習(xí)題 127
項(xiàng)目5 實(shí)現(xiàn)jQuery動(dòng)畫 129
任務(wù)5．1 使用css()制作動(dòng)畫——實(shí)現(xiàn)文本動(dòng)畫效果 129
【任務(wù)描述】 129
【任務(wù)實(shí)現(xiàn)】 130
【相關(guān)知識(shí)】hover()方法 131
任務(wù)5．2 顯示與隱藏動(dòng)畫制作——實(shí)現(xiàn)樹形列表動(dòng)畫 132
【任務(wù)描述】 132
【任務(wù)實(shí)現(xiàn)】 133
【相關(guān)知識(shí)】 135
一、顯示和隱藏的動(dòng)畫方法 135
二、顯示與隱藏動(dòng)畫的基本應(yīng)用案例 136
任務(wù)5．3 淡入淡出動(dòng)畫 139
【任務(wù)描述】 139
【任務(wù)實(shí)現(xiàn)】 140
【相關(guān)知識(shí)】淡入淡出的動(dòng)畫方法 141
任務(wù)5．4 使用上卷下拉實(shí)現(xiàn)折疊框動(dòng)畫 142
【任務(wù)描述】 142
【任務(wù)實(shí)現(xiàn)】 142
【相關(guān)知識(shí)】上卷下拉動(dòng)畫方法 144
任務(wù)5．5 使用上卷下拉實(shí)現(xiàn)百葉窗動(dòng)畫 144
【任務(wù)描述】 144
【任務(wù)實(shí)現(xiàn)】 144
任務(wù)5．6 階梯式上卷下拉動(dòng)畫 145
【任務(wù)描述】 145
【任務(wù)實(shí)現(xiàn)】 146
【相關(guān)知識(shí)】jQuery中的隊(duì)列控制方法 149
任務(wù)5．7 animate()——實(shí)現(xiàn)返回頁(yè)面頂部的滾動(dòng)動(dòng)畫 150
【任務(wù)描述】 150
【任務(wù)實(shí)現(xiàn)】 150
【相關(guān)知識(shí)】 152
一、animate()方法 152
二、停止動(dòng)畫——stop()方法 153
三、關(guān)閉和延遲動(dòng)畫 154
小結(jié) 155
習(xí)題 155
項(xiàng)目6 圖像輪播 157
任務(wù)6．1 索引切換輪播 157
【任務(wù)描述】 157
【任務(wù)實(shí)現(xiàn)】 158
一、實(shí)現(xiàn)簡(jiǎn)單的索引切換輪播功能 158
二、擴(kuò)展索引切換輪播功能 159
任務(wù)6．2 使用animate()實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播 164
【任務(wù)描述】 164
【任務(wù)實(shí)現(xiàn)】 165
一、實(shí)現(xiàn)簡(jiǎn)單的無(wú)縫滾動(dòng)輪播功能 165
二、擴(kuò)展無(wú)縫滾動(dòng)輪播功能 171
任務(wù)6．3 使用CSS3動(dòng)畫實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播 177
【任務(wù)描述】 177
【任務(wù)實(shí)現(xiàn)】 178
任務(wù)6．4 旋轉(zhuǎn)滾動(dòng)輪播 182
【任務(wù)描述】 182
【任務(wù)實(shí)現(xiàn)】 183
小結(jié) 188
習(xí)題 188
項(xiàng)目7 圖像處理特效 190
任務(wù)7．1 購(gòu)物網(wǎng)站中的放大鏡 190
【任務(wù)描述】 190
【任務(wù)實(shí)現(xiàn)】 191
任務(wù)7．2 瀑布流布局 198
【任務(wù)描述】 198
【任務(wù)實(shí)現(xiàn)】 199
任務(wù)7．3 添加文件類型圖標(biāo) 202
【任務(wù)描述】 202
【任務(wù)實(shí)現(xiàn)】 203
【相關(guān)知識(shí)】JavaScript讀取外部文件 207
任務(wù)7．4 超鏈接背景圖的切換 209
【任務(wù)描述】 210
【任務(wù)實(shí)現(xiàn)】 210
任務(wù)7．5 使用圖片精靈實(shí)現(xiàn)星級(jí)評(píng)價(jià) 212
【任務(wù)描述】 212
【任務(wù)實(shí)現(xiàn)】 212
小結(jié) 213
習(xí)題 214
項(xiàng)目8 使用jQuery實(shí)現(xiàn)表格操作特效 215
任務(wù)8．1 應(yīng)用模態(tài)框添加和修改表格數(shù)據(jù) 215
【任務(wù)描述】 215
【任務(wù)實(shí)現(xiàn)】 218
【相關(guān)知識(shí)】關(guān)于模態(tài)框 223
任務(wù)8．2 應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評(píng)分功能 224
【任務(wù)描述】 224
【任務(wù)實(shí)現(xiàn)】 226
任務(wù)8．3 讀取Excel數(shù)據(jù)表并進(jìn)行排序操作 237
【任務(wù)描述】 237
【任務(wù)實(shí)現(xiàn)】 238
【相關(guān)知識(shí)】應(yīng)用FileReader讀取Excel文件 245
小結(jié) 246
習(xí)題 247
項(xiàng)目9 數(shù)組應(yīng)用特效 249
任務(wù)9．1 實(shí)現(xiàn)隨機(jī)點(diǎn)名功能 249
【任務(wù)描述】 249
【任務(wù)實(shí)現(xiàn)】 250
任務(wù)9．2 實(shí)現(xiàn)隨機(jī)選圖并放大功能 252
【任務(wù)描述】 252
【任務(wù)實(shí)現(xiàn)】 253
任務(wù)9．3 制作百度新聞頁(yè)面的滑塊 255
【任務(wù)描述】 255
【任務(wù)實(shí)現(xiàn)】 255
任務(wù)9．4 單擊時(shí)的文字動(dòng)畫 259
【任務(wù)描述】 259
【任務(wù)實(shí)現(xiàn)】 259
小結(jié) 261
習(xí)題 261
項(xiàng)目10 綜合應(yīng)用——購(gòu)物車中的商品管理功能 262
【任務(wù)描述】 262
【任務(wù)實(shí)現(xiàn)】 263
一、元素設(shè)計(jì)及樣式定義 263
二、購(gòu)物車商品管理腳本功能實(shí)現(xiàn) 266
小結(jié) 272