一:BOM與DOM操作
- 引入
目前為止，我們已經學習了javaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何互動。也就是我們還不能製作一些我們經常看到的網頁的一些互動，我們需要繼續學習BOM和DOM相關知識。
Javascript 由三部分構成，ECMAScript，DOM和BOM。
1.BOM與DOM操作
BOM
瀏覽器物件模型 Browser Object Model
js程式碼操作瀏覽器 提供一些屬性和方法可以操作瀏覽器
它使 javaScript有能力與瀏覽器進行 "對話"
DOM
文件物件模型 Document Object Model
js程式碼操作標籤 提供操作頁面元素的方法和屬性
通過它 可以訪問HTML檔案的所有元素
二:BOM操作
1.常用的Window方法:
window物件指代的就是瀏覽器視窗
window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
window.open() - 開啟新視窗
window.close() - 關閉當前視窗
2.案例實操
window.innerHeight # 當前瀏覽器視窗的高度
900
window.innerWidth # 當前瀏覽器視窗的寬度
1680
3.開啟新視窗
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
解析內容:
新建視窗開啟頁面 第二個引數寫空即可 第三個引數寫新建的視窗的大小和位置
4.關閉當前頁面
window.close() 關閉當前頁面
擴充套件父子頁面通訊window.opener() 瞭解
三:window的子物件
1.navigator物件
瀏覽器物件，通過這個物件可以判定使用者所使用的瀏覽器，包含了瀏覽器相關資訊。
2.navigator常用方法
navigator.appName // Web瀏覽器全稱
navigator.appVersion // Web瀏覽器廠商和版本的詳細字串
navigator.userAgent // 客戶端絕大部分資訊
navigator.platform // 瀏覽器執行所在的作業系統
3.navigator實際使用
navigator : 瀏覽器物件
1.瀏覽器全稱
window.navigator.appName
輸出結果:
"Netscape"
2.瀏覽器廠商和版本的詳細字串
window.navigator.appVersion
輸出結果:
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
3.用來標識\效驗當前是否是一個瀏覽器 是否存在(userAgent)引數
window.navigator.userAgent
輸出結果:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
4.擴充套件(user-agent)網站仿爬措施
1.最簡單最常用的一個就是校驗當前請求的發起者是否是一個瀏覽器 userAgent
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
如何破解該措施？
在你的程式碼中加上上面的user-agent配置即可
5.檢視當前平臺
window.navigator.platform
'Win32'
6.提醒:
如果是window的子物件 那麼window可以省略不寫(習慣性建議寫一下)
navigator.platform
四:history物件
1.window.history 物件包含瀏覽器的歷史
window.history 物件包含瀏覽器的歷史
瀏覽器歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體地址，可以簡單的用來前進或者後退一個頁面。
2.history使用
window.history.back() 回退到上一頁
window.history.forward() 前進到下一頁
- history對應的就是你瀏覽器左上方的兩個的箭頭
五:location物件
1.location
window.location 物件用於獲取當前頁面的地址(URL),並把瀏覽器重定向到新的頁面。
2.常用屬性方法
window.location.href # 獲取當前頁面的url
window.location.href = url # 跳轉到指定的url('https://www.mzitu.com')
window.location.reload() # 重新載入頁面 瀏覽器左上方的小圓圈
3.實踐location物件
3.1獲取當前頁面的url
window.location.href
3.2跳轉到指定的url
window.location.href = ('https://www.mzitu.com')
3.3重新載入頁面 瀏覽器左上方的小圓圈
window.location.reload()
六:彈出框
-
警告框
alert() -
確認框
confirm() -
提示框
prompt()
作用:會彈出一個視窗
1.警告框
alert('你不要過來啊！！！')
undefined
2.確認框
confirm('你確定真的要這麼做嗎?能不能有其他方式能夠滿足你...')
false
confirm('你確定真的要這麼做嗎?能不能有其他方式能夠滿足你...')
true
3.提示框
prompt('手牌號給我看一下','22號消費888')
七:計時器相關
- 過一段時間之後觸發(一次)
- 每隔一段時間觸發一次(迴圈)
1.過一段時間之後觸發(一次)
3秒後觸發一次
也可以取消定時任務，就不會進行執行
<script>
function func1() {
alert(123)
}
// 毫秒為單位 3秒之後自動執行func1函式
let t = setTimeout(func1,3000);
// 取消定時任務 如果你想要清除定時任務 需要提前用變數指代定時任務
clearTimeout(t)
</script>
2.每隔三秒時間觸發一次(迴圈)
限制每隔3秒觸發執行一次，九秒後觸發 停止執行。
<script>
function func2() {
alert(123)
}
function show(){
let t = setInterval(func2,3000); // 每隔3秒執行一次
function inner(){
clearInterval(t) // 清除定時器
}
setTimeout(inner,9000) // 9秒中之後觸發/執行
}
show()
</script>
注意:
在HTML中 script 可以放head內，也可以放在body內。