建議學(xué)習(xí)時(shí)長(zhǎng)： 20分鐘
學(xué)習(xí)方式：了解
學(xué)習(xí)目標(biāo)
- 了解什么是BOM
- 了解BOM的常用方法
詳細(xì)介紹
BOM是 browser object model(瀏覽器對(duì)象模型)的縮寫(xiě)失息。
BOM提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象明垢，主要處理瀏覽器窗口和框架坑匠，不過(guò)通常瀏覽器特定的 JavaScript 擴(kuò)展都被看做 BOM 的一部分。
常用方法
瀏覽器相關(guān)信息
// 瀏覽器信息
navigator.userAgent // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36
// 運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)
navigator.platform // MacIntel
瀏覽記錄歷史
// 前進(jìn)
history.forward()
// 后退
history.back()
url 信息
頁(yè)面跳轉(zhuǎn)
// 當(dāng)前頁(yè)面會(huì)記入瀏覽記錄歷史
location.
// 當(dāng)前頁(yè)面不會(huì)記入瀏覽記錄歷史
location.replace('http://www.baidu.com')
頁(yè)面重新加載
location.reload()
獲得當(dāng)前 url 的信息
// 假設(shè)當(dāng)前 url 是 http://192.168.31.194:8000/jquery/index.html?a=3&c=aa#b
location.href // 完整的url
location.hostname // 192.168.31.194
location.host // 192.168.31.194:8000
location.port // 8000
location.protocol // http:
location.search // ?a=3&c=aa
location.hash // #b
location.pathname // /jquery/index.html
全局對(duì)象
信息彈出框
alert('你很帥拖吼！')
確認(rèn)彈出框
var isReady = confirm('準(zhǔn)備好來(lái)嗎?')
if (isReady) {
} else {
}
輸入信息彈出框
var name = prompt('請(qǐng)輸入你的名字')
console.log(name)
打開(kāi)一個(gè)新窗口
open('http://baidu.com')
// 改變某個(gè)窗口的 url
open('http://baidu.com', 'a')
open('http://youku.com', 'a') // 上面窗口的地址會(huì)從 百度 變成 優(yōu)酷的
過(guò)段時(shí)間后執(zhí)行
// 1 秒后執(zhí)行
setTimeout(function() {
// doSth
}, 1000)
每隔一段時(shí)間執(zhí)行
var i = 1
// 每隔 1 秒后執(zhí)行
var runId = setInterval(function(){
console.log(i++)
if(i >= 10) {
clearInterval(runId) // 停止執(zhí)行
}
}, 1000)
屏幕每次刷新時(shí)執(zhí)行
一般是渲染一些 UI腕窥。
var targetEl = document.querySelector('.tar')
var res
var isStop
var runId = requestAnimationFrame(function(){
targetEl.text(res)
if(isStop) {
cancelAnimationFrame(runId)
}
})
在控制臺(tái)輸出信息
console.log('日志信息')
console.warn('警告信息')
console.info('普通信息')
console.error('錯(cuò)誤信息')
console.log('1+2 = %d', 3)
var person = {name: 'Joel', gender: '男'}
console.log('名字：%s执隧，性別：%s', person.name, person.gender)
console.trace() // 代碼在堆棧中的調(diào)用路徑
