一、BOM&DOM
1. BOM
BOM 是瀏覽器對象模型，就可以理解成是當前瀏覽器打開的窗口
window對象 就是 BOM
通過window對象 可以操作瀏覽器本身 它里面提供了一些操作當前瀏覽器的對象和方法
1.1. 各種彈框：
window.alert('消息框')
window.prompt('輸入框')
window.confirm('確認框')
1.2. 打開和關閉窗口：
open()方法，打開新的窗口
window.open('http://baidu.com')
close()方法，關閉當前窗口
window.close()
1.3. 通用方法
window.parseInt('123') //將字符串的'123'，強轉為整型的123
window.parseFloat('12.12') //將字符串的'12.12'，強轉為浮點型的12.12
window.isNaN('abc') //判斷'abc'，不是數值數據，成立返回true
1.4. 定時器方法：
指定毫秒后，執行的定時器
window.setTimeout()
每隔指定的毫秒后，執行的定時器
window.setInterval()
1.5. 常用屬性
location屬性：
location是window對象的屬性，該屬性用于設置網頁的地址欄
location.href屬性 表示跳轉，當前瀏覽器的地址欄發生了跳轉
其實超鏈接標簽的內部就是對location.href屬性的封裝
window.location.href = 'http://baidu.com'
location.reload()方法 表示刷新當前地址欄（刷新當前窗口）
window.location.reload()
history屬性：
history是window對象的屬性，該屬性用于設置網頁的瀏覽歷史記錄
forward()前進
window.history.forward()
back()后退
window.history.back()
go()方法，既可以實現前進，也可以實現后退
window.history.go(1) //前進一次
window.history.go(3) //前進三次
window.history.go(-1) //后退一次
window.history.go(-3) //后退三次
2. DOM
DOM 文檔對象模型，就是當前網頁里面的所有內容。
因為網頁是在瀏覽器中顯示的，整個瀏覽器是BOM，所以DOM其實是BOM的一部分
BOM 就是 window對象 DOM 就是 document對象
使用DOM獲取網頁元素：
如果該元素，是網頁的必備元素，而且只能有一個，可以通過document對象直接獲取。
比如：head,title,body
document.body.style.border = "1px solid #ccc"
document.title = 'helloworld'
更多的時候，我要需要獲取網頁中的指定元素，這就需要專門的方法來獲取了。
getElementById()方法，根據元素的id屬性值來獲取指定的元素。
注意：如果網頁中id屬性值重復，只獲取第一個。
getElementsByTagName()方法，根據元素的標簽名獲取所有該元素。
getElementsByClassName()方法，根據元素的類選擇器名稱獲取所有該元素。
getElementsByName()方法，根據元素的name屬性值獲取所有該元素。
簡單的封裝一下：
<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">function $(id){
return document.getElementById(id)
}
</pre>
querySelector()方法，根據選擇器的名稱返回元素，如果有多個元素，只返回第一個元素。
querySelectorAll()方法，根據選擇器的名稱返回所有的元素。
注意：querySelectorAll()方法，返回的是集合對象，不是數組對象。可以利用展開運算符，將集合對象轉為數組對象。
轉為數組對象后，就可以使用數組相關的方法了。
let divs2 = [...divs]
querySelector()和querySelectorAll()方法里面也可以寫所有的css選擇器。
3. 操作DOM元素的內容和樣式
操作DOM的樣式，有多種方式：
通過style屬性直接設置
通過className屬性設置類選擇器
也可以通過classList屬性添加多個類選擇器
操作DOM的內容：
- innerText屬性，用于獲取 和 操作 DOM的文本內容。
- innerHTML屬性，用于獲取 和 操作 DOM的HTML內容。
4. 操作DOM元素的屬性
獲取和設置標簽自帶的屬性(原生屬性)，直接點
let src = img.src //src是圖片標簽的原生屬性
獲取和設置標簽自定義的屬性，需要通過getAttribute()和setAttribute()方法
setAttribute()方法，設置元素的屬性值，需要傳兩個參數（屬性名和屬性值）
getAttribute()方法，獲取元素的屬性值，只需要傳一個參數（屬性名）
5. 創建和刪除DOM元素
createElement()方法，用于創建DOM元素
appendChild()方法，用于在當前DOM元素中添加子元素
刪除元素有兩種寫法：
自刪 remove()方法，是元素刪除自己
通過父級刪除子級 removeChild()方法，是刪除元素里面指定的子元素
補充1：onclick是點擊事件，on表示當，click表示點擊
補充2：parentElement和parentNode屬性，返回父級元素
二、鼠標事件
1. 鼠標事件
// 點擊事件
onclick
// 雙擊事件
ondblclick
// 鼠標右鍵點擊事件
oncontextmenu
// 鼠標進入事件
// onmouseover 比 onmouseenter 先執行
onmouseenter
onmouseover
// 鼠標離開事件
// onmouseout 比 onmouseleave 先執行
onmouseleave
onmouseout
注意：如果元素里面存在子元素，鼠標在元素中移動時會反復觸發 onmouseover 和 onmouseout
// 鼠標移動事件
onmousemove
// 鼠標按下事件
onmousedown
// 鼠標彈起事件
onmouseup
2. 視口寬高
window.innerWidth 返回視口寬度
window.innerHeight 返回視口高度
3. 案例
- 購物車
- 復選框全選（checked屬性，返回復選框的狀態）
- 購物車+復選框全選
- 點擊div消失
三、焦點事件&阻止默認行為
1. 焦點事件
獲得焦點事件
onfocus
失去焦點事件
onblur
2. 阻止默認行為
e.preventDefault()
比如：阻止超鏈接跳轉，阻止右鍵點擊事件
3. 案例
-
拖動框效果
dom.offsetLeft 獲取元素的默認左邊距
dom.offsetTop 獲取元素的默認上邊距
window.innerWidth 視口寬度
window.innerHeight 視口高度
dom.offsetWidth 獲取元素可見寬度(width+border+padding)
dom.offsetHeight 獲取元素可見高度(height+border+padding)
e.pageX 鼠標指針到X軸坐標
e.pageY 鼠標指針到Y軸坐標
-
右鍵菜單
e.target 獲取具體的元素
e.preventDefault() 阻止默認行為
-
選項卡
classList.remove() 移除樣式
classList.add() 添加樣式
四、鍵盤事件
1. 鍵盤事件
onkeydown 按鍵按下事件
onkeypress 按鍵產生字符事件
onkeyup 按鍵彈起事件
e.keyCode 返回按鍵碼
注意：注冊事件時要加on，觸發時不需要on
2.案例
- 打字游戲
- 貪吃蛇
五、正則表達式
正則表達式：其實就是一種匹配規則，用于檢索字符串
定義正則表達式的兩種方式：1.直接定義 2.構造函數定義
<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">// 1.直接定義
let reg1 = /abc/
// 2.構造函數定義
let reg2 = new RegExp('abc')
let str = '歡迎學習abc正則表達式'
// test()方法，用于檢查一個字符串中，是否有滿足匹配規則的字符串。
console.log(reg1.test(str));
// 其實用字符串自己的includes()方法，也能解決上面的問題
console.log(str.includes('abc'));
</pre>
那么正則表達式正則強大的地方是它可以寫 通配符(擁有特殊含義的字符)
1. 通配符
\w 表示：字母、數字、下劃線
\W 表示：除了字母、數字、下劃線以外的字符
\d 表示：數字
\D 表示：非數字
^ 表示：以^符號后面的第一個字符開頭
<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><annotation encoding="application/x-tex">表示：以</annotation></semantics></math>表示：以符號前面的第一個字符結尾
{n} 表示：重復n次
{n,m} 表示：重復n到m次
[xyz] 表示：其中任意一個字符
- 表示：重復前一項1次或多次 等價于 {1,}
- 表示：重復前一項0次或多次 等價于 {0,}
? 表示：重復前一項0次或1次 等價于 {0,1}
. 表示：除了換行符以外的任意一個字符
. 表示：.字符 ^ 表示：^ <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><annotation encoding="application/x-tex">表示：</annotation></semantics></math>表示：
可以用()將多個字符作為一個整體
\w 等價于 [0-9a-zA-Z_]
| 表示：或者
[\u4E00-\u9FA5] 是常用漢字的unicode編碼范圍
2. 使用正則表達式驗證表單
驗證學生的信息
3. 正則表達式配合字符串的方法
-
replace()方法
默認情況下，replace()方法，只會替換字符串中匹配的第一段內容
使用正則表達式，添加全局匹配修飾符g，可以替換匹配全部內容
使用正則表達式，添加忽略大小寫修飾符i，在匹配內容時會忽略大小寫
-
search()方法
可以通過正則表達式查找位置
六、事件其他
1. 阻止事件冒泡
默認情況下，觸發子元素的事件時，會同時觸發父元素相同的事件，這就叫做事件冒泡
e.stopPropagation() 阻止事件冒泡
e.preventDefault() 取消默認行為
2. 添加事件的幾種方式
- 在元素中通過onXXX定義事件，指定一個事件方法
- 先獲取元素，再給元素綁定事件
- 通過addEventListener方法，給元素注冊事件，傳遞兩個參數：事件名和事件方法
- 通過removeEventListener方法，移除指定的事件方法，傳遞兩個參數：事件名和事件方法
3. 頁面的加載事件
- window.onload頁面加載事件
頁面的加載事件，該事件會在頁面中的所有內容都加載完畢后執行
注意：所有內容包括：標簽結構，樣式文件，圖片文件，音頻文件，視頻文件...
如果網頁內容過大，會導致該事件延遲執行
<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">window.onload = function(){
alert('頁面加載完成！')
}
</pre>
- DOMContentLoaded頁面加載事件
只要頁面中的DOM結構加載完畢后，就會立即執行
注意：該事件只能采用事件監聽的方式添加，沒有提供快捷方式
<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">window.addEventListener('DOMContentLoaded',function(){
alert('頁面結構加載完畢！')
})
</pre>
七、AJAX & JSON
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
AJAX技術 不需要刷新頁面的情況下，就可以產生局部刷新的效果
最初AJAX技術操作的是XML標簽，現在絕大多數情況下操作的是JSON格式的字符串
1. json格式數據
<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">// json對象
// 注意：對象的屬性名，必須要雙引號引起來
let obj = {
"name": "張三",
"age": 20,
"gender": "男"
}
// json數組
let arr = [
{
"name": "張三",
"age": 20,
"gender": "男"
},
{
"name": "李四",
"age": 22,
"gender": "女"
}
]
</pre>
2. AJAX對象
<pre data-role="codeBlock" data-info="js" class="language-javascript" style="padding: 0.8em; overflow: auto; line-height: 1.4; border: rgb(214, 214, 214); border-radius: 3px; font-size: 0.85em !important; margin-top: 0px; margin-bottom: 16px; color: rgb(51, 51, 51); background: rgb(245, 245, 245); font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; tab-size: 8; hyphens: none;">// 01.創建xhr對象 (原生ajax對象)
let xhr = new XMLHttpRequest()
// 02.初始化請求（GET請求，POST請求）
// 第一個參數是請求方式：比如GET，第二個參數是請求地址：比如192.168.11.12:81/Server/List
xhr.open('GET','./data/koubei.json')
// 03.發送請求
xhr.send()
// 04.監聽讀取狀態改變事件
xhr.onreadystatechange = function(){
// 請求已經完成
if(xhr.readyState===4){
// 請求狀態為成功
if(xhr.status === 200){
// xhr.responseText 返回響應體，它是一個json格式的字符串
// 我們需要將該字符串轉為js對象
let data = JSON.parse(xhr.responseText)
}
}
}
</pre>
readyState 是讀取狀態：
0: 請求未發送
1：服務器連接已建立（請求已經發送）
2：請求已接收（服務器已經接收到該請求）
3：請求處理中（服務器正則準備你要的數據）
4：請求已完成，且響應已就緒
status 是響應的狀態碼：
200：成功
404：請求資源錯誤
500：服務器端錯誤
3. 開始搭建學生管理系統
-
登錄頁
GET請求方式的參數，直接拼接在url里面
?后面的內容是請求參數，就好比是在調用一個帶參數的方法一樣，需要傳參數
多個參數用&符號隔開
登錄成功后，跳轉到首頁：location.href = './index.html'
-
首頁
使用
<iframe>嵌入外部頁面查詢全部學生信息
八、學生管理系統
1. 查詢學生信息+篩選+分頁
封裝一個通用方法：function loadData(studentName,sex,pageIndex,pageSize)
2. 添加學生
將對象里面的數據，轉為json字符串
JSON.stringify(對象)
將對象里面的數據，轉為url字符串，寫一個方法進行轉換
studentNo=12345&loginPwd=123123&studentName=周杰倫
設置請求頭：
- xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
- xhr.setRequestHeader('Content-Type','application/json')
3.修改學生
- 先根據學號查詢指定學生
- 再修改該學生信息
4.刪除學生
- 刪除前提示用戶是否確定刪除
