一、BOM&DOM

1. BOM

BOM 是瀏覽器對(duì)象模型，就可以理解成是當(dāng)前瀏覽器打開(kāi)的窗口

window對(duì)象 就是 BOM

通過(guò)window對(duì)象 可以操作瀏覽器本身 它里面提供了一些操作當(dāng)前瀏覽器的對(duì)象和方法

1.1. 各種彈框：

window.alert('消息框')

window.prompt('輸入框')

window.confirm('確認(rèn)框')

1.2. 打開(kāi)和關(guān)閉窗口：

open()方法，打開(kāi)新的窗口

window.open('http://baidu.com')

close()方法，關(guān)閉當(dāng)前窗口

window.close()

1.3. 通用方法

window.parseInt('123') ????//將字符串的'123'，強(qiáng)轉(zhuǎn)為整型的123

window.parseFloat('12.12') ????//將字符串的'12.12'，強(qiáng)轉(zhuǎn)為浮點(diǎn)型的12.12

window.isNaN('abc') ????//判斷'abc'，不是數(shù)值數(shù)據(jù)，成立返回true

1.4. 定時(shí)器方法

1. 指定毫秒后，執(zhí)行的定時(shí)器

window.setTimeout()

setTimeout(() => {

????// 跳轉(zhuǎn)到新的地址欄

????window.location.

????// 刷新當(dāng)前窗口

????// window.location.reload() ?// 刷新

}, 5000)

2. 每隔指定的毫秒后，執(zhí)行的定時(shí)器

window.setInterval()

1.5. 常用屬性

location屬性：

location是window對(duì)象的屬性，該屬性用于設(shè)置網(wǎng)頁(yè)的地址欄

location.href屬性 表示跳轉(zhuǎn)，當(dāng)前瀏覽器的地址欄發(fā)生了跳轉(zhuǎn)

其實(shí)超鏈接標(biāo)簽的內(nèi)部就是對(duì)location.href屬性的封裝

window.location.href = 'http://baidu.com'

location.reload()方法 表示刷新當(dāng)前地址欄（刷新當(dāng)前窗口）

window.location.reload()

history屬性：

history是window對(duì)象的屬性，該屬性用于設(shè)置網(wǎng)頁(yè)的瀏覽歷史記錄

forward()前進(jìn)方法

window.history.forward()

back()后退方法

window.history.back()

go(number n)方法，既可以實(shí)現(xiàn)前進(jìn)，也可以實(shí)現(xiàn)后退

// n為正整數(shù)時(shí)前進(jìn)n次，為負(fù)整數(shù)時(shí)后退|n|次

window.history.go(1) //前進(jìn)一次

window.history.go(3) //前進(jìn)三次

window.history.go(-1) //后退一次

window.history.go(-3) //后退三次

2. DOM

DOM 文檔對(duì)象模型，就是當(dāng)前網(wǎng)頁(yè)里面的所有內(nèi)容。

因?yàn)榫W(wǎng)頁(yè)是在瀏覽器中顯示的，整個(gè)瀏覽器是BOM，所以DOM其實(shí)是BOM的一部分

BOM 就是 window對(duì)象?

DOM 就是 document對(duì)象

使用DOM獲取網(wǎng)頁(yè)元素：

如果該元素，是網(wǎng)頁(yè)的必備元素，而且只能有一個(gè)，可以通過(guò)document對(duì)象直接獲取。

比如：head,title,body? (頭部，標(biāo)題，主體)

document.body.style.border = "1px solid #ccc"

document.title = 'helloworld'

更多的時(shí)候，我要需要獲取網(wǎng)頁(yè)中的指定元素，這就需要專(zhuān)門(mén)的方法來(lái)獲取了。

getElementById()方法，根據(jù)元素的id屬性值來(lái)獲取指定的元素。

注意：如果網(wǎng)頁(yè)中id屬性值重復(fù)，只獲取第一個(gè)。

getElementsByTagName()方法，根據(jù)元素的標(biāo)簽名獲取所有該元素。

getElementsByClassName()方法，根據(jù)元素的類(lèi)選擇器名稱(chēng)獲取所有該元素。

getElementsByName()方法，根據(jù)元素的name屬性值獲取所有該元素。

簡(jiǎn)單的封裝一下：

// 傳一個(gè)id屬性值，返回一個(gè)包含所有以該參數(shù)值為id值的元素的集合對(duì)象

function $(id) {

????return document.getElementById(id)

}

querySelector()方法，根據(jù)選擇器的名稱(chēng)返回元素，如果有多個(gè)元素，只返回第一個(gè)元素。

querySelectorAll()方法，根據(jù)選擇器的名稱(chēng)返回所有的元素。

注意：querySelectorAll()方法，返回的是集合對(duì)象，不是數(shù)組對(duì)象。可以利用展開(kāi)運(yùn)算符，將集合對(duì)象轉(zhuǎn)為數(shù)組對(duì)象。

轉(zhuǎn)為數(shù)組對(duì)象后，就可以使用數(shù)組相關(guān)的方法了。

let divs2 = [...divs]

querySelector()和querySelectorAll()方法里面也可以寫(xiě)所有的css選擇器。

3. 操作DOM元素的內(nèi)容和樣式

操作DOM的樣式，有多種方式：

????1. 通過(guò)style屬性直接設(shè)置

????2. 通過(guò)className屬性設(shè)置類(lèi)選擇器

????3. 也可以通過(guò)classList屬性添加多個(gè)類(lèi)選擇器

操作DOM的內(nèi)容：

????1. innerText屬性，用于獲取 和 操作 DOM的文本內(nèi)容。

????2. innerHTML屬性，用于獲取 和 操作 DOM的HTML內(nèi)容。

4. 操作DOM元素的屬性

獲取和設(shè)置標(biāo)簽自帶的屬性(原生屬性)，直接點(diǎn)

let src = img.src //src是圖片標(biāo)簽的原生屬性

獲取和設(shè)置標(biāo)簽自定義的屬性，需要通過(guò)getAttribute()和setAttribute()方法

setAttribute()方法，設(shè)置元素的屬性值，需要傳兩個(gè)參數(shù)（屬性名和屬性值）

getAttribute()方法，獲取元素的屬性值，只需要傳一個(gè)參數(shù)（屬性名）

5. 創(chuàng)建和刪除DOM元素

createElement()方法，用于創(chuàng)建DOM元素

appendChild()方法，用于在當(dāng)前DOM元素中添加子元素

刪除元素有兩種寫(xiě)法：

????1. 自刪?

? ??????remove()方法，是元素刪除自己

????2. 通過(guò)父級(jí)刪除子級(jí)?

????????removeChild()方法，是刪除元素里面指定的子元素

補(bǔ)充1：onclick是點(diǎn)擊事件，on表示當(dāng)，click表示點(diǎn)擊

補(bǔ)充2：parentElement和parentNode屬性，返回父級(jí)元素

二、鼠標(biāo)事件

1. 鼠標(biāo)事件

// 點(diǎn)擊事件

onclick

// 雙擊事件

ondblclick

// 鼠標(biāo)右鍵點(diǎn)擊事件

oncontextmenu

// 鼠標(biāo)進(jìn)入事件

// onmouseover 比 onmouseenter 先執(zhí)行

onmouseenter

onmouseover

// 鼠標(biāo)離開(kāi)事件

// onmouseout 比 onmouseleave 先執(zhí)行

onmouseleave

onmouseout

注意：如果元素里面存在子元素，鼠標(biāo)在元素中移動(dòng)時(shí)會(huì)反復(fù)觸發(fā) onmouseover 和 onmouseout

// 鼠標(biāo)移動(dòng)事件

onmousemove

// 鼠標(biāo)按下事件

onmousedown

// 鼠標(biāo)彈起事件

onmouseup

2. 視口寬高

window.innerWidth 返回視口寬度

window.innerHeight 返回視口高度

3. 案例

購(gòu)物車(chē)

????復(fù)選框全選（checked屬性，返回復(fù)選框的狀態(tài)）

????購(gòu)物車(chē)+復(fù)選框全選

????點(diǎn)擊div消失

三、焦點(diǎn)事件&阻止默認(rèn)行為

1. 焦點(diǎn)事件

獲得焦點(diǎn)事件

onfocus

失去焦點(diǎn)事件

onblur

2. 阻止默認(rèn)行為

e.preventDefault()

比如：阻止超鏈接跳轉(zhuǎn)，阻止右鍵點(diǎn)擊事件

3. 案例

1. 拖動(dòng)框效果

dom.offsetLeft 獲取元素的默認(rèn)左邊距

dom.offsetTop 獲取元素的默認(rèn)上邊距

window.innerWidth 視口寬度

window.innerHeight 視口高度

dom.offsetWidth 獲取元素可見(jiàn)寬度(width+border+padding)

dom.offsetHeight 獲取元素可見(jiàn)高度(height+border+padding)

e.pageX 鼠標(biāo)指針到X軸坐標(biāo)

e.pageY 鼠標(biāo)指針到Y(jié)軸坐標(biāo)

2. 右鍵菜單

e.target 獲取具體的元素

e.preventDefault() 阻止默認(rèn)行為

3. 選項(xiàng)卡

classList.remove() 移除樣式

classList.add() 添加樣式

四、鍵盤(pán)事件

1. 鍵盤(pán)事件

onkeydown 按鍵按下事件

onkeypress 按鍵產(chǎn)生字符事件

onkeyup 按鍵彈起事件

e.keyCode 返回按鍵碼

注意：注冊(cè)事件時(shí)要加on，觸發(fā)時(shí)不需要on

2.案例

1. 打字游戲

2. 貪吃蛇

五、正則表達(dá)式

正則表達(dá)式：其實(shí)就是一種匹配規(guī)則，用于檢索字符串

定義正則表達(dá)式的兩種方式：1.直接定義????2.構(gòu)造函數(shù)定義

// 1. 直接定義

let reg1=/abc/

// 2. 構(gòu)造函數(shù)定義

let reg2 = new RegExp('abc')

let str = '歡迎學(xué)習(xí)abc正則表達(dá)式'

// test()方法，用于檢查一個(gè)字符串中，是否有滿(mǎn)足匹配規(guī)則的字符串。

console.log(reg1.test(str));

// 其實(shí)用字符串自己的includes()方法，也能解決上面的問(wèn)題

console.log(str.includes('abc'));

那么正則表達(dá)式真正強(qiáng)大的地方是它可以寫(xiě) 通配符(擁有特殊含義的字符)

1. 通配符

\w 表示：字母、數(shù)字、下劃線

\W 表示：除了字母、數(shù)字、下劃線以外的字符

\d 表示：數(shù)字

\D 表示：非數(shù)字

^ 表示：以^符號(hào)后面的第一個(gè)字符開(kāi)頭

表示：以表示：以符號(hào)前面的第一個(gè)字符結(jié)尾

{n} 表示：重復(fù)n次

{n,m} 表示：重復(fù)n到m次

[xyz] 表示：其中任意一個(gè)字符

+ 表示：重復(fù)前一項(xiàng)1次或多次 等價(jià)于 {1,}

* 表示：重復(fù)前一項(xiàng)0次或多次 等價(jià)于 {0,}

? 表示：重復(fù)前一項(xiàng)0次或1次 等價(jià)于 {0,1}

. 表示：除了換行符以外的任意一個(gè)字符

\. 表示：.字符 ^ 表示：^ \表示：表示：

可以用()將多個(gè)字符作為一個(gè)整體

\w 等價(jià)于 [0-9a-zA-Z_]

| 表示：或者

[\u4E00-\u9FA5] 是常用漢字的unicode編碼范圍

2. 使用正則表達(dá)式驗(yàn)證表單

驗(yàn)證學(xué)生的信息

3. 正則表達(dá)式配合字符串的方法

1. replace()方法

????默認(rèn)情況下，replace()方法，只會(huì)替換字符串中匹配的第一段內(nèi)容

????使用正則表達(dá)式，添加全局匹配修飾符g，可以替換匹配全部內(nèi)容

????使用正則表達(dá)式，添加忽略大小寫(xiě)修飾符i，在匹配內(nèi)容時(shí)會(huì)忽略大小寫(xiě)

2. search()方法

????可以通過(guò)正則表達(dá)式查找位置

六、事件其他

1. 阻止事件冒泡

默認(rèn)情況下，觸發(fā)子元素的事件時(shí)，會(huì)同時(shí)觸發(fā)父元素相同的事件，這就叫做事件冒泡

e.stopPropagation() ????// 阻止事件冒泡

e.preventDefault() ????// 取消默認(rèn)行為

2. 添加事件的幾種方式

????1. 在元素中通過(guò)onXXX定義事件，指定一個(gè)事件方法

????2. 先獲取元素，再給元素綁定事件

????3. 通過(guò)addEventListener方法，給元素注冊(cè)事件，傳遞兩個(gè)參數(shù)：事件名和事件方法

????4. 通過(guò)removeEventListener方法，移除指定的事件方法，傳遞兩個(gè)參數(shù)：事件名和事件方法

3. 頁(yè)面的加載事件

1. window.onload頁(yè)面加載事件

????頁(yè)面的加載事件，該事件會(huì)在頁(yè)面中的所有內(nèi)容都加載完畢后執(zhí)行

????注意：所有內(nèi)容包括：標(biāo)簽結(jié)構(gòu)，樣式文件，圖片文件，音頻文件，視頻文件...

????如果網(wǎng)頁(yè)內(nèi)容過(guò)大，會(huì)導(dǎo)致該事件延遲執(zhí)行

????window.onload = function() {

????????alert('頁(yè)面加載完成！')

????}

2. DOMContentLoaded頁(yè)面加載事件

????只要頁(yè)面中的DOM結(jié)構(gòu)加載完畢后，就會(huì)立即執(zhí)行

????注意：該事件只能采用事件監(jiān)聽(tīng)的方式添加，沒(méi)有提供快捷方式

????window.addEventListener('DOMContentLoaded', function() {

????????alert('頁(yè)面結(jié)構(gòu)加載完畢！')

????})

七、AJAX & JSON

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）

AJAX技術(shù) 不需要刷新頁(yè)面的情況下，就可以產(chǎn)生局部刷新的效果

最初AJAX技術(shù)操作的是XML標(biāo)簽，現(xiàn)在絕大多數(shù)情況下操作的是JSON格式的字符串

1. json格式數(shù)據(jù)

// json對(duì)象

// 注意：對(duì)象的屬性名，必須要雙引號(hào)引起來(lái)

let obj={"name":"張三","age":20,"gender":"男"}

// json數(shù)組

let arr=[{"name":"張三","age":20,"gender":"男"},{"name":"李四","age":22,"gender":"女"}]

2. AJAX對(duì)象

// 01. 創(chuàng)建xhr對(duì)象 (原生ajax對(duì)象)

let xhr = new XMLHttpRequest()

// 02. 初始化請(qǐng)求（GET請(qǐng)求，POST請(qǐng)求）

// 第一個(gè)參數(shù)是請(qǐng)求方式：比如GET，第二個(gè)參數(shù)是請(qǐng)求地址：比如192.168.11.12:81/Server/List

xhr.open('GET','./data/koubei.json')

// 03. 發(fā)送請(qǐng)求

xhr.send()

// 04. 監(jiān)聽(tīng)讀取狀態(tài)改變事件

xhr.onreadystatechange = function() {

????// 請(qǐng)求已經(jīng)完成

????if(xhr.readyState === 4){

????????// 請(qǐng)求狀態(tài)為成功

? ? ? ? if(xhr.status === 200){

????????????// xhr.responseText 返回響應(yīng)體，它是一個(gè)json格式的字符串

????????????// 我們需要將該字符串轉(zhuǎn)為js對(duì)象

????????????let data = JSON.parse(xhr.responseText)

????????}

????}

}

readyState 是讀取狀態(tài)：

0: 請(qǐng)求未發(fā)送

1：服務(wù)器連接已建立（請(qǐng)求已經(jīng)發(fā)送）

2：請(qǐng)求已接收（服務(wù)器已經(jīng)接收到該請(qǐng)求）

3：請(qǐng)求處理中（服務(wù)器正則準(zhǔn)備你要的數(shù)據(jù)）

4：請(qǐng)求已完成，且響應(yīng)已就緒

status 是響應(yīng)的狀態(tài)碼：

200：成功

404：請(qǐng)求資源錯(cuò)誤

500：服務(wù)器端錯(cuò)誤

3. 開(kāi)始搭建學(xué)生管理系統(tǒng)

1. 登錄頁(yè)

????GET請(qǐng)求方式的參數(shù)，直接拼接在url里面

?????后面的內(nèi)容是請(qǐng)求參數(shù)，就好比是在調(diào)用一個(gè)帶參數(shù)的方法一樣，需要傳參數(shù)

????多個(gè)參數(shù)用&符號(hào)隔開(kāi)

????登錄成功后，跳轉(zhuǎn)到首頁(yè)：location.href = './index.html'

2. 首頁(yè)

????使用<iframe>嵌入外部頁(yè)面

????查詢(xún)?nèi)繉W(xué)生信息

八、學(xué)生管理系統(tǒng)

1. 查詢(xún)學(xué)生信息+篩選+分頁(yè)

封裝一個(gè)通用方法：function loadData(studentName,sex,pageIndex,pageSize)

2. 添加學(xué)生

將對(duì)象里面的數(shù)據(jù)，轉(zhuǎn)為json字符串

JSON.stringify(對(duì)象)

將對(duì)象里面的數(shù)據(jù)，轉(zhuǎn)為url字符串，寫(xiě)一個(gè)方法進(jìn)行轉(zhuǎn)換

studentNo=12345&loginPwd=123123&studentName=周杰倫

設(shè)置請(qǐng)求頭：

????1. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

????2. xhr.setRequestHeader('Content-Type','application/json')

3.修改學(xué)生

????1. 先根據(jù)學(xué)號(hào)查詢(xún)指定學(xué)生

????2. 再修改該學(xué)生信息

4.刪除學(xué)生

????1. 刪除前提示用戶(hù)是否確定刪除

????2. 根據(jù)學(xué)號(hào)刪除學(xué)生信息