JavaScript+jQuery網(wǎng)頁(yè)特效設(shè)計(jì)任務(wù)驅(qū)動(dòng)教程
定 價(jià):55 元
- 作者:陳承歡
- 出版時(shí)間:2019/6/1
- ISBN:9787115500991
- 出 版 社:人民郵電出版社
- 中圖法分類:TP312.8
- 頁(yè)碼:268
- 紙張:
- 版次:02
- 開(kāi)本:16開(kāi)
本書(shū)是網(wǎng)頁(yè)特效設(shè)計(jì)任務(wù)驅(qū)動(dòng)式教材。本書(shū)將網(wǎng)頁(yè)特效分為9類,分別是基本網(wǎng)頁(yè)特效、日期時(shí)間類網(wǎng)頁(yè)特效、文字類網(wǎng)頁(yè)特效、圖片類網(wǎng)頁(yè)特效、表單控件類網(wǎng)頁(yè)特效、導(dǎo)航菜單類網(wǎng)頁(yè)特效、選項(xiàng)卡類網(wǎng)頁(yè)特效、內(nèi)容展開(kāi)與折疊類網(wǎng)頁(yè)特效、頁(yè)面類網(wǎng)頁(yè)特效,同時(shí)相應(yīng)地將全書(shū)分為9個(gè)教學(xué)單元,每個(gè)教學(xué)單元分析和設(shè)計(jì)一種類型的網(wǎng)頁(yè)特效,同時(shí)將JavaScript和jQuery的相關(guān)知識(shí)合理地安排到各個(gè)教學(xué)單元中。
精選9大類92個(gè)源自真實(shí)網(wǎng)站的網(wǎng)頁(yè)特效設(shè)計(jì)任務(wù)
任務(wù)驅(qū)動(dòng)、精講多練、理論實(shí)踐一體化
教學(xué)導(dǎo)航→特效賞析→知識(shí)必備→引導(dǎo)訓(xùn)練→自主訓(xùn)練
教學(xué)單元設(shè)計(jì)+教學(xué)過(guò)程設(shè)計(jì)+網(wǎng)頁(yè)特效設(shè)計(jì)+任務(wù)設(shè)計(jì)+相關(guān)知識(shí)的選取與序化+教學(xué)案例+電子教案
陳承歡 三級(jí)教授 高級(jí)工程師 軟件設(shè)計(jì)師 湖南省省級(jí)專業(yè)帶頭人,國(guó)家精品課程與精品共享課程《網(wǎng)頁(yè)設(shè)計(jì)與制作》主持人,國(guó)家資源庫(kù)課程《計(jì)算機(jī)維護(hù)與維修》和《網(wǎng)頁(yè)樣式設(shè)計(jì)與應(yīng)用》主持人,湖南省教育科學(xué)重點(diǎn)研究課題主持人,湖南省教學(xué)改革項(xiàng)目主持人。
多年來(lái)致力于總結(jié)教學(xué)規(guī)律、探索教學(xué)模式、創(chuàng)新教學(xué)方法、開(kāi)發(fā)特色教材。主持開(kāi)發(fā)高職特色教材20多本,其中“十一五”國(guó)家級(jí)規(guī)劃教材4本,“十二五”國(guó)家級(jí)規(guī)劃教材11本。成功地實(shí)現(xiàn)了以真實(shí)項(xiàng)目或任務(wù)為載體重構(gòu)教學(xué)內(nèi)容、面向教學(xué)全過(guò)程設(shè)置教學(xué)環(huán)節(jié)、“教、學(xué)、做、評(píng)”一體設(shè)計(jì),在教學(xué)實(shí)施中取得了良好的教學(xué)效果。
單元1 設(shè)計(jì)基本網(wǎng)頁(yè)特效 1
任務(wù)1-1 JavaScript實(shí)現(xiàn)動(dòng)態(tài)加載網(wǎng)頁(yè)內(nèi)容 1
任務(wù)1-2 jQuery實(shí)現(xiàn)網(wǎng)頁(yè)收藏 2
1.1 JavaScript簡(jiǎn)介 4
1.2 JavaScript主要的語(yǔ)法規(guī)則 4
1.3 JavaScript常用的開(kāi)發(fā)工具 5
1.4 在HTML文檔中嵌入JavaScript代碼的方法 5
1.5 JavaScript的注釋 6
1.6 JavaScript的數(shù)據(jù)類型 6
1.7 JavaScript的常量 8
1.8 JavaScript的變量 8
1.9 JavaScript的消息框 10
1.10 JavaScript的異常處理 11
1.11 JavaScript庫(kù) 12
1.12 下載和替代jQuery庫(kù) 13
1.13 jQuery簡(jiǎn)介 13
任務(wù)1-3 JavaScript實(shí)現(xiàn)動(dòng)態(tài)改變樣式文件 15
任務(wù)1-4 JavaScript實(shí)現(xiàn)動(dòng)態(tài)改變網(wǎng)頁(yè)字體大小及關(guān)閉網(wǎng)頁(yè)窗口 16
任務(wù)1-5 JavaScript實(shí)現(xiàn)播放Flash動(dòng)畫(huà) 17
任務(wù)1-6 jQuery實(shí)現(xiàn)動(dòng)態(tài)設(shè)置頁(yè)面的寬度和高度 18
任務(wù)1-7 利用外部JS文件動(dòng)態(tài)輸出網(wǎng)頁(yè)內(nèi)容 19
任務(wù)1-8 巧用CSS實(shí)現(xiàn)下拉菜單 20
單元2 設(shè)計(jì)日期時(shí)間類網(wǎng)頁(yè)特效 22
任務(wù)2-1 顯示常規(guī)格式的當(dāng)前日期與時(shí)間 22
任務(wù)2-2 采用多種方式顯示當(dāng)前的日期 23
2.1 JavaScript的運(yùn)算符與表達(dá)式 25
2.2 JavaScript的語(yǔ)句及其規(guī)則 28
2.3 JavaScript的條件語(yǔ)句 29
2.4 JavaScript的函數(shù) 32
2.5 JavaScript的String(字符串)對(duì)象 35
2.6 JavaScript的Math(數(shù)學(xué))對(duì)象 36
2.7 JavaScript的Date(日期)對(duì)象 36
2.8 JavaScript的計(jì)時(shí)方法 38
2.9 JavaScript的RegExp對(duì)象及其方法 39
2.10 支持正則表達(dá)式的String對(duì)象的方法 43
2.11 JavaScript和jQuery的使用比較 46
任務(wù)2-3 不同的節(jié)日顯示對(duì)應(yīng)的問(wèn)候語(yǔ) 47
任務(wù)2-4 在特定日期的特定時(shí)段顯示打折促銷信息 48
任務(wù)2-5 不同時(shí)間段顯示不同的問(wèn)候語(yǔ) 49
任務(wù)2-6 一周內(nèi)每天輸出不同的圖片 50
任務(wù)2-7 實(shí)現(xiàn)在線考試倒計(jì)時(shí) 50
任務(wù)2-8 顯示限定格式的日期 51
任務(wù)2-9 驗(yàn)證日期的有效性 52
任務(wù)2-10 實(shí)現(xiàn)限時(shí)搶購(gòu)倒計(jì)時(shí) 55
單元3 設(shè)計(jì)文字類網(wǎng)頁(yè)特效 56
任務(wù)3-1 JavaScript實(shí)現(xiàn)滾動(dòng)網(wǎng)頁(yè)標(biāo)題欄中的文字 56
任務(wù)3-2 jQuery實(shí)現(xiàn)向上滾動(dòng)網(wǎng)站促銷公告 57
3.1 JavaScript的循環(huán)語(yǔ)句 59
3.2 HTML DOM(文檔對(duì)象模型) 64
3.3 JavaScript的位置與尺寸方法 68
3.4 jQuery的選擇器 75
3.5 jQuery的鏈?zhǔn)讲僮鳌?6
3.6 jQuery的效果方法 76
任務(wù)3-3 JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)狀態(tài)欄中的文字呈現(xiàn)打字效果 84
任務(wù)3-4 JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)文字滾動(dòng)與等待的交替效果 84
任務(wù)3-5 JavaScript實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)動(dòng)態(tài)改變顯示內(nèi)容及外觀效果 86
任務(wù)3-6 JavaScript實(shí)現(xiàn)文本圍繞鼠標(biāo)指針旋轉(zhuǎn) 88
任務(wù)3-7 jQuery實(shí)現(xiàn)網(wǎng)站動(dòng)態(tài)信息滾動(dòng)與等待的交替效果 89
任務(wù)3-8 JavaScript實(shí)現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動(dòng) 90
任務(wù)3-9 jQuery實(shí)現(xiàn)循環(huán)滾動(dòng)網(wǎng)頁(yè)中的文字 92
單元4 設(shè)計(jì)圖片類網(wǎng)頁(yè)特效 94
任務(wù)4-1 JavaScript實(shí)現(xiàn)縱向焦點(diǎn)圖片輪換 94
任務(wù)4-2 jQuery實(shí)現(xiàn)帶左右按鈕控制焦點(diǎn)圖片切換 99
4.1 JavaScript的對(duì)象 101
4.2 jQuery文檔的操作方法 104
任務(wù)4-3 JavaScript實(shí)現(xiàn)控制網(wǎng)頁(yè)中的圖片尺寸 107
任務(wù)4-4 JavaScript實(shí)現(xiàn)限制圖片尺寸與滑動(dòng)鼠標(biāo)滾輪調(diào)整圖片尺寸 107
任務(wù)4-5 JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中圖片連續(xù)向上滾動(dòng) 108
任務(wù)4-6 JavaScript實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換 110
任務(wù)4-7 JavaScript實(shí)現(xiàn)具有手風(fēng)琴效果的橫向焦點(diǎn)圖片輪換 113
任務(wù)4-8 JavaScript實(shí)現(xiàn)帶縮略圖且雙向移動(dòng)的橫向焦點(diǎn)圖輪換 116
任務(wù)4-9 JavaScript實(shí)現(xiàn)隨滾動(dòng)條滑塊的移動(dòng)上下滑動(dòng)圖片 119
任務(wù)4-10 jQuery實(shí)現(xiàn)圖片縱向移動(dòng)的焦點(diǎn)圖片輪換 120
任務(wù)4-11 jQuery實(shí)現(xiàn)具有濾鏡效果的橫向焦點(diǎn)圖片輪換 123
任務(wù)4-12 jQuery實(shí)現(xiàn)鼠標(biāo)指針滑過(guò)圖片時(shí)預(yù)覽大圖 125
任務(wù)4-13 jQuery實(shí)現(xiàn)單擊箭頭按鈕切換圖片 127
任務(wù)4-14 JavaScript實(shí)現(xiàn)圖片連續(xù)向左滾動(dòng) 129
任務(wù)4-15 JavaScript實(shí)現(xiàn)通用橫向焦點(diǎn)圖片輪換 130
任務(wù)4-16 JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)圖片拖曳 133
任務(wù)4-17 jQuery實(shí)現(xiàn)圖片縱向切換 135
任務(wù)4-18 jQuery實(shí)現(xiàn)自動(dòng)與手動(dòng)均可切換的焦點(diǎn)圖片輪換 136
任務(wù)4-19 jQuery實(shí)現(xiàn)單擊左右箭頭滾動(dòng)圖片 139
單元5 設(shè)計(jì)表單控件類網(wǎng)頁(yè)特效 142
任務(wù)5-1 實(shí)現(xiàn)注冊(cè)表單中的網(wǎng)頁(yè)特效 142
任務(wù)5-2 實(shí)現(xiàn)反饋意見(jiàn)表單中的網(wǎng)頁(yè)特效 148
5.1 JavaScript的事件 151
5.2 JavaScript的事件方法 154
5.3 jQuery的事件方法 154
任務(wù)5-3 JavaScript實(shí)現(xiàn)郵箱自動(dòng)導(dǎo)航 156
任務(wù)5-4 JavaScript實(shí)現(xiàn)獲取表單控件的設(shè)置值 158
任務(wù)5-5 jQuery實(shí)現(xiàn)自定義列表框與單擊清空輸入框內(nèi)容 162
任務(wù)5-6 JavaScript實(shí)現(xiàn)輸出列表框中被選項(xiàng)的文本內(nèi)容 164
任務(wù)5-7 JavaScript實(shí)現(xiàn)利用列表框切換網(wǎng)頁(yè) 165
任務(wù)5-8 jQuery實(shí)現(xiàn)動(dòng)態(tài)改變購(gòu)買數(shù)量 166
單元6 設(shè)計(jì)導(dǎo)航菜單類網(wǎng)頁(yè)特效 168
任務(wù)6-1 應(yīng)用className和display等屬性實(shí)現(xiàn)橫向下拉菜單 168
任務(wù)6-2 應(yīng)用jQuery的hover事件和addClass等方法實(shí)現(xiàn)橫向?qū)Ш讲藛巍?71
任務(wù)6-3 應(yīng)用jQuery的bind和attr等方法實(shí)現(xiàn)縱向?qū)Ш讲藛巍?73
6.1 JavaScript的this指針 176
6.2 jQuery的屬性操作方法 176
6.3 jQuery的CSS操作方法 177
任務(wù)6-4 應(yīng)用JavaScript的onmouseover等事件和className屬性設(shè)計(jì)橫向?qū)Ш讲藛巍?78
任務(wù)6-5 應(yīng)用jQuery的hover事件和CSS方法設(shè)計(jì)橫向?qū)Ш讲藛巍?79
任務(wù)6-6 應(yīng)用jQuery的find和animate等方法設(shè)計(jì)橫向?qū)Ш讲藛巍?81
任務(wù)6-7 應(yīng)用jQuery的one和each等方法設(shè)計(jì)復(fù)雜導(dǎo)航菜單 184
任務(wù)6-8 應(yīng)用HTML元素的樣式屬性設(shè)計(jì)橫向下拉菜單 187
任務(wù)6-9 應(yīng)用jQuery的show和hide等方法設(shè)計(jì)縱向?qū)Ш讲藛巍?89
任務(wù)6-10 應(yīng)用jQuery的slideDown和slideUp等方法設(shè)計(jì)有滑動(dòng)效果的橫向下拉菜單 190
任務(wù)6-11 應(yīng)用jQuery的slideDown和fadeOut等方法設(shè)計(jì)下拉菜單 191
單元7 設(shè)計(jì)選項(xiàng)卡類網(wǎng)頁(yè)特效 193
任務(wù)7-1 應(yīng)用setInterval函數(shù)和display屬性實(shí)現(xiàn)選項(xiàng)卡的手動(dòng)切換和自動(dòng)切換 193
任務(wù)7-2 應(yīng)用jQuery的index和find等方法實(shí)現(xiàn)橫向選項(xiàng)卡 195
7.1 JavaScript的數(shù)組對(duì)象 197
7.2 JSON及其使用 198
任務(wù)7-3 應(yīng)用DOM的className和style等屬性設(shè)計(jì)縱向選項(xiàng)卡 200
任務(wù)7-4 應(yīng)用DOM的className和style等屬性設(shè)計(jì)橫向選項(xiàng)卡 202
任務(wù)7-5 應(yīng)用仿jQuery的attr方法設(shè)計(jì)橫向選項(xiàng)卡 205
任務(wù)7-6 應(yīng)用JavaScript的push和jQuery的animate等方法設(shè)計(jì)橫向選項(xiàng)卡與圖文滾動(dòng)特效 208
任務(wù)7-7 應(yīng)用DOM的getElementById和className等屬性設(shè)計(jì)橫向選項(xiàng)卡 210
任務(wù)7-8 應(yīng)用jQuery的mouseover和show等方法設(shè)計(jì)橫向選項(xiàng)卡 212
單元8 設(shè)計(jì)內(nèi)容展開(kāi)與折疊類網(wǎng)頁(yè)特效 213
任務(wù)8-1 應(yīng)用jQuery的each和hasClass等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效 213
任務(wù)8-2 應(yīng)用jQuery的toggle和CSS等方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容多層折疊與展開(kāi)特效 215
8.1 BOM(瀏覽器對(duì)象模型) 217
8.2 jQuery的尺寸方法 221
任務(wù)8-3 應(yīng)用DOM的onclick事件和parentNode屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效 221
任務(wù)8-4 應(yīng)用JavaScript的getElementsByTagName和className等方法或?qū)傩栽O(shè)計(jì)網(wǎng)頁(yè)
內(nèi)容折疊與展開(kāi)特效 223
任務(wù)8-5 應(yīng)用jQuery的bind和CSS等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效 226
任務(wù)8-6 應(yīng)用jQuery的next和toggleClass等方法設(shè)計(jì)折疊與展開(kāi)網(wǎng)頁(yè)內(nèi)容的特效 228
任務(wù)8-7 應(yīng)用DOM的getElementById方法和className屬性設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效 229
任務(wù)8-8 應(yīng)用jQuery的hover和click事件設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效 232
任務(wù)8-9 應(yīng)用jQuery的data和animate等方法設(shè)計(jì)網(wǎng)頁(yè)內(nèi)容折疊與展開(kāi)特效 233
單元9 設(shè)計(jì)頁(yè)面類網(wǎng)頁(yè)特效 236
任務(wù)9-1 實(shí)現(xiàn)頁(yè)面換膚網(wǎng)頁(yè)特效 236
任務(wù)9-2 根據(jù)日期特征動(dòng)態(tài)切換背景 242
9.1 正確使用Cookie 247
9.2 正確區(qū)分jQuery對(duì)象和DOM對(duì)象 248
任務(wù)9-3 根據(jù)屏幕寬度自動(dòng)設(shè)置網(wǎng)頁(yè)背景和導(dǎo)航欄 249
任務(wù)9-4 頁(yè)面快捷導(dǎo)航菜單的顯示與隱藏 251
任務(wù)9-5 下拉窗口的打開(kāi)與自動(dòng)隱藏 253
任務(wù)9-6 滾動(dòng)屏幕時(shí)隱藏或顯示“返回頂部”導(dǎo)航欄 255
任務(wù)9-7 選購(gòu)商品時(shí)打開(kāi)購(gòu)物車頁(yè)面 257
任務(wù)9-8 動(dòng)態(tài)切換頁(yè)面背景與調(diào)整頁(yè)面大小 257
任務(wù)9-9 浮動(dòng)框架的高度自適應(yīng)頁(yè)面內(nèi)容的高度 259
任務(wù)9-10 隨著屏幕高度變化隱藏或顯示“返回頂部”導(dǎo)航欄 260
附錄A jQuery的常用方法 261
A.1 jQuery的核心函數(shù) 261
A.2 jQuery的選擇器 261
A.3 jQuery的遍歷方法 262
A.4 jQuery的事件方法 263
A.5 jQuery的效果方法 264
A.6 jQuery的文檔操作方法 265
A.7 jQuery的DOM元素方法 265
A.8 jQuery的屬性操作方法 266
A.9 jQuery的CSS操作方法 266
A.10 jQuery的尺寸方法 266
A.11 jQuery的數(shù)據(jù)操作方法 267
A.12 jQuery的AJAX操作方法 267
參考文獻(xiàn) 268