JavaScript+Vue+React全程實(shí)例

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