JavaScript與jQuery實(shí)戰(zhàn)教程（第2版）

目錄



第1章JavaScript概述00

任務(wù)1.1認(rèn)識(shí)JavaScript00

1.1.1JavaScript的起源00

1.1.2JavaScript的作用00

1.1.3JavaScript的基本特點(diǎn)00

1.1.4JavaScript的組成00

任務(wù)1.2在頁(yè)面顯示個(gè)人信息00

1.2.1選擇JavaScript腳本編輯器00

1.2.2腳本的基本結(jié)構(gòu)00

1.2.3在網(wǎng)頁(yè)中引用JavaScript的方式00

1.2.4常用的輸入/輸出語(yǔ)句00

1.2.5任務(wù)實(shí)現(xiàn)0

任務(wù)1.3測(cè)試綜合案例在主流瀏覽器上的兼容性0

1.3.1瀏覽器之間的沖突0

1.3.2標(biāo)準(zhǔn)的制定0

1.3.3任務(wù)實(shí)現(xiàn)0

小結(jié)0

實(shí)訓(xùn)0

課后練習(xí)0

第2章JavaScript基礎(chǔ)0

任務(wù)2.1顯示變量數(shù)據(jù)類型0

2.1.1變量0

2.1.2數(shù)據(jù)類型0

2.1.3運(yùn)算符號(hào)0

2.1.4任務(wù)實(shí)現(xiàn)0

任務(wù)2.2根據(jù)成績(jī)給出學(xué)生考評(píng)0

2.2.1if語(yǔ)句0

2.2.2switch語(yǔ)句0

2.2.3任務(wù)實(shí)現(xiàn)0

任務(wù)2.3實(shí)現(xiàn)猜數(shù)游戲0

2.3.1for循環(huán)0

2.3.2while循環(huán)0

2.3.3do...while循環(huán)0

2.3.4for...in循環(huán)0

2.3.5中斷循環(huán)語(yǔ)句0

2.3.6任務(wù)實(shí)現(xiàn)0

任務(wù)2.4制作簡(jiǎn)易計(jì)算器0

2.4.1數(shù)值判斷函數(shù)0

2.4.2自定義函數(shù)0

2.4.3任務(wù)實(shí)現(xiàn)0

小結(jié)0

實(shí)訓(xùn)0

課后練習(xí)0



JavaScript

與jQuery實(shí)戰(zhàn)教程（第2版）








目錄








第3章JavaScript對(duì)象編程0

任務(wù)3.1在頁(yè)面動(dòng)態(tài)顯示系統(tǒng)時(shí)間0

3.1.1Date對(duì)象的創(chuàng)建0

3.1.2Date對(duì)象的常用方法0

3.1.3定時(shí)器函數(shù)0

3.1.4任務(wù)實(shí)現(xiàn)0

任務(wù)3.2制作隨機(jī)選號(hào)頁(yè)面0

3.2.1Math對(duì)象的常用屬性0

3.2.2Math對(duì)象的常用方法0

3.2.3任務(wù)實(shí)現(xiàn)0

任務(wù)3.3制作簡(jiǎn)單的焦點(diǎn)圖效果0

3.3.1數(shù)組的創(chuàng)建0

3.3.2數(shù)組的訪問0

3.3.3數(shù)組的常用屬性和方法0

3.3.4任務(wù)實(shí)現(xiàn)0

任務(wù)3.4使用JSON顯示圖書信息0

3.4.1什么是JSON0

3.4.2JSON的語(yǔ)法規(guī)則0

3.4.3JSON對(duì)象0

3.4.4JSON數(shù)組0

3.4.5任務(wù)實(shí)現(xiàn)0

任務(wù)3.5驗(yàn)證注冊(cè)頁(yè)面信息0

3.5.1String對(duì)象的創(chuàng)建0

3.5.2String對(duì)象的常用屬性和方法0

3.5.3任務(wù)實(shí)現(xiàn)0

任務(wù)3.6使用正則表達(dá)式驗(yàn)證注冊(cè)頁(yè)面信息0

3.6.1定義正則表達(dá)式0

3.6.2正則表達(dá)式的操作方法0

3.6.3正則表達(dá)式的模式0

3.6.4任務(wù)實(shí)現(xiàn)0

小結(jié)0

實(shí)訓(xùn)0

課后練習(xí)0

第4章BOM編程0

任務(wù)4.1制作彈出窗口特效0

4.1.1BOM對(duì)象模型參考0

4.1.2window對(duì)象的常用屬性0

4.1.3window對(duì)象的常用方法0

4.1.4任務(wù)實(shí)現(xiàn)

任務(wù)4.2制作網(wǎng)頁(yè)標(biāo)題交替顯示效果

4.2.1document對(duì)象的常用屬性

4.2.2任務(wù)實(shí)現(xiàn)

任務(wù)4.3制作復(fù)選框全選效果

4.3.1document對(duì)象的常用方法

4.3.2任務(wù)實(shí)現(xiàn)

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第5章DOM編程

任務(wù)5.1畫出頁(yè)面的文檔節(jié)點(diǎn)結(jié)構(gòu)圖

5.1.1什么是DOM

5.1.2DOM的組成

5.1.3DOM模型中的節(jié)點(diǎn)

5.1.4任務(wù)實(shí)現(xiàn)

任務(wù)5.2使用Core DOM方式動(dòng)態(tài)添加表格

5.2.1節(jié)點(diǎn)的常用屬性和方法

5.2.2查看節(jié)點(diǎn)

5.2.3創(chuàng)建和增加節(jié)點(diǎn)

5.2.4刪除和替換節(jié)點(diǎn)

5.2.5任務(wù)實(shí)現(xiàn)

任務(wù)5.3使用HTML DOM方式動(dòng)態(tài)添加表格

5.3.1HTML DOM對(duì)象

5.3.2訪問HTML DOM對(duì)象的屬性

5.3.3表格對(duì)象

5.3.4任務(wù)實(shí)現(xiàn)

任務(wù)5.4拓展

5.4.1用DOM的文檔碎片提高頁(yè)面的執(zhí)行效率

5.4.2在特定節(jié)點(diǎn)后插入節(jié)點(diǎn)

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第6章JavaScript與CSS交互

任務(wù)6.1使用JavaScript動(dòng)態(tài)改變導(dǎo)航菜單樣式

6.1.1style屬性

6.1.2className屬性

6.1.3任務(wù)實(shí)現(xiàn)

任務(wù)6.2制作圖片輪顯效果

6.2.1visibility屬性

6.2.2display屬性

6.2.3任務(wù)實(shí)現(xiàn)

任務(wù)6.3制作隨光標(biāo)滾動(dòng)的廣告圖片

6.3.1獲取樣式屬性值

6.3.2頁(yè)面事件

6.3.3任務(wù)實(shí)現(xiàn)

任務(wù)6.4拓展

6.4.1制作Tab切換效果

6.4.2制作光標(biāo)移到某圖片上顯示該圖片對(duì)應(yīng)大圖

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第7章jQuery基礎(chǔ)

任務(wù)7.1使用jQuery在警告框中顯示“Hello World!”

7.1.1jQuery的優(yōu)勢(shì)

7.1.2配置jQuery環(huán)境

7.1.3jQuery開發(fā)工具和插件

7.1.4任務(wù)實(shí)現(xiàn)

任務(wù)7.2網(wǎng)站品牌列表的顯示與收起

7.2.1基本選擇器

7.2.2層次選擇器

7.2.3過濾選擇器

7.2.4任務(wù)實(shí)現(xiàn)

任務(wù)7.3拓展

7.3.1jQuery對(duì)象與DOM對(duì)象

7.3.2表單選擇器

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第8章jQuery中的DOM操作

任務(wù)8.1制作圖片展示效果

8.1.1獲取和設(shè)置屬性

8.1.2刪除屬性

8.1.3任務(wù)實(shí)現(xiàn)

任務(wù)8.2制作留言板前端局部更新效果

8.2.1查找節(jié)點(diǎn)

8.2.2創(chuàng)建節(jié)點(diǎn)

8.2.3插入節(jié)點(diǎn)

8.2.4任務(wù)實(shí)現(xiàn)

任務(wù)8.3制作電子郵件刪除效果

8.3.1刪除節(jié)點(diǎn)

8.3.2復(fù)制節(jié)點(diǎn)

8.3.3替換節(jié)點(diǎn)

8.3.4遍歷節(jié)點(diǎn)

8.3.5任務(wù)實(shí)現(xiàn)

任務(wù)8.4表格隔行變色和當(dāng)前行變色

8.4.1獲取和設(shè)置style對(duì)象的屬性

8.4.2獲取和設(shè)置class樣式

8.4.3追加和移除樣式

8.4.4判斷是否含有某個(gè)樣式

8.4.5任務(wù)實(shí)現(xiàn)

任務(wù)8.5拓展

8.5.1制作導(dǎo)航欄菜單效果

8.5.2制作層疊圖片橫向平滑移動(dòng)輪播切換效果

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第9章jQuery中的事件

任務(wù)9.1微博字?jǐn)?shù)統(tǒng)計(jì)

9.1.1加載DOM

9.1.2事件綁定

9.1.3事件移除

9.1.4簡(jiǎn)寫事件

9.1.5任務(wù)實(shí)現(xiàn)

任務(wù)9.2制作圖片提示效果

9.2.1事件對(duì)象

9.2.2事件冒泡

9.2.3任務(wù)實(shí)現(xiàn)

任務(wù)9.3制作頂部導(dǎo)航菜單效果

9.3.1合成事件hover

9.3.2特殊事件one

9.3.3任務(wù)實(shí)現(xiàn)

任務(wù)9.4拓展

9.4.1模擬操作trigger()方法

9.4.2事件命名空間

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第10章jQuery制作動(dòng)畫

任務(wù)10.1FAQ答案的顯示和隱藏

10.1.1show()和hide()方法

10.1.2fadeIn()和fadeOut()方法

10.1.3slideUp()和slideDown()方法

10.1.4任務(wù)實(shí)現(xiàn)

任務(wù)10.2圖片橫向移動(dòng)效果

10.2.1自定義動(dòng)畫方法animate()

10.2.2動(dòng)畫回調(diào)函數(shù)

10.2.3停止動(dòng)畫和判斷是否處于動(dòng)畫狀態(tài)

10.2.4任務(wù)實(shí)現(xiàn)

任務(wù)10.3拓展

10.3.1焦點(diǎn)幻燈片效果

10.3.2背景動(dòng)畫全屏焦點(diǎn)圖效果

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第11章jQuery插件應(yīng)用

任務(wù)11.1使用ssMenu固定側(cè)邊欄插件

11.1.1ssMenu插件簡(jiǎn)介

11.1.2ssMenu插件下載

11.1.3任務(wù)實(shí)現(xiàn)

任務(wù)11.2Pinterest Grid實(shí)現(xiàn)響應(yīng)式網(wǎng)格瀑布流布局

11.2.1Pinterest Grid插件簡(jiǎn)介

11.2.2Pinterest Grid插件參數(shù)

11.2.3任務(wù)實(shí)現(xiàn)

任務(wù)11.3編寫表格隔行變色插件

11.3.1插件的種類

11.3.2插件的注意事項(xiàng)

11.3.3jQuery插件的機(jī)制

11.3.4命名空間

11.3.5編寫jQuery插件

11.3.6任務(wù)實(shí)現(xiàn)

任務(wù)11.4使用Swiper插件實(shí)現(xiàn)圖片切換

11.4.1Swiper插件簡(jiǎn)介

11.4.2Swiper組件

11.4.3Swiper插件的基本用法

11.4.4用Swiper插件實(shí)現(xiàn)縮放的圖片切換

小結(jié)

實(shí)訓(xùn)

課后練習(xí)

第12章項(xiàng)目案例： 融合工廠企業(yè)官網(wǎng)

任務(wù)12.1案例分析

12.1.1需求概述

12.1.2開發(fā)環(huán)境

12.1.3案例覆蓋的技能點(diǎn)

12.1.4開發(fā)技巧

任務(wù)12.2頁(yè)面交互效果實(shí)現(xiàn)

12.2.1整站通用交互效果

12.2.2首頁(yè)交互效果

12.2.3傳媒服務(wù)頁(yè)面交互效果

小結(jié)

參考文獻(xiàn)