JavaScript+Vue+React全程實例

目 錄
第1章 JavaScript環(huán)境搭建 1
1.1 HTML中書寫JavaScript的幾種方式 1
1.2 選擇開發(fā)工具 2
1.3 JavaScript的調(diào)試 3
第2章 JavaScript控制表單 8
2.1 JavaScript與HTML表單 8
2.2 JavaScript遍歷表單 8
2.3 通過name和id訪問表單元素 10
2.4 動態(tài)修改表單控件的值 12
2.5 獲取表單內(nèi)文本框的數(shù)量 13
2.6 修改表單的提交方式 15
2.7 動態(tài)指定表單的提交方式 17
2.8 動態(tài)設(shè)置焦點控件 19
2.9 動態(tài)獲取焦點控件 20
2.10 初始化表單里的所有控件 21
2.11 復(fù)選框全選、取消及判斷是否
選中的方法 24
2.12 如何使用隱藏控件 26
2.13 簡單的數(shù)字及字符操作 29
2.14 高亮顯示表單中的焦點控件 31
2.15 動態(tài)添加、刪除下拉菜單選項 33
第3章 JavaScript控制DOM 37
3.1 JavaScript與HTML DOM 37
3.2 通過id獲取網(wǎng)頁中的元素對象 37
3.3 通過name獲取網(wǎng)頁中的復(fù)選框 39
3.4 通過標(biāo)簽名獲取網(wǎng)頁中的多個文本 42
3.5 遍歷網(wǎng)頁元素的全部屬性 44
3.6 動態(tài)創(chuàng)建網(wǎng)頁新文本段落 46
3.7 動態(tài)刪除網(wǎng)頁文本段落 48
3.8 動態(tài)替換段落的文本內(nèi)容 50
3.9 如何主動觸發(fā)按鈕單擊事件 51
3.10 動態(tài)修改元素屬性值 53
3.11 如何獲取下拉列表的選項 55
3.12 實現(xiàn)電話撥號鍵盤 57
第4章 按鈕特效 59
4.1 按鈕概述 59
4.2 為按鈕添加背景顏色 59
4.3 不同按鈕提交到不同的表單地址 60
4.4 避免回車鍵自動提交表單 62
4.5 按鈕在單擊后自動失效 64
4.6 為刪除功能按鈕添加確認(rèn)提醒 66
4.7 根據(jù)狀態(tài)展示不同樣式按鈕 67
4.8 注冊按鈕倒計時效果 70
4.9 計時器按鈕 72
4.10 閱讀完協(xié)議才可以單擊的注冊按鈕 75
第5章 鏈接特效 78
5.1 鏈接概述 78
5.2 帶下劃線的鏈接 78
5.3 改變鏈接的click事件 80
5.4 關(guān)閉窗口的“X”鏈接 82
5.5 用鏈接模擬一個按鈕 83
5.6 用鏈接替代表單提交按鈕 85
5.7 動態(tài)修改一個鏈接的地址 87
5.8 讓所有鏈接都在新窗口打開 88
5.9 讓頁面所有的超鏈接都失效 90
5.10 為鏈接地址新加一個參數(shù) 91
5.11 返回頁面頂部的鏈接 93
5.12 需要確認(rèn)的超鏈接 95
第6章 圖片特效 97
6.1 圖片概述 97
6.2 圖片比例縮放 97
6.3 圖片放大鏡特效 99
6.4 圖片在層里居中 102
6.5 讓圖片自適應(yīng)框的大小 104
6.6 為圖片加上邊框 106
6.7 顯示局部圖片 108
6.8 動態(tài)加載圖片 110
6.9 延遲加載圖片 112
6.10 重新加載驗證碼圖片 114
第7章 文本框和下拉列表框特效 116
7.1 文本框和下拉列表框概述 116
7.2 只帶下劃線的文本框 117
7.3 用正則表達(dá)式驗證Email格式 118
7.4 首字母或全部字母大寫 120
7.5 只能輸入數(shù)字的文本框 122
7.6 判斷字符的個數(shù) 124
7.7 文本框獲取焦點后自動清除內(nèi)容 126
7.8 清空所有文本型輸入框 127
7.9 校驗電話號碼格式 129
7.10 鼠標(biāo)劃過文本框改變其背景色 132
7.11 設(shè)置下拉列表框的值 133
7.12 動態(tài)添加下拉列表框選項 135
7.13 動態(tài)刪除下拉列表框選項 138
7.14 二級聯(lián)動下拉列表框 140
7.15 三級聯(lián)動下拉列表框 143
7.16 可輸入的下拉列表框 147
第8章 日期和時間特效 150
8.1 日期和時間概述 150
8.2 在標(biāo)題欄顯示當(dāng)前日期 150
8.3 根據(jù)時間動態(tài)顯示標(biāo)題歡迎詞 151
8.4 根據(jù)月份動態(tài)顯示背景 153
8.5 格式化日期的方法 155
8.6 判斷今天是否為節(jié)假日 157
8.7 每秒刷新的時間展示效果 160
8.8 時間計時器 162
8.9 時間倒計時器 164
8.10 計算時間差 167
8.11 計算日期間隔 169
8.12 網(wǎng)頁標(biāo)題體現(xiàn)月進(jìn)度 171
8.13 用表格制作日歷 173
8.14 日期輸入框 176
8.15 顯示網(wǎng)頁登錄時間 181
第9章 網(wǎng)頁特效 183
9.1 網(wǎng)頁概述 183
9.2 打開新頁面 183
9.3 打開指定大小的窗口 185
9.4 獲取打開子窗口的父窗口 187
9.5 父子窗口之間數(shù)據(jù)交互 190
9.6 刷新當(dāng)前頁面 193
9.7 屏蔽鼠標(biāo)右鍵 195
9.8 屏蔽上下文菜單 195
9.9 屏蔽復(fù)制功能 196
9.10 屏蔽選擇操作 197
9.11 防止網(wǎng)頁被“frame” 198
9.12 隱藏頁面滾動條 201
9.13 最小化、最大化和關(guān)閉窗口 202
9.14 腳本永不出錯 204
9.15 獲取瀏覽器信息 206
9.16 獲取瀏覽器窗口尺寸 208
9.17 屏蔽鍵盤功能鍵 210
9.18 頁面窗口動畫縮放 211
9.19 定時關(guān)閉頁面 213
9.20 修改瀏覽器標(biāo)題 214
第10章 DIV+CSS特效 217
10.1 DIV與層疊樣式表概述 217
10.2 同時改變多個DOM樣式 217
10.3 彈出層 221
10.4 用層模擬確認(rèn)框 224
10.5 隱藏層 227
10.6 可拖動的層 228
10.7 遮罩層效果 231
10.8 Tab選項卡 235
第11章 Ajax應(yīng)用 239
11.1 Ajax概述 239
11.2 Ajax基礎(chǔ) 239
11.3 Ajax解析文本 241
11.4 Ajax解析XML 243
11.5 Ajax解析JSON 246
11.6 實現(xiàn)一個Ajax框架 250
11.7 使用Ajax框架輕松加載文件 253
11.8 Ajax跨域異步交互 260
第12章 React開發(fā) 265
12.1 React概述 265
12.2 第一個React應(yīng)用 266
12.3 React渲染更新元素 268
12.4 React虛擬DOM 270
12.5 React JSX初步 272
12.6 在JSX中使用JavaScript表達(dá)式 274
12.7 在JSX中使用JavaScript函數(shù) 276
12.8 React Components設(shè)計模式 279
12.9 React Components參數(shù) 282
12.10 React Components復(fù)合 284
12.11 React Components狀態(tài) 286
12.12 React Components生命周期 290
第13章 Vue.js開發(fā) 296
13.1 Vue.js概述 296
13.2 第一個Vue.js應(yīng)用 297
13.3 Vue.js構(gòu)造器 299
13.4 Vue.js構(gòu)造器屬性修改 301
13.5 Vue.js構(gòu)造器參數(shù)引用 307
13.6 Vue.js模板語法 309
13.7 Vue.js條件循環(huán)語句 314
13.8 Vue.js事件監(jiān)聽處理 317