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

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