JavaScript + jQuery 網頁特效設計任務驅動教程

作者簡介
陳承歡三級教授高級工程師軟件設計師湖南省省級專業帶頭人，國家精品課程與精品共享課程《網頁設計與製作》主持人，國家資源庫課程《計算機維護與維修》和《網頁樣式設計與應用》主持人，湖南省教育科學重點研究課題主持人，湖南省教學改革項目主持人。
多年來致力於總結教學規律、探索教學模式、創新教學方法、開發特色教材。主持開發高職特色教材20多本，其中“十一五”國家級規劃教材4本，“十二五”國家級規劃教材11本。成功地實現了以真實項目或任務為載體重構教學內容、面向教學全過程設置教學環節、“教、學、做、評”一體設計，在教學實施中取得了良好的教學效果。
 

目錄
單元1設計基本網頁特效1 
任務1-1 JavaScript實現動態加載網頁內容1 
任務1-2 jQuery實現網頁收藏2 
1.1 JavaScript簡介4 
1.2 JavaScript主要的語法規則4 
1.3 JavaScript常用的開發工具5 
1.4在HTML文檔中嵌入JavaScript代碼的方法5 
1.5 JavaScript的註釋6 
1.6 JavaScript的數據類型6 
1.7 JavaScript的常量8 
1.8 JavaScript的變量8 
1.9 JavaScript的消息框10 
1.10 JavaScript的異常處理11 
1.11 JavaScript庫12 
1.12下載和替代jQuery庫13 
1.13 jQuery簡介13 
任務1-3 JavaScript實現動態改變樣式文件15 
任務1-4 JavaScript實現動態改變網頁字體大小及關閉網頁窗口16 
任務1-5 JavaScript實現播放Flash動畫17 
任務1-6 jQuery實現動態設置頁面的寬度和高度18 
任務1-7利用外部JS文件動態輸出網頁內容19 
任務1-8巧用CSS實現下拉菜單20 
單元2設計日期時間類網頁特效22
任務2-1顯示常規格式的當前日期與時間22 
任務2-2採用多種方式顯示當前的日期23 
2.1 JavaScript的運算符與表達式25 
2.2 JavaScript的語句及其規則28 
2.3 JavaScript的條件語句29 
2.4 JavaScript的函數32 
2.5 JavaScript的String（字符串）對象35 
2.6 JavaScript的Math（數學）對象36 
2.7 JavaScript的Date（日期）對象36 
2.8 JavaScript的計時方法38 
2.9 JavaScript的RegExp對象及其方法39 
2.10支持正則表達式的String對象的方法43 
2.11 JavaScript和jQuery的使用比較46 
任務2-3不同的節日顯示對應的問候語47 
任務2-4在特定日期的特定時段顯示打折促銷信息48 
任務2-5不同時間段顯示不同的問候語49 
任務2-6一周內每天輸出不同的圖片50 
任務2-7實現在線考試倒計時50 
任務2-8顯示限定格式的日期51 
任務2-9驗證日期的有效性52 
任務2 -10實現限時搶購倒計時55 
單元3設計文字類網頁特效56 
任務3-1 JavaScript實現滾動網頁標題欄 的文字56
任務3-2 jQuery實現向上滾動網站促銷公告57 
3.1 JavaScript的循環語句59 
3.2 HTML DOM（文檔對像模型） 64 
3.3 JavaScript的位置與尺寸方法68 
3.4 jQuery的選擇器75 
3.5 jQuery的鍊式操作76 
3.6 jQuery的效果方法76 
任務3-3 JavaScript實現網頁狀態欄中的文字呈現打字效果84 
任務3-4 JavaScript實現網頁文字滾動與等待的交替效果84 
任務3-5 JavaScript實現鼠標指針滑過動態改變顯示內容及外觀效果86 
任務3-6 JavaScript實現文本圍繞鼠標指針旋轉88 
任務3-7 jQuery實現網站動態信息滾動與等待的交替效果89 
任務3-8 JavaScript實現網站公告信息連續向上滾動90 
任務3-9 jQuery實現循環滾動網頁中的文字92 
單元4設計圖片類網頁特效94 
任務4-1 JavaScript實現縱向焦點圖片輪換94 
任務4-2 jQuery實現帶左右按鈕控制焦點圖片切換99 
4.1 JavaScript的對象101 
4.2 jQuery文檔的操作方法104 
任務4-3 JavaScript實現控製網頁中的圖片尺寸107 
任 務4-4 JavaScript實現限製圖片尺寸與滑動鼠標滾輪調整圖片尺寸107
任務4-5 JavaScript實現網頁中圖片連續向上滾動108 
任務4-6 JavaScript實現具有濾鏡效果的橫向焦點圖片輪換110 
任務4-7 JavaScript實現具有手風琴效果的橫向焦點圖片輪換113 
任務4-8 JavaScript實現帶縮略圖且雙向移動的橫向焦點圖輪換116 
任務4-9 JavaScript實現隨滾動條滑塊的移動上下滑動圖片119 
任務4-10 jQuery實現圖片縱向移動的焦點圖片輪換120 
任務4-11 jQuery實現具有濾鏡效果的橫向焦點圖片輪換123 
任務4-12 jQuery實現鼠標指針滑過圖片時預覽大圖125 
任務4-13 jQuery實現單擊箭頭按鈕切換圖片127 
任務4-14 JavaScript實現圖片連續向左滾動129 
任務4-15 JavaScript實現通用橫向焦點圖片輪換130 
任務4-16 JavaScript實現網頁圖片拖曳133 
任務4-17 jQuery實現圖片縱向切換135 
任務4-18 jQuery實現自動與手動均可切換的焦點圖片輪換136 
任務4-19 jQuery實現單擊左右箭頭滾動圖片139 
單元5設計表單控件類網頁特 142 
任務5-1實現註冊表單中的網頁特效142 
任務5-2實現反饋意見表單中的網頁特效148 
5.1 JavaScript的事件151
5.2 JavaScript的事件方法154 
5.3 jQuery的事件方法154 
任務5-3 JavaScript實現郵箱自動導航156 
任務5-4 JavaScript實現獲取表單控件的設置值158 
任務5-5 jQuery實現自定義列錶框與單擊清空輸入框內容162 
任務5-6 JavaScript實現輸出列錶框中被選項的文本內容164 
任務5-7 JavaScript實現利用列錶框切換網頁165 
任務5-8 jQuery實現動態改變購買數量166 
單元6設計導航菜單類網頁特效168 
任務6-1應用className和display等屬性實現橫向下拉菜單168 
任務6-2應用jQuery的hover事件和addClass等方法實現橫嚮導航菜單171 
任務6-3應用jQuery的bind和attr等方法實現縱嚮導航菜單173 
6.1 JavaScript的this指針176 
6.2 jQuery的屬性操作方法176 
6.3 jQuery的CSS操作方法177 
任務6-4應用JavaScript的onmouseover等事件和className屬性設計橫嚮導航菜單178 
任務6-5應用jQuery的hover事件和CSS方法設計橫嚮導航菜單179 
任務6-6應用jQuery的find和animate等方 設計橫嚮導航菜單181
任務6-7應用jQuery的one和each等方法設計複雜導航菜單184 
任務6-8應用HTML元素的樣式屬性設計橫向下拉菜單187 
任務6-9應用jQuery的show和hide等方法設計縱嚮導航菜單189 
任務6-10應用jQuery的slideDown和slideUp等方法設計有滑動效果的橫向下拉菜單190 
任務6-11應用jQuery的slideDown和fadeOut等方法設計下拉菜單191 
單元7設計選項卡類網頁特效193 
任務7-1應用setInterval函數和display屬性實現選項卡的手動切換和自動切換193 
任務7-2應用jQuery的index和find等方法實現橫向選項卡195 
7.1 JavaScript的數組對象197 
7.2 JSON及其使用198 
任務7-3應用DOM的className和style等屬性設計縱向選項卡200 
任務7-4應用DOM的className和style等屬性設計橫向選項卡202 
任務7-5應用仿jQuery的attr方法設計橫向選項卡205 
任務7-6應用JavaScript的push和jQuery的animate等方法設計橫向選項卡與圖文滾動特效208 
任務7-7應用DOM的getElementById className等屬性設計橫向選項卡210 
任務7-8應用jQuery的mouseover和show等方法設計橫向選項卡212
單元8設計內容展開與折疊類網頁特效213 
任務8-1應用jQuery的each和hasClass等方法設計網頁內容折疊與展開特效213 
任務8-2應用jQuery的toggle和CSS等方法實現網頁內容多層折疊與展開特效215 
8.1 BOM（瀏覽器對像模型） 217 
8.2 jQuery的尺寸方法221 
任務8-3應用DOM的onclick事件和parentNode屬性設計網頁內容折疊與展開特效221 
任務8-4應用JavaScript的getElementsByTagName和className等方法或屬性設計網頁
內容折疊與展開特效223 
任務8-5應用jQuery的bind和CSS等方法設計網頁內容折疊與展開特效226 
任務8-6應用jQuery的next和toggleClass等方法設計折疊與展開網頁內容的特效228 
任務8-7應用DOM的getElementById方法和className屬性設計網頁內容折疊與展開特效229 
任務8-8應用jQuery的hover和click事件設計網頁內容折疊與展開特效232 
任務8-9應用jQuery的data和animate等方法設計網頁內容折疊與展開特效233 
單元9設計 麵類網頁特效236 
任務9-1實現頁面換膚網頁特效236 
任務9-2根據日期特徵動態切換背景242 
9.1正確使用Cookie 247 
9.2正確區分jQuery對象和DOM對象248
任務9-3根據屏幕寬度自動設置網頁背景和導航欄249 
任務9-4頁面快捷導航菜單的顯示與隱藏251 
任務9-5下拉窗口的打開與自動隱藏253 
任務9-6滾動屏幕時隱藏或顯示“返回頂部”導航欄255 
任務9-7選購商品時打開購物車頁面257 
任務9-8動態切換頁面背景與調整頁面大小257 
任務9-9浮動框架的高度自適應頁面內容的高度259 
任務9 -10隨著屏幕高度變化隱藏或顯示“返回頂部”導航欄260 
附錄A jQuery的常用方法261 
A.1 jQuery的核心函數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的數據操作方法267 
A.12 jQuery的AJAX操作方法267 
參考文獻268