JavaScript+jQuery網頁特效設計任務驅動教程（第2版）

陈承欢，三级教授，高级工程师，软件设计师，湖南省省级专业带头人，湖南省青年骨干教师，武汉大学软件工程专业，湖南铁道职业技术学院教务处处长。2008年，曾赴澳大利亚坎培门理工学院培训交流，2015年，曾赴加拿大圣力嘉学院培训交流，2019年，曾赴英国、德国学习交流。主持开发职业教育特色教材50多本，其中国家级“十一五”规划教材4本，国家级“十二五”规划教材10本，国家级“十三五”规划教材7本。国家精品课程与国家精品共享课程配套教材1本，国家职业教育资源库配套教材3本。主持《网页设计与制作》国家精品课程，主持《网页设计与制作》国家精品共享课程，主持《计算机维护与维修》、《实用工具软件应用》、《网页样式设计》3门国家资源库课程。国家级教学成果奖二等奖1项，湖南省职业教育教学成果奖特等奖1项、三等奖1项，湖南省教育教学改革发展优秀成果奖参等奖1项。

單元1 設計基本網頁特效 1

　【教學導航】　1

　【特效賞析】　2

　任務1-1 JavaScript實現動態加載網頁內容　2

　任務1-2 jQuery實現網頁收藏　3

　【知識必備】　3

　1.1 JavaScript簡介　4

　1.2 JavaScript主要的語法規則　5

　1.3 JavaScript常用的開發工具　6

　1.4 在HTML文檔中嵌入JavaScript代碼的方法　6

　1.5 JavaScript的註釋　7

　1.6 JavaScript的數據類型　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實現動態改變樣式文件　16

　任務1-4 JavaScript實現動態改變網頁字體大小及關閉網頁窗口　18

　任務1-5 JavaScript實現播放Flash動畫　19

　任務1-6 jQuery實現動態設置頁面的寬度和高度　20

　【自主訓練】　21

　任務1-7 利用外部JS文件動態輸出網頁內容　21

　任務1-8 巧用CSS實現下拉菜單　22

 

單元2　設計日期時間類網頁特效　26

　【教學導航】　26

　【特效賞析】　27

　任務2-1 顯示常規格式的當前日期與時間　27

　任務2-2 採用多種方式顯示當前的日期　27

　【知識必備】　29

　2.1 JavaScript的運算符與表達式　29

　2.2 JavaScript的語句及其規則　32

　2.3 JavaScript的條件語句　33

　2.4 JavaScript的函數　37

　2.5 JavaScript的String（字符串）對象　40

　2.6 JavaScript的Math（數學）對象　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 不同的節日顯示對應的問候語　53

　任務2-4 在特定日期的特定時段顯示打折促銷信息　54

　任務2-5 不同時間段顯示不同的問候語　55

　任務2-6 一周內每天輸出不同的圖片　56

　任務2-7 實現在線考試倒計時　57

　任務2-8 顯示限定格式的日期　58

　【自主訓練】　59

　任務2-9 驗證日期的有效性　59

　任務2-10 實現限時搶購倒計時　61

 

單元3　設計文字類網頁特效　63

　【教學導航】　63

　【特效賞析】　63

　任務3-1 JavaScript實現滾動網頁標題欄中的文字　63

　任務3-2 jQuery實現向上滾動網站促銷公告　65

　【知識必備】　66

　3.1 JavaScript的循環語句　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實現網頁狀態欄中的文字呈現打字效果　91

　任務3-4 JavaScript實現網頁文字滾動與等待的交替效果　91

　任務3-5 JavaScript實現鼠標指針滑過 動態改變顯示內容及外觀效果　93

　任務3-6 JavaScript實現文本圍繞鼠標 指針旋轉　95

　任務3-7 jQuery實現網站動態信息滾動與等待的交替效果　96

　【自主訓練】　98

　任務3-8 JavaScript實現網站公告信息連續向上滾動　98

　任務3-9 jQuery實現循環滾動網頁中的文字　99

 

單元4　設計圖片類網頁特效　101

　【教學導航】　101

　【特效賞析】　101

　任務4-1 JavaScript實現縱向焦點圖片輪換　101

　任務4-2 jQuery實現帶左右按鈕控制焦點圖片切換　106

　【知識必備】　108

　4.1 JavaScript的對象　108

　4.2 jQuery文檔的操作方法　111

　【引導訓練】　113

　任務4-3 JavaScript實現控制網頁中的圖片尺寸　113

　任務4-4 JavaScript實現限制圖片尺寸與滑動鼠標滾輪調整圖片尺寸　114

　任務4-5 JavaScript實現網頁中圖片連續向上滾動　115

　任務4-6 JavaScript實現具有濾鏡效果的橫向焦點圖片輪換　117

　任務4-7 JavaScript實現具有手風琴效果的橫向焦點圖片輪換　121

　任務4-8 JavaScript實現帶縮略圖且雙向移動的橫向焦點圖輪換　123

　任務4-9 jQuery實現圖片縱向移動的焦點圖片輪換　126

　任務4-10 jQuery實現具有濾鏡效果的橫向焦點圖片輪換　128

　任務4-11 jQuery實現鼠標指針滑過圖片時預覽大圖　131

　任務4-12 jQuery實現單擊箭頭按鈕切換圖片　133

　【自主訓練】　135

　任務4-13 JavaScript實現圖片連續向左滾動　135

　任務4-14 JavaScript實現通用橫向焦點圖片輪換　137

　任務4-15 JavaScript實現網頁圖片拖曳　139

　任務4-16 jQuery實現圖片縱向切換　141

　任務4-17 jQuery實現自動與手動均可切換的焦點圖片輪換　142

　任務4-18 jQuery實現單擊左右箭頭滾動圖片　145

 

單元5　設計表單控件類網頁特效　148

　【教學導航】　148

　【特效賞析】　148

　任務5-1 實現註冊表單中的網頁特效　148

　任務5-2 實現反饋意見表單中的網頁特效　148

　【知識必備】　156

　5.1 JavaScript的事件　156

　5.2 JavaScript的事件方法　160

　5.3 jQuery的事件方法　160

　【引導訓練】　162

　任務5-3 JavaScript實現郵箱自動導航　162

　任務5-4 JavaScript實現獲取表單控件的設置值　164

　任務5-5 jQuery實現自定義列表框與單擊清空輸入框內容　168

　【自主訓練】　170

　任務5-6 JavaScript實現輸出列表框中被選項的文本內容　170

　任務5-7 JavaScript實現利用列表框切換網頁　171

　任務5-8 jQuery實現動態改變購買數量　172

 

單元6　設計導航菜單類網頁特效　174

　【教學導航】　174

　【特效賞析】　174

　任務6-1 應用className和display等屬性實現橫向下拉菜單　174

　任務6-2 應用jQuery的hover事件和addClass()等方法實現橫向導航菜單　177

　任務6-3 應用jQuery的bind()和attr()等方法實現縱向導航菜單　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　設計選項卡類網頁特效　199

　【教學導航】　199

　【特效賞析】　199

　任務7-1 應用setInterval函數和display屬性實現選項卡的手動切換和自動切換　199

　任務7-2 應用jQuery的index()和find()等方法實現橫向選項卡　202

　【知識必備】　203

　7.1 JavaScript的數組對象　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　設計內容展開與折疊類網頁特效　220

　【教學導航】　220

　【特效賞析】　220

　任務8-1 應用jQuery的each()和hasClass()等方法設計網頁內容折疊與展開特效　220

　任務8-2 應用jQuery的toggle()和css()等方法實現網頁內容多層折疊與展開特效　223

　【知識必備】　225

　8.1 BOM（瀏覽器對象模型）　225

　8.2 jQuery的尺寸方法　229

　【引導訓練】　230

　任務8-3 應用DOM的onclick事件和parentNode屬性設計網頁內容折疊與展開特效　230

　任務8-4 應用JavaScript的getElements ByTagName()方法和className屬性設計網頁內容折疊與展開特效　232

　任務8-5 應用jQuery的bind()和css()等方法設計網頁內容折疊與展開特效　234

　任務8-6 應用jQuery的next()和toggleClass()等方法設計網頁內容折疊與展開特效　237

　【自主訓練】　238

　任務8-7 應用DOM的getElementById()方法和className屬性設計網頁內容折疊與展開特效　238

　任務8-8 應用jQuery的hover和click事件設計網頁內容折疊與展開特效　240

　任務8-9 應用jQuery的data()和animate()等方法設計網頁內容折疊與展開特效　242

 

單元9　設計頁面類網頁特效　245

　【教學導航】　245

　【特效賞析】　245

　任務9-1 實現頁面換膚網頁特效　245

　任務9-2 根據日期特徵動態切換背景　251

　【知識必備】　255

　9.1 正確使用Cookie　255

　9.2 正確區分jQuery對象和DOM對象　257

　【引導訓練】　257

　任務9-3 根據屏幕寬度自動設置網頁背景和導航欄　257

　任務9-4 頁面快捷導航菜單的顯示與隱藏　259

　任務9-5 下拉窗口的打開與自動隱藏　261

　任務9-6 滾動屏幕時隱藏或顯示“返回頂部”導航欄　264

　【自主訓練】　265

　任務9-7 選購商品時打開購物車頁面　265

　任務9-8 動態切換頁面背景與調整頁面大小　266

　任務9-9 浮動框架的高度自適應頁面內容的高度　268

　任務9-10 隨著屏幕高度變化隱藏或顯示“返回頂部”導航欄　269

 

　附錄A jQuery的常用方法　270

　A.1 jQuery的核心函數　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的數據操作方法　277

　A.12 jQuery的AJAX操作方法　277

 

　參考文獻　278