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