JavaScript + Vue + React 全程實例

鄭均輝，平頂山學院講師，西安電子科技大學計算機應用工程專業，碩士。主要從事軟件工程，模式識別、物聯網方面的研究。
薛燚，高級工程師，長期從事網站開發，擅長各種Web前端框架技術，精通JavaScript、jQuery、HTML、CSS等技術

目 錄

第1章 JavaScript環境搭建 1

1.1 HTML中書寫JavaScript的幾種方式 1

1.2 選擇開發工具 2

1.3 JavaScript的調試 3

第2章 JavaScript控製表單 8

2.1 JavaScript與HTML表單 8

2.2 JavaScript遍歷表單 8

2.3 通過name和id訪問表單元素 10

2.4 動態修改表單控件的值 12

2.5 獲取表單內文本框的數量 13

2.6 修改表單的提交方式 15

2.7 動態指定表單的提交方式 17

2.8 動態設置焦點控件 19

2.9 動態獲取焦點控件 20

2.10 初始化表單裡的所有控件 21

2.11 複選框全選、取消及判斷是否

選中的方法 24

2.12 如何使用隱藏控件 26

2.13 簡單的數字及字符操作 29

2.14 高亮顯示表單中的焦點控件 31

2.15 動態添加、刪除下拉菜單選項 33

第3章 JavaScript控制DOM 37

3.1 JavaScript與HTML DOM 37

3.2 通過id獲取網頁中的元素對象 37

3.3 通過name獲取網頁中的複選框 39

3.4 通過標籤名獲取網頁中的多個文本 42

3.5 遍歷網頁元素的全部屬性 44

3.6 動態創建網頁新文本段落 46

3.7 動態刪除網頁文本段落 48

3.8 動態替換段落的文本內容 50

3.9 如何主動觸發按鈕單擊事件 51

3.10 動態修改元素屬性值 53

3.11 如何獲取下拉列表的選項 55

3.12 實現電話撥號鍵盤 57

第4章 按鈕特效 59

4.1 按鈕概述 59

4.2 為按鈕添加背景顏色 59

4.3 不同按鈕提交到不同的表單地址 60

4.4 避免回車鍵自動提交表單 62

4.5 按鈕在單擊後自動失效 64

4.6 為刪除功能按鈕添加確認提醒 66

4.7 根據狀態展示不同樣式按鈕 67

4.8 註冊按鈕倒計時效果 70

4.9 計時器按鈕 72

4.10 閱讀完協議才可以單擊的註冊按鈕 75

第5章 鏈接特效 78

5.1 鏈接概述 78

5.2 帶下劃線的鏈接 78

5.3 改變鏈接的click事件 80

5.4 關閉窗口的“X”鏈接 82

5.5 用鏈接模擬一個按鈕 83

5.6 用鏈接替代表單提交按鈕 85

5.7 動態修改一個鏈接的地址 87

5.8 讓所有鏈接都在新窗口打開 88

5.9 讓頁面所有的超鏈接都失效 90

5.10 為鏈接地址新加一個參數 91

5.11 返回頁面頂部的鏈接 93

5.12 需要確認的超鏈接 95

第6章 圖片特效 97

6.1 圖片概述 97

6.2 圖片比例縮放 97

6.3 圖片放大鏡特效 99

6.4 圖片在層裏居中 102

6.5 讓圖片自適應框的大小 104

6.6 為圖片加上邊框 106

6.7 顯示局部圖片 108

6.8 動態加載圖片 110

6.9 延遲加載圖片 112

6.10 重新加載驗證碼圖片 114

第7章 文本框和下拉列錶框特效 116

7.1 文本框和下拉列錶框概述 116

7.2 只帶下劃線的文本框 117

7.3 用正則表達式驗證Email格式 118

7.4 首字母或全部字母大寫 120

7.5 只能輸入數字的文本框 122

7.6 判斷字符的個數 124

7.7 文本框獲取焦點後自動清除內容 126

7.8 清空所有文本型輸入框 127

7.9 校驗電話號碼格式 129

7.10 鼠標劃過文本框改變其背景色 132

7.11 設置下拉列錶框的值 133

7.12 動態添加下拉列錶框選項 135

7.13 動態刪除下拉列錶框選項 138

7.14 二級聯動下拉列錶框 140

7.15 三級聯動下拉列錶框 143

7.16 可輸入的下拉列錶框 147

第8章 日期和時間特效 150

8.1 日期和時間概述 150

8.2 在標題欄顯示當前日期 150

8.3 根據時間動態顯示標題歡迎詞 151

8.4 根據月份動態顯示背景 153

8.5 格式化日期的方法 155

8.6 判斷今天是否為節假日 157

8.7 每秒刷新的時間展示效果 160

8.8 時間計時器 162

8.9 時間倒計時器 164

8.10 計算時間差 167

8.11 計算日期間隔 169

8.12 網頁標題體現月進度 171

8.13 用表格製作日曆 173

8.14 日期輸入框 176

8.15 顯示網頁登錄時間 181

第9章 網頁特效 183

9.1 網頁概述 183

9.2 打開新頁面 183

9.3 打開指定大小的窗口 185

9.4 獲取打開子窗口的父窗口 187

9.5 父子窗口之間數據交互 190

9.6 刷新當前頁面 193

9.7 屏蔽鼠標右鍵 195

9.8 屏蔽上下文菜單 195

9.9 屏蔽複製功能 196

9.10 屏蔽選擇操作 197

9.11 防止網頁被“frame” 198

9.12 隱藏頁面滾動條 201

9.13 最小化、最大化和關閉窗口 202

9.14 腳本永不出錯 204

9.15 獲取瀏覽器信息 206

9.16 獲取瀏覽器窗口尺寸 208

9.17 屏蔽鍵盤功能鍵 210

9.18 頁面窗口動畫縮放 211

9.19 定時關閉頁面 213

9.20 修改瀏覽器標題 214

第10章 DIV+CSS特效 217

10.1 DIV與層疊樣式表概述 217

10.2 同時改變多個DOM樣式 217

10.3 彈出層 221

10.4 用層模擬確認框 224

10.5 隱藏層 227

10.6 可拖動的層 228

10.7 遮罩層效果 231

10.8 Tab選項卡 235

第11章 Ajax應用 239

11.1 Ajax概述 239

11.2 Ajax基礎 239

11.3 Ajax解析文本 241

11.4 Ajax解析XML 243

11.5 Ajax解析JSON 246

11.6 實現一個Ajax框架 250

11.7 使用Ajax框架輕鬆加載文件 253

11.8 Ajax跨域異步交互 260

第12章 React開發 265

12.1 React概述 265

12.2 第一個React應用 266

12.3 React渲染更新元素 268

12.4 React虛擬DOM 270

12.5 React JSX初步 272

12.6 在JSX中使用JavaScript表達式 274

12.7 在JSX中使用JavaScript函數 276

12.8 React Components設計模式 279

12.9 React Components參數 282

12.10 React Components複合 284

12.11 React Components狀態 286

12.12 React Components生命週期 290

第13章 Vue.js開發 296

13.1 Vue.js概述 296

13.2 第一個Vue.js應用 297

13.3 Vue.js構造器 299

13.4 Vue.js構造器屬性修改 301

13.5 Vue.js構造器參數引用 307

13.6 Vue.js模板語法 309

13.7 Vue.js條件循環語句 314

13.8 Vue.js事件監聽處理 317