12月6日內容總結——
一、BOM操作
BOM概念
BOM（Browser Object Model）是指瀏覽器物件模型，它使 JavaScript 有能力與瀏覽器進行“對話”
BOM物件：分為window物件和window子物件（screen物件，location物件，navigator物件，history物件）。
window物件
window物件是BOM頂層物件。
window物件是JS訪問瀏覽器視窗的一個介面
window物件是一個全域性物件,宣告的所有的全域性變數，全域性方法函式最終都是window物件的屬性或者方法。
一些常用的Window方法：
window.open() ：開啟一個新的瀏覽器視窗，接受四個引數（URL/開啟方式/視窗引數/是否取代當前頁面歷史記錄的布林值）。
window.open('https://www.mzitu.com/','','height=520px,width=521px,top=520px,left=521px'); // 右側
window.open('https://www.mzitu.com/','','height=250px,width=251px,top=250px,left=251px'); // 左側
window.close() ：關閉新開啟的視窗（僅限open（）開啟的視窗）。
window.moveTo()：移動當前視窗。
window.resizeTo()：調整當前視窗的尺寸。
window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
window物件指代的就是瀏覽器視窗
window.innerHeight; // 瀏覽器視窗的高度
150
window.innerWidth; // 瀏覽器視窗的寬度
702
window的子物件
navigator物件（瞭解即可）
瀏覽器物件，通過這個物件可以判定使用者所使用的瀏覽器，包含了瀏覽器相關資訊。
navigator.appName // Web瀏覽器全稱 navigator.appVersion // Web瀏覽器廠商和版本的詳細字串 navigator.userAgent // 客戶端絕大部分資訊（爬蟲中用於標識自己是一個瀏覽器） navigator.platform // 瀏覽器執行所在的作業系統
screen物件（瞭解即可）
螢幕物件，不常用。
一些屬性：
- screen.availWidth - 可用的螢幕寬度
- screen.availHeight - 可用的螢幕高度
history物件（瞭解即可）
window.history 物件包含瀏覽器的歷史。
瀏覽歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體的地址，可以簡單的用來前進或後退一個頁面。
history.forward() // 前進一頁
history.back() // 後退一頁
history.go(引數) 前進後退功能，引數如果是1前進一個頁面，如果是-1後退一個頁面，如果是N則前進或後退N個頁面
location物件
window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
常用屬性和方法：
location.href
// 獲取URL
window.location.href
// 獲取當前頁面所在的網址(URL)，也可以再加賦值符號和網址，即跳轉新頁面
location.href="URL"
// 跳轉到指定頁面
location.reload()
// 重新載入頁面
window.location.reload()
// 重新整理當前頁面
ps：window可以省略不寫
其他方法拓展
location.hash 返回URL中的hash（#號後跟零或多個字元）
location.host 返回伺服器名稱和埠號
location.port 返回伺服器埠號
location.pathname 返回URL中的目錄和檔名
location.hostname 返回不帶埠號的伺服器名稱
location.protocol 返回頁面使用的協議（http://或https://)
location.search 返回URL的查詢字串，字串以問號開頭
彈出框
可以在 JavaScript 中建立三種訊息框：警告框、確認框、提示框。
警告框
警告框經常用於確保使用者可以得到某些資訊。
當警告框出現後，使用者需要點選確定按鈕才能繼續進行操作。
語法：
alert("你看到了嗎？");
確認框（瞭解即可）
確認框用於使使用者可以驗證或者接受某些資訊。
當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。
如果使用者點選確認，那麼返回值為 true。如果使用者點選取消，那麼返回值為 false。
語法：
confirm("你確定嗎？")
提示框（瞭解即可）
提示框經常用於提示使用者在進入頁面前輸入某個值。
當提示框出現後，使用者需要輸入某個值，然後點選確認或取消按鈕才能繼續操縱。
如果使用者點選確認，那麼返回值為輸入的值。如果使用者點選取消，那麼返回值為 null。
語法：
prompt("請在下方輸入","你的答案")
計時相關
通過使用 JavaScript，我們可以在一定時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件。
setTimeout()
- 經過一定的毫秒後，執行第一個引數中的JS語句（只執行一次）。
語法：
var t=setTimeout("JS語句",毫秒)
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。
setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()"。
第二個引數指示從當前起多少毫秒後執行第一個引數（1000 毫秒等於一秒）。
clearTimeout()
- 取消定時任務
語法：
clearTimeout(setTimeout_variable)
舉個例子：
// 在指定時間之後執行一次相應函式
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設定
clearTimeout(timer);
setInterval()
setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。
語法：
setInterval("JS語句",時間間隔)
返回值
一個可以傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 設定的 timeout。
clearInterval() 方法的引數必須是由 setInterval() 返回的 ID 值。
語法：
clearInterval(setinterval返回的ID值)
舉個例子：
// 每隔一段時間就執行一次相應函式
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval設定
clearInterval(timer);
彈出三次警告彈窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// function showMsg() {
// alert('快來爬取美女圖片吧~')
// }
// let t = setTimeout(showMsg, 3000) // 等待3000毫秒執行
// clearTimeout(t) // 取消任務
let s;
function func() {
alert('快來爬取美女圖片吧~')
}
s = setInterval(func, 3000) // 每隔3000毫秒執行一次
function inner() {
clearInterval(s)
}
setTimeout(inner, 9000)
</script>
</body>
</html>
二、DOM操作
DOM （Document Object Model）是指文件物件模型，通過它可以訪問HTML文件的所有元素
既然DOM操作是通過js程式碼來操作標籤 所以我們需要先學習如何查詢標籤之後才能給標籤繫結一些JS程式碼(DOM操作)
三、查詢標籤
"""
1.js中變數名的命名風格推薦是駝峰體
2.js程式碼查詢到的標籤如果需要反覆使用可以用變數接收 規律 xxxEle
"""
document.getElementById('d1')
結果就是標籤物件本身
document.getElementsByClassName('c1')
結果是數組裡面含有多個標籤物件
document.getElementsByTagName('span')
結果是數組裡面含有多個標籤物件
parentElement 父節點標籤元素
children 所有子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
四、操作節點
// js程式碼建立一個標籤
let aEle = document.createElement('a')
// js程式碼操作標籤屬性
aEle.href = 'http://www.lsmpx.com/' 只能新增預設的屬性
setAttribute()相容預設屬性和自定義屬性
getAttribute("age")
removeAttribute("age")
// js程式碼操作標籤文字
aEle.innerText = '這個很攢勁!'
// js程式碼查詢div標籤並將a追加到div內部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
.innerText 獲取標籤內部所有的文字內容
.innerText = '文字' 替換/設定標籤內部的文字(不識別標籤語法)
.innerHTML 獲取標籤內部所有的標籤包含文字
.innerHTML = '文字' 替換/設定標籤內部的文字(識別標籤語法)
五、獲取值操作
1.針對使用者輸入的和使用者選擇的標籤
標籤物件.value
2.針對使用者上傳的檔案資料
標籤物件.files fileList [檔案物件、檔案物件、檔案物件]
標籤物件.files[0] 檔案物件
六、class與css操作
1.js操作標籤css樣式
標籤物件.style.屬性名(下劃線沒有 變成駝峰體)
2.js操作標籤class屬性
標籤物件.classList.add()
標籤物件.classList.contains()
標籤物件.classList.remove()
標籤物件.classList.toggle()
七、事件
事件可以簡單的理解為通過js程式碼給html標籤繫結一些自定義的功能
常見事件
onclick 當用戶點選某個物件時呼叫的事件控制代碼
onfocus 元素獲得焦點
onblur 元素失去焦點
onchange 域的內容被改變
......
繫結事件的多種方式
<!--繫結事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--繫結事件的方式2-->
<input type="button" value="快快快" id="d1">
<script>
function showMsg() {
let msg = prompt('你確定要這樣嗎?');
console.log(msg)
}
let inputEle = document.getElementById('d1');
inputEle.onclick = function () {
alert('誰在那裡點我!!!')
}
</script>
事件函式中的this關鍵字
this指代的就是當前被操作的標籤物件本身
如果事件函式內有多層巢狀那麼最好在一開始用變數儲存一下防止後續變化
onload方法
XXX.onload 等待XXX載入完畢之後再執行後面的程式碼
八、事件實戰案例
<input type="text" value="遊戲機" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '下次再來喲!'
}
</script>
<p>username:
<input type="text" id="d1">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="d2">
<span style="color: red"></span>
</p>
<button id="suBtn">提交</button>
<script>
// 1.查詢提交按鈕的標籤
subEle = document.getElementById('suBtn')
// 2.給按鈕標籤繫結點選事件
subEle.onclick = function (){
// 3.查詢獲取使用者輸入的標籤並獲取資料
let userNameEle = document.getElementById('d1')
let passWordEle = document.getElementById('d2')
if(userNameEle.value === 'jason'){
userNameEle.nextElementSibling.innerText = '使用者名稱不能是Jason'
}
if(passWordEle.value === '123'){
passWordEle.nextElementSibling.innerText = '密碼不能是123'
}
}
</script>
省:
<select name="" id="d1">
</select>
市:
<select name="" id="d2">
</select>
<script>
let data = {
"河北": ["廊坊市", "邯鄲市"],
"北京": ["朝陽區", "海淀區"],
"山東": ["威海市", "煙臺市"],
"安徽": ["蕪湖市", "合肥市"],
"上海": ["浦東新區", "靜安區"]
}
// 提前查詢好省和市的select標籤
let proSeEle = document.getElementById('d1');
let citySeEle = document.getElementById('d2');
// 1.獲取所有的省資訊
for (let pro in data) {
// 2.建立option標籤
let proOpEle = document.createElement('option');
// 3.新增文字及屬性
proOpEle.innerText = pro;
proOpEle.setAttribute('value', pro);
// 4.將建立好的option標籤新增到省下拉框中
proSeEle.appendChild(proOpEle)
}
// 5.給省標籤繫結文字域變化事件 onchange
proSeEle.onchange = function () {
citySeEle.innerHTML = ''; // 每次操作市之前清空市資料
// 6.獲取使用者選擇的省資訊 根據省獲取市資訊
let targetProData = this.value;
let cityDataList = data[targetProData];
// 7.迴圈獲取每一個市資訊 建立option標籤 新增到市下拉框中
for (let i = 0; i < cityDataList.length; i++) {
let cityOpEle = document.createElement('option');
cityOpEle.innerText = cityDataList[i];
cityOpEle.setAttribute('value', cityDataList[i]);
citySeEle.appendChild(cityOpEle)
}
}
</script>
九、jQuery類庫
"""
IE瀏覽器:前端針對IE有時候需要單獨再編寫一份程式碼
"""
Write less, do more 寫的更少做的更多
1.載入速度快
2.選擇器更多更好用
3.一行程式碼走天下
4.支援ajax請求(重點)
5.相容多瀏覽器
準備工作
1.下載核心檔案到本地引入(沒有網路也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN網路資源載入(必須有網路才可以使用)
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
什麼是CDN
內容分發網路
jQuery匯入之後需要使用關鍵字才可以使用
預設的關鍵字就是jQuery但是不好輸入 >>>: $
jQuery封裝了JS程式碼 讓編寫更簡單 但是有時候JS程式碼更快
js程式碼與jQuery程式碼對比
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')
十、標籤物件與jQuery物件
1.不同的物件能夠呼叫的方法是不同的
在編寫程式碼的時候一定要看清楚手上是什麼物件
2.兩者可以互相轉換
標籤物件轉jQuery物件
$(標籤物件)
jQuery物件轉標籤物件
jQuery物件[0]
十一、作業
1.優化校驗使用者名稱密碼的程式碼
2.簡易版本頁面計時器