JavaScript + jQuery Web 開發案例教程

温谦：

## 全栈工程师，前沿科技创始人，现从事企业大型软件系统的分析与开发工作，拥有20年的软件开发经验，主持并成功开发了多个复杂系统，项目实战经验丰富。

## 常销书作者，毕业于华中科技大学计算机专业，主编网页设计与软件开发相关领域图书共12本，图书编写经验颇丰，其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程（HTML+CSS+DIV）》等图书常销10余年，被百余所高校选作教材。

## 章名目錄

 

【上篇】　JavaScript程序開發

第 1章　JavaScript簡介

第 2章　JavaScript基礎

第3章　程序控制流與函數

第4章　JavaScript中的對象

第5章　在JavaScript中使用集合

第6章　類與原型鏈

第7章　DOM

第8章　綜合案例一：以迭代方式開發計算器

 

【下篇】　jQuery程序開發

第9章　jQuery基礎

第 10章　jQuery選擇器與管理結果集

第 11章　使用jQuery控制DOM

第 12章　jQuery事件

第 13章　jQuery的功能函數

第 14章　jQuery與AJAX

第 15章　jQuery製作動畫與特效

第 16章　jQuery插件

第 17章　綜合案例二：網頁留言本

第 18章　綜合案例三：網頁圖片剪裁器

 

 

## 詳細目錄

 

【上篇】　JavaScript程序開發

 

第 1章　JavaScript簡介

1.1　程序設計語言與JavaScript　02

1.2　JavaScript的起源、發展與標準化　06

1.2.1　起源　06

1.2.2　博弈與發展　07

1.2.3　標準的制定　07

1.3　JavaScript的組成　08

1.3.1　ECMAScript　08

1.3.2　DOM　08

1.3.3　BOM　09

1.3.4　新的開始　09

1.4　Web標準　10

1.4.1 Web標準概述　10

1.4.2 結構、表現、行為的分離　11

1.4.3 前/後端分離成為Web頁面開發的主流模式　12

本章小結　13

習題１　13

 

第 2章　JavaScript基礎

2.1 JavaScript的基本語法　14

2.2 使用VS Code編寫第 一個包含JavaScript代碼的頁面　16

2.2.1 創建基礎的HTML文件　16

2.2.2 編寫JavaScript代碼　17

2.2.3 在瀏覽器中查看與調試代碼　18

2.3 關鍵字與保留字　20

2.4 變量　21

2.5 數據類型　23

2.5.1 數值型　23

2.5.2 字符串型　24

2.5.3 布爾型　27

2.5.4 數據類型轉換　28

2.5.5 數組　30

本章小結　34

習題2　34

 

第3章　程序控制流與函數

3.1 順序結構：賦值語句與表達式　35

3.2 分支結構：條件語句　37

3.2.1 比較運算符　37

3.2.2 邏輯運算符　37

3.2.3 if語句　38

3.2.4 switch語句　39

3.3 循環語句　41

3.3.1 while語句　41

3.3.2 do…while語句　41

3.3.3 for語句　42

3.3.4 break和continue語句　43

3.3.5 實例：九九乘法表　45

3.3.6 for…of語句　46

3.3.7 for…in語句　47

3.4 函數　48

3.4.1 定義函數的基本方法　48

3.4.2 arguments對象　50

3.4.3 實例：楊輝三角　51

3.4.4 變量的作用域　53

3.4.5 函數作為函數的參數　55

3.4.6 箭頭函數　57

3.5 異常處理　58

本章小結　60

習題3　61

 

第4章　JavaScript中的對象

4.1 理解對象的含義　62

4.1.1 理解常見的“類-對象”結構　63

4.1.2 理解JavaScript中的對象　64

4.1.3 在JavaScript中創建對象　65

4.2 時間日期：Date對象　70

4.3 數學計算：Math對象　73

4.4 基本類型與裝箱　76

4.4.1 Boolean　77

4.4.2 Number　77

4.4.3 String　78

4.5 BOM簡介　79

4.5.1 window對象　79

4.5.2 location對象　82

4.5.3 navigator對象　83

4.5.4 screen對象　85

4.5.5 history對象　85

本章小結　88

習題4　88

 

第5章　在JavaScript中使用集合

5.1 數組　90

5.1.1 數組的基本操作　90

5.1.2 作為不同數據結構的數組　92

5.2 對象　96

5.3 集合類型　98

5.3.1 Map集合　98

5.3.2 Set集合　99

本章小結　101

習題5　101

 

第6章　類與原型鏈

6.1 使用類語法實現封裝　103

6.1.1 類的聲明與定義　103

6.1.2 通過類創建對象　104

6.1.3 定義方法與調用方法　105

6.1.4 存取器　106

6.1.5 static　108

6.1.6 instanceof運算符　108

6.2 使用類語法實現繼承　109

6.3 基於構造函數和原型的面向對象機制　112

6.3.1 封裝　112

6.3.2 繼承　113

6.3.3 原型與原型鏈　115

本章小結　118

習題6　118

 

第7章　DOM

7.1 網頁中的DOM框架　120

7.2 DOM中的節點　121

7.2.1 元素節點　121

7.2.2 文本節點　122

7.2.3 屬性節點　122

7.3 通過JavaScript訪問DOM　122

7.3.1 訪問節點　123

7.3.2 檢測節點類型　124

7.3.3 父子兄關系　125

7.3.4 節點的屬性　128

7.3.5 創建和操作節點　129

7.4 DOM與CSS　132

7.4.1 HTML、CSS、JavaScript三位一體　133

7.4.2 className屬性　133

7.5 事件　134

7.5.1 事件與事件流　135

7.5.2 事件監聽　136

7.5.3 事件對象　138

7.6 動手實踐：動態控製表格　139

7.6.1 動態添加　140

7.6.2 修改單元格內容　142

7.6.3 動態刪除　143

本章小結　146

習題7　146

 

第8章　綜合案例一：以迭代方式開發計算器

8.1 案例概述　147

8.2 更新屏幕　149

8.3 按鈕操作　150

8.4 輸入數字　151

8.5 輸入小數點　153

8.6 處理運算符　153

8.7 重置計算器　156

8.8 修復小數點錯誤　157

8.9 重構事件監聽器　157

8.10 浮點精度　158

*8.11 實現先乘除後加減　158

*8.12 實現支持括號　160

本章小結　165

 

【下篇】　jQuery程序開發

 

第9章　jQuery基礎

9.1 jQuery概述　168

9.1.1 jQuery簡介　168

9.1.2 下載並使用jQuery　169

9.2 jQuery的$　170

9.2.1 選擇器　170

9.2.2 功能函數前綴　172

9.2.3 window.onload　173

9.2.4 創建DOM元素　173

9.2.5 擴展jQuery　174

9.2.6 沖突問題　176

本章小結　176

習題9　176

 

第 10章　jQuery選擇器與管理結果集

10.1 選擇器　178

10.1.1 屬性選擇器　178

10.1.2 包含選擇器　180

10.1.3 位置選擇器　181

10.1.4 過濾選擇器　184

10.1.5 反向選擇器　186

10.2 遍歷DOM　187

10.2.1 children()　187

10.2.2 parent()和parents()　189

10.2.3 siblings()　191

10.3 管理結果集　193

10.3.1 獲取選中元素的個數　193

10.3.2 提取元素　194

10.3.3 添加、刪除、過濾　196

10.3.4 查找　200

10.3.5 遍歷　201

10.4 jQuery鏈　202

本章小結　202

習題10　203

 

第 11章　使用jQuery控制DOM

11.1 標記的屬性　204

11.1.1 獲取屬性的值　205

11.1.2 設置屬性的值　206

11.1.3 刪除屬性　208

11.2 元素的樣式　209

11.2.1 添加、刪除CSS類別　209

11.2.2 動態切換　210

11.2.3 直接獲取、設置樣式　210

11.3 頁面的元素　212

11.3.1 直接獲取和編輯內容　212

11.3.2 添加元素　214

11.3.3 刪除元素　218

11.3.4 克隆元素　220

11.4 表單元素的值　222

11.4.1 獲取表單元素的值　222

11.4.2 設置表單元素的值　223

本章小結　224

習題11　224

 

第 12章　jQuery事件

12.1 事件監聽　226

12.2 刪除事件　229

12.3 事件對象　230

12.4 事件觸發　232

12.5 事件的動態交替　233

12.5.1 hover事件的交替　233

12.5.2 click事件的交替　234

12.6 事件委托　235

12.7 實例：快餐在線　237

12.7.1 框架搭建　237

12.7.2 添加事件　239

12.7.3 樣式　241

本章小結　244

習題12　244

 

第 13章　jQuery的功能函數

13.1 處理JavaScript對象　245

13.1.1 遍歷　245

13.1.2 數據過濾　247

13.1.3 數組的轉化　248

13.1.4 數組元素的查找　251

13.2 獲取外部代碼　252

本章小結　253

習題13　254

 

第 14章　jQuery與AJAX

14.1 認識AJAX　255

14.1.1 AJAX的基本概念　255

14.1.2 AJAX的組成部分　257

14.2 獲取異步數據　258

14.2.1 傳統方法　258

14.2.2 jQuery的load()方法　259

14.3 GET與POST　261

14.4 控制AJAX　263

14.4.1 設置AJAX訪問服務器的細節　263

14.4.2 全局設定AJAX　266

14.4.3 AJAX事件　267

14.4.4 實例：模擬百度的數據加載　269

14.5 實例：利用jQuery製作自動提示的文本框　271

14.5.1 框架結構　271

14.5.2 匹配用戶輸入　272

14.5.3 顯示清除提示框　273

本章小結　277

習題14　277

 

第 15章　jQuery製作動畫與特效

15.1 元素的顯示和隱藏　279

15.1.1 show()和hide()　279

15.1.2 實例：多級菜單　280

15.1.3 toggle()　282

15.2 淡入淡出的特效　283

15.2.1 再探討show()、hide()和toggle()　283

15.2.2 fadeIn()和fadeOut()　284

15.2.3 自定義變化透明度　286

15.3 幻燈片特效　287

15.4 自定義動畫　289

本章小結　290

習題15　290

 

第 16章　jQuery插件

16.1 模擬加入購物車　292

16.1.1 鼠標拖曳　292

16.1.2 拖入購物車　296

16.1.3 模態框提示　298

16.2 流行的Tab菜單　300

16.3 輪播圖　303

16.3.1 使用前準備　304

16.3.2 使用輪播圖插件　304

16.3.3 調整輪播圖效果　306

本章小結　308

習題16　308

 

第 17章　綜合案例二：網頁留言本

17.1 基本留言本　309

17.2 改用AJAX方式實現留言本　311

17.2.1 讀取留言列表　311

17.2.2 保存並返回新留言　312

17.2.3 留言本入口頁面　312

17.3 對表單數據進行驗證　314

本章小結　315

 

第 18章　綜合案例三：網頁圖片剪裁器

18.1 整體分析　317

18.2 頁面HTML結構和CSS樣式　318

18.2.1 HTML結構　318

18.2.2 選區部分的結構與樣式　319

18.3 實現核心邏輯　320

18.3.1 定義基礎類　320

18.3.2 定義Cropper類　322

18.4 使用jQuery處理交互邏輯　326

18.4.1 初始化圖片　326

18.4.2 控制選區　327

18.4.3 最終剪裁　331

本章小結　332