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

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