單元1 設計基本網(wǎng)頁特效 1 【教學導航】 1 【特效賞析】　2 任務1-1　JavaScript實現(xiàn)動態(tài)加載網(wǎng)頁內容 2 任務1-2　jQuery實現(xiàn)網(wǎng)頁收藏 3 【知識必備】 3 1.1　JavaScript簡介 4 1.2　JavaScript主要的語法規(guī)則 5 1.3　JavaScript常用的開發(fā)工具 6 1.4　在HTML文檔中嵌入JavaScript代碼的方法 6 1.5　JavaScript的注釋 7 1.6　JavaScript的數(shù)據(jù)類型 7 1.7　JavaScript的常量 8 1.8　JavaScript的變量 9 1.9　JavaScript的消息框 11 1.10　JavaScript的異常處理 12 1.11　JavaScript庫 13 1.12　下載和替代jQuery庫 14 1.13　jQuery簡介 15 【引導訓練】 16 任務1-3　JavaScript實現(xiàn)動態(tài)改變樣式文件 16 任務1-4　JavaScript實現(xiàn)動態(tài)改變網(wǎng)頁字體大小及關閉網(wǎng)頁窗口 18 任務1-5　JavaScript實現(xiàn)播放Flash動畫 19 任務1-6　jQuery實現(xiàn)動態(tài)設置頁面的寬度和高度 20 【自主訓練】 21 任務1-7　利用外部JS文件動態(tài)輸出網(wǎng)頁內容 21 任務1-8　巧用CSS實現(xiàn)下拉菜單 22 單元2　設計日期時間類網(wǎng)頁特效 26 【教學導航】 26 【特效賞析】 27 任務2-1　顯示常規(guī)格式的當前日期與時間 27 任務2-2　采用多種方式顯示當前的日期 27 【知識必備】 29 2.1　JavaScript的運算符與表達式 29 2.2　JavaScript的語句及其規(guī)則 32 2.3　JavaScript的條件語句 33 2.4　JavaScript的函數(shù) 37 2.5　JavaScript的String（字符串）對象 40 2.6　JavaScript的Math（數(shù)學）對象 41 2.7　JavaScript的Date（日期）對象 41 2.8　JavaScript的計時方法 43 2.9　JavaScript的RegExp對象及其方法 44 2.10　支持正則表達式的String對象的方法 49 2.11　JavaScript和jQuery的使用比較 52 【引導訓練】 53 任務2-3　不同的節(jié)日顯示對應的問候語 53 任務2-4　在特定日期的特定時段顯示打折促銷信息 54 任務2-5　不同時間段顯示不同的問候語 55 任務2-6　一周內每天輸出不同的圖片 56 任務2-7　實現(xiàn)在線考試倒計時 57 任務2-8　顯示限定格式的日期 58 【自主訓練】 59 任務2-9　驗證日期的有效性 59 任務2-10　實現(xiàn)限時搶購倒計時 61 單元3　設計文字類網(wǎng)頁特效 63 【教學導航】 63 【特效賞析】 63 任務3-1　JavaScript實現(xiàn)滾動網(wǎng)頁標題欄中的文字 63 任務3-2　jQuery實現(xiàn)向上滾動網(wǎng)站促銷公告 65 【知識必備】 66 3.1　JavaScript的循環(huán)語句 66 3.2　HTML DOM 71 3.3　JavaScript的位置與尺寸方法 75 3.4　jQuery的選擇器 82 3.5　jQuery的鏈式操作 82 3.6　jQuery的效果方法 83 【引導訓練】 91 任務3-3　JavaScript實現(xiàn)網(wǎng)頁狀態(tài)欄中的文字呈現(xiàn)打字效果 91 任務3-4　JavaScript實現(xiàn)網(wǎng)頁文字滾動與等待的交替效果 91 任務3-5　JavaScript實現(xiàn)鼠標指針滑過 動態(tài)改變顯示內容及外觀效果 93 任務3-6　JavaScript實現(xiàn)文本圍繞鼠標 指針旋轉 95 任務3-7　jQuery實現(xiàn)網(wǎng)站動態(tài)信息滾動與等待的交替效果 96 【自主訓練】 98 任務3-8　JavaScript實現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動 98 任務3-9　jQuery實現(xiàn)循環(huán)滾動網(wǎng)頁中的文字 99 單元4　設計圖片類網(wǎng)頁特效 101 【教學導航】 101 【特效賞析】 101 任務4-1　JavaScript實現(xiàn)縱向焦點圖片輪換 101 任務4-2　jQuery實現(xiàn)帶左右按鈕控制焦點圖片切換 106 【知識必備】 108 4.1　JavaScript的對象 108 4.2　jQuery文檔的操作方法 111 【引導訓練】 113 任務4-3　JavaScript實現(xiàn)控制網(wǎng)頁中的圖片尺寸 113 任務4-4　JavaScript實現(xiàn)限制圖片尺寸與滑動鼠標滾輪調整圖片尺寸 114 任務4-5　JavaScript實現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動 115 任務4-6　JavaScript實現(xiàn)具有濾鏡效果的橫向焦點圖片輪換 117 任務4-7　JavaScript實現(xiàn)具有手風琴效果的橫向焦點圖片輪換 121 任務4-8　JavaScript實現(xiàn)帶縮略圖且雙向移動的橫向焦點圖輪換 123 任務4-9　jQuery實現(xiàn)圖片縱向移動的焦點圖片輪換 126 任務4-10　jQuery實現(xiàn)具有濾鏡效果的橫向焦點圖片輪換 128 任務4-11　jQuery實現(xiàn)鼠標指針滑過圖片時預覽大圖 131 任務4-12　jQuery實現(xiàn)單擊箭頭按鈕切換圖片 133 【自主訓練】 135 任務4-13　JavaScript實現(xiàn)圖片連續(xù)向左滾動 135 任務4-14　JavaScript實現(xiàn)通用橫向焦點圖片輪換 137 任務4-15　JavaScript實現(xiàn)網(wǎng)頁圖片拖曳 139 任務4-16　jQuery實現(xiàn)圖片縱向切換 141 任務4-17　jQuery實現(xiàn)自動與手動均可切換的焦點圖片輪換 142 任務4-18　jQuery實現(xiàn)單擊左右箭頭滾動圖片 145 單元5　設計表單控件類網(wǎng)頁特效 148 【教學導航】 148 【特效賞析】 148 任務5-1　實現(xiàn)注冊表單中的網(wǎng)頁特效 148 任務5-2　實現(xiàn)反饋意見表單中的網(wǎng)頁特效 148 【知識必備】 156 5.1　JavaScript的事件 156 5.2　JavaScript的事件方法 160 5.3　jQuery的事件方法 160 【引導訓練】 162 任務5-3　JavaScript實現(xiàn)郵箱自動導航 162 任務5-4　JavaScript實現(xiàn)獲取表單控件的設置值 164 任務5-5　jQuery實現(xiàn)自定義列表框與單擊清空輸入框內容 168 【自主訓練】 170 任務5-6　JavaScript實現(xiàn)輸出列表框中被選項的文本內容 170 任務5-7　JavaScript實現(xiàn)利用列表框切換網(wǎng)頁 171 任務5-8　jQuery實現(xiàn)動態(tài)改變購買數(shù)量 172 單元6　設計導航菜單類網(wǎng)頁特效 174 【教學導航】 174 【特效賞析】 174 任務6-1　應用className和display等屬性實現(xiàn)橫向下拉菜單 174 任務6-2　應用jQuery的hover事件和addClass()等方法實現(xiàn)橫向導航菜單 177 任務6-3　應用jQuery的bind()和attr()等方法實現(xiàn)縱向導航菜單 179 【知識必備】 182 6.1　JavaScript的this指針 182 6.2　jQuery的屬性操作方法 182 6.3　jQuery的CSS操作方法 183 【引導訓練】 184 任務6-4　應用JavaScript的onmouseover等事件和className屬性設計橫向導航菜單 184 任務6-5　應用jQuery的hover事件和css()方法設計橫向導航菜單 185 任務6-6　應用jQuery的find()和animate()等方法設計橫向導航菜單 187 任務6-7　應用jQuery的one()和each()等方法設計復雜導航菜單 190 【自主訓練】 194 任務6-8　應用HTML元素的樣式屬性設計橫向下拉菜單 194 任務6-9　應用jQuery的show()和hide()等方法設計縱向導航菜單 195 任務6-10　應用jQuery的slideDown()和slideUp()等方法設計有滑動效果的橫向下拉菜單 196 任務6-11　應用jQuery的slideDown()和fadeOut()等方法設計下拉菜單 197 單元7　設計選項卡類網(wǎng)頁特效 199 【教學導航】 199 【特效賞析】 199 任務7-1　應用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換　 199 任務7-2　應用jQuery的index()和find()等方法實現(xiàn)橫向選項卡 202 【知識必備】 203 7.1　JavaScript的數(shù)組對象 203 7.2　JSON及其使用 204 【引導訓練】 206 任務7-3　應用DOM的className和style等屬性設計縱向選項卡 206 任務7-4　應用DOM的className和style等屬性設計橫向選項卡 208 任務7-5　應用仿jQuery的attr()方法設計橫向選項卡 211 任務7-6　應用JavaScript的push()和jQuery的animate()等方法設計橫向選項卡與圖文滾動特效 214 【自主訓練】 217 任務7-7　應用DOM的getElementById和className等屬性設計橫向選項卡 217 任務7-8　應用jQuery的mouseover()和show()等方法設計橫向選項卡 218 單元8　設計內容展開與折疊類網(wǎng)頁特效 220 【教學導航】 220 【特效賞析】 220 任務8-1　應用jQuery的each()和hasClass()等方法設計網(wǎng)頁內容折疊與展開特效　 220 任務8-2　應用jQuery的toggle()和css()等方法實現(xiàn)網(wǎng)頁內容多層折疊與展開特效 223 【知識必備】 225 8.1　BOM（瀏覽器對象模型） 225 8.2　jQuery的尺寸方法 229 【引導訓練】 230 任務8-3　應用DOM的onclick事件和parentNode屬性設計網(wǎng)頁內容折疊與展開特效 230 任務8-4　應用JavaScript的getElements ByTagName()方法和className屬性設計網(wǎng)頁內容折疊與展開特效 232 任務8-5　應用jQuery的bind()和css()等方法設計網(wǎng)頁內容折疊與展開特效 234 任務8-6　應用jQuery的next()和toggleClass()等方法設計網(wǎng)頁內容折疊與展開特效 237 【自主訓練】 238 任務8-7　應用DOM的getElementById()方法和className屬性設計網(wǎng)頁內容折疊與展開特效 238 任務8-8　應用jQuery的hover和click事件設計網(wǎng)頁內容折疊與展開特效 240 任務8-9　應用jQuery的data()和animate()等方法設計網(wǎng)頁內容折疊與展開特效　 242 單元9　設計頁面類網(wǎng)頁特效 245 【教學導航】 245 【特效賞析】 245 任務9-1　實現(xiàn)頁面換膚網(wǎng)頁特效 245 任務9-2　根據(jù)日期特征動態(tài)切換背景 251 【知識必備】 255 9.1　正確使用Cookie 255 9.2　正確區(qū)分jQuery對象和DOM對象 257 【引導訓練】 257 任務9-3　根據(jù)屏幕寬度自動設置網(wǎng)頁背景和導航欄 257 任務9-4　頁面快捷導航菜單的顯示與隱藏 259 任務9-5　下拉窗口的打開與自動隱藏 261 任務9-6　滾動屏幕時隱藏或顯示“返回頂部”導航欄 264 【自主訓練】 265 任務9-7　選購商品時打開購物車頁面 265 任務9-8　動態(tài)切換頁面背景與調整頁面大小 266 任務9-9　浮動框架的高度自適應頁面內容的高度 268 任務9-10　隨著屏幕高度變化隱藏或顯示“返回頂部”導航欄 269 附錄A　jQuery的常用方法　270 A.1　jQuery的核心函數(shù)　270 A.2　jQuery的選擇器　270 A.3　jQuery的遍歷方法　271 A.4　jQuery的事件方法　272 A.5　jQuery的效果方法　274 A.6　jQuery的文檔操作方法　274 A.7　jQuery的DOM元素方法　275 A.8　jQuery的屬性操作方法　275 A.9　jQuery的CSS操作方法　276 A.10　jQuery的尺寸方法　276 A.11　jQuery的數(shù)據(jù)操作方法　277 A.12　jQuery的AJAX操作方法　277 參考文獻 278