JavaScript+jQuery網(wǎng)頁特效設計實例教程

單元1 設計基本網(wǎng)頁特效
任務1-1 JavaScript實現(xiàn)動態(tài)加載網(wǎng)頁內(nèi)容
任務1-2 jQuery實現(xiàn)網(wǎng)頁收藏
1.1 JavaScript簡介
1.2 JavaScript主要的語法規(guī)則
1.3 JavaScript常用的開發(fā)工具
1.4 在HTML文檔中嵌入JavaScript代碼的方法
1.5 JavaScript的注釋
1.6 JavaScript的數(shù)據(jù)類型
1.7 JavaScript的常量
1.8 JavaScript的變量
1.9 JavaScript的消息框
1.10 JavaScript的異常處理
1.11 JavaScript庫
1.12 下載和替代jQuery庫
1.13 jQuery簡介
任務1-3 JavaScript實現(xiàn)關(guān)閉網(wǎng)頁時彈出小窗口
任務1-4 JavaScript實現(xiàn)動態(tài)改變樣式文件
任務1-5 JavaScript實現(xiàn)動態(tài)改變網(wǎng)頁字體大小及關(guān)閉網(wǎng)頁窗口
任務1-6 JavaScript實現(xiàn)播放Flash動畫
任務1-7 JavaScript實現(xiàn)設為主頁
任務1-8 jQuery實現(xiàn)動態(tài)設置頁面的寬度和高度
任務1-9 利用外部JS文件動態(tài)輸出網(wǎng)頁內(nèi)容
任務1-10 巧用CSS實現(xiàn)下拉菜單
單元2 設計日期時間類網(wǎng)頁特效
任務2-1 顯示常規(guī)格式的當前日期與時間
任務2-2 采用多種方式顯示當前的日期
2.1 JavaScript的運算符與表達式
2.2 JavaScript的語句及其規(guī)則
2.3 JavaScript的條件語句
2.4 JavaScript的函數(shù)
2.5 JavaScript的String（字符串）對象
2.6 JavaScript的Math（數(shù)學）對象
2.7 JavaScript的Date（日期）對象
2.8 JavaScript的計時方法
2.9 JavaScript的RegExp對象及其方法
2.10 支持正則表達式的String對象的方法
2.11 JavaScript和jQuery的使用比較
任務2-3 不同的節(jié)日顯示對應的問候語
任務2-4 在特定日期的特定時段顯示打折促銷信息
任務2-5 不同時間段顯示不同的問候語
任務2-6 一周內(nèi)每天輸出不同的圖片
任務2-7 實現(xiàn)在線考試倒計時
任務2-8 顯示限定格式的日期
任務2-9 驗證日期的有效性
任務2-10 實現(xiàn)限時搶購倒計時
單元3 設計文字類網(wǎng)頁特效
任務3-1 JavaScript實現(xiàn)滾動網(wǎng)頁標題欄中的文字
任務3-2 jQuery實現(xiàn)向上滾動網(wǎng)站促銷公告
3.1 JavaScript的循環(huán)語句
3.2 HTML DOM（文檔對象模型）
3.3 JavaScript的位置與尺寸方法
3.4 jQuery的選擇器
3.5 jQuery的鏈式操作
3.6 jQuery的效果方法
任務3-3 JavaScript實現(xiàn)網(wǎng)頁狀態(tài)欄中的文字呈現(xiàn)打字效果
任務3-4 JavaScript實現(xiàn)網(wǎng)頁文字滾動與等待的交替效果
任務3-5 JavaScript實現(xiàn)鼠標滑過動態(tài)改變顯示內(nèi)容及外觀效果
任務3-6 JavaScript實現(xiàn)文本圍繞鼠標旋轉(zhuǎn)
任務3-7 jQuery實現(xiàn)網(wǎng)站動態(tài)信息滾動與等待的交替效果
任務3-8 JavaScript實現(xiàn)網(wǎng)站公告信息連續(xù)向上滾動
任務3-9 jQuery實現(xiàn)循環(huán)滾動網(wǎng)頁中的文字
單元4 設計圖片類網(wǎng)頁特效
任務4-1 JavaScript實現(xiàn)縱向焦點圖片輪換
任務4-2 jQuery實現(xiàn)帶左右按鈕控制焦點圖片切換
4.1 JavaScript的對象
4.2 jQuery的文檔操作方法
任務4-3 JavaScript實現(xiàn)控制網(wǎng)頁中的圖片尺寸
任務4-4 JavaScript實現(xiàn)限制圖片尺寸與滑動鼠標滾輪調(diào)整圖片尺寸
任務4-5 JavaScript實現(xiàn)網(wǎng)頁中圖片連續(xù)向上滾動
任務4-6 JavaScript實現(xiàn)具有濾鏡效果的橫向焦點圖片輪換
任務4-7 JavaScript實現(xiàn)具有手風琴效果的橫向焦點圖片輪換
任務4-8 JavaScript實現(xiàn)帶縮略圖且雙向移動的橫向焦點圖輪換
任務4-9 JavaScript實現(xiàn)隨滾動條的滑塊移動上下滑動圖片
任務4-10 jQuery實現(xiàn)圖片縱向移動的焦點圖片輪換
任務4-11 jQuery實現(xiàn)具有濾鏡效果的橫向焦點圖片輪換
任務4-12 jQuery實現(xiàn)鼠標滑過圖片時預覽大圖
任務4-13 jQuery實現(xiàn)單擊箭頭按鈕切換圖片
任務4-14 JavaScript實現(xiàn)圖片連續(xù)向左滾動
任務4-15 JavaScript實現(xiàn)通用橫向焦點圖片輪換
任務4-16 jQuery實現(xiàn)圖片縱向切換
任務4-17 jQuery實現(xiàn)自動與手動均可切換的焦點圖片輪換
任務4-18 jQuery實現(xiàn)單擊左右箭頭實現(xiàn)圖片滾動效果
單元5 設計表單控件類網(wǎng)頁特效
任務5-1 實現(xiàn)注冊表單中的網(wǎng)頁特效
任務5-2 實現(xiàn)反饋意見表單中的網(wǎng)頁特效
5.1 JavaScript的事件
5.2 JavaScript的事件方法
5.3 jQuery的事件方法
任務5-3 JavaScript實現(xiàn)郵箱自動導航
任務5-4 JavaScript實現(xiàn)從自定義列表框中選擇商品類型
任務5-5 JavaScript實現(xiàn)獲取表單控件的設置值
任務5-6 jQuery實現(xiàn)自定義列表框與單擊清空輸入框內(nèi)容
任務5-7 jQuery實現(xiàn)動態(tài)改變購買數(shù)量
任務5-8 JavaScript實現(xiàn)輸出列表框中被選項的文本內(nèi)容
任務5-9 JavaScript實現(xiàn)利用列表框切換網(wǎng)頁
任務5-10 jQuery實現(xiàn)驗證頁面頁碼
單元6 設計導航菜單類網(wǎng)頁特效
任務6-1 應用className和display等屬性實現(xiàn)橫向下拉菜單
任務6-2 應用jQuery的hover事件和addClass等方法實現(xiàn)橫向?qū)Ш讲藛?br />任務6-3 應用jQuery的bind和attr等方法實現(xiàn)縱向?qū)Ш讲藛?br />6.1 JavaScript的this指針
6.2 jQuery的屬性操作方法
6.3 jQuery的CSS操作方法
任務6-4 應用JavaScript的onmouseover等事件和className屬性設計橫向?qū)Ш讲藛?br />任務6-5 應用DOM的getElementById和className屬性設計橫向?qū)Ш讲藛?br />任務6-6 應用jQuery的hover事件和CSS方法設計橫向?qū)Ш讲藛?br />任務6-7 應用jQuery的find和animate等方法設計橫向?qū)Ш讲藛?br />任務6-8 應用jQuery的one和each等方法設計復雜導航菜單
任務6-9 應用HTML元素的樣式屬性設計橫向下拉菜單
任務6-10 應用jQuery的show和hide等方法設計縱向?qū)Ш讲藛?br />任務6-11 應用jQuery的slideDown和slideUp等方法設計有滑動效果的橫向下拉菜單
任務6-12 應用jQuery的slideDown和fadeOut等方法設計下拉菜單
單元7 設計選項卡類網(wǎng)頁特效
任務7-1 應用setInterval函數(shù)和display屬性實現(xiàn)選項卡的手動切換和自動切換
任務7-2 應用jQuery的index和find等方法實現(xiàn)橫向選項卡
7.1 JavaScript的數(shù)組對象
7.2 JSON及其使用
任務7-3 應用DOM的className和style等屬性設計縱向選項卡
任務7-4 應用DOM的className和style等屬性設計橫向選項卡
任務7-5 應用DOM的parentNode屬性和JSON設計縱向選項卡
任務7-6 應用仿jQuery的attr方法設計橫向選項卡
任務7-7 應用JavaScript的push和jQuery的animate等方法設計橫向選項卡與圖文滾動特效
任務7-8 應用jQuery的each和css方法設計縱向選項卡
任務7-9 應用DOM的getElementById和className等屬性設計橫向選項卡
任務7-10 應用jQuery的mouseover和show等方法設計橫向選項卡
單元8 設計內(nèi)容展開與折疊類網(wǎng)頁特效
任務8-1 應用jQuery的each和hasClass等方法設計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-2 應用jQuery的toggle和css等方法實現(xiàn)網(wǎng)頁內(nèi)容多層折疊與展開特效
8.1 BOM（瀏覽器對象模型）
8.2 jQuery的尺寸方法
任務8-3 應用DOM的onclick事件和parentNode屬性設計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-4 應用JavaScript的getElementsByTagName和className等方法或?qū)傩栽O計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-5 應用jQuery的bind和css等方法設計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-6 應用jQuery的slideUp和slideDown等方法設計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-7 應用DOM的getElementById方法和className屬性設計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-8 應用jQuery的hover和click事件設計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-9 應用jQuery的toggle和hasClass方法設計網(wǎng)頁內(nèi)容折疊與展開特效
任務8-10 應用jQuery的data和animate等方法設計網(wǎng)頁內(nèi)容折疊與展開特效
單元9 設計頁面類網(wǎng)頁特效
任務9-1 實現(xiàn)頁面換膚網(wǎng)頁特效
任務9-2 根據(jù)日期特征動態(tài)切換背景
9.1 正確使用cookie
9.2 正確區(qū)分jQuery對象和DOM對象
任務9-3 根據(jù)屏幕寬度自動設置網(wǎng)頁背景和導航欄
任務9-4 頁面快捷導航菜單的顯示與隱藏
任務9-5 下拉窗口的打開與自動隱藏
任務9-6 滾動屏幕時隱藏或顯示返回頂部導航欄
任務9-7 選購商品時打開購物車頁面
任務9-8 動態(tài)切換頁面背景與調(diào)整頁面大小
任務9-9 浮動框架的高度自適應頁面內(nèi)容的高度
任務9-10 隨著屏幕高度變化隱藏或顯示返回頂部導航欄
任務9-11 促銷信息的顯示與隱藏
附錄A jQuery的常用方法
A.1 jQuery的核心函數(shù)
A.2 jQuery的選擇器
A.3 jQuery的遍歷方法
A.4 jQuery的事件方法
A.5 jQuery的效果方法
A.6 jQuery的文檔操作方法
A.7 jQuery的DOM元素方法
A.8 jQuery的屬性操作方法
A.9 jQuery的CSS操作方法
A.10 jQuery的尺寸方法
A.11 jQuery的數(shù)據(jù)操作方法
A.12 jQuery的AJAX操作方法
參考文獻