一、何为BOM
BOM(browser object model)浏览器对象模型
1、关于BOM
- 核心是window对象,所有的全局变量和全局函数都被归在了window上 2.BOM是
- Browser Object Model的缩写,是浏览器对象模型
2、BOM的构成
2、window对象
- window对象:BOM的核心对象是window,它表示浏览器的一个实例
- 在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 因此,所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。
3、window常见事件
页面(窗口)加载事件(2种)
第一种
window.onload = function(){}
或
window.addEventListener("load",function(){})
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文 件、CSS 文件等), 就调用的处理函数。
第二种
document.addEventListenter("DOMContentLoaded",function(){})
DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片、flash等等
调整窗口大小事件
window.onresize = function(){}
或
window.addEventListener("resize",function(){})
4、定时器(两种)
- setTimeout()
- setInterval()
4.1、setTimeout()
window.setTimeout(function(){},[延迟毫秒数])
setTimeout就像是一个定时炸弹,当设置的时间到后才会执行相应的函数
也称回调函数 callback
注意:
- window可以省略
- 此方法可以直接写函数,或者写函数名或者采取字符串函数名()三种形式 .
- 延迟的毫秒数省略默认是零,如果写,必须是毫秒
- 通常要给计时器赋值一个标识符
回调,就是回头调用的意思.上一件事干完,再回头调用这个函数.
例如:定时器中的调用函数,事件处理函数
<script>
// 回调是匿名函数
setTimeout(function () {
alert("要爆炸了")
}, 2000)
//回调是有名函数
var time = setTimeout(callback, 6000)
function callback() {
alert('又炸了')
}
</script>
4.2、停止计时器
window.clearTimeout(timeID)
注意:
- window可以省略
- 里面的参数就是定时器的标识符
4.3、setInterval()
window.setInterval(回调函数,[间隔时间])
setInterval就像是一个闹钟每当过了设置的时间后就会重复调用一次函数
注意:
- window可以省略
- 此调用函数可以直接写函数、或写函数名或采取字符串函数名()三种形式
- 间隔的毫秒数可以省略默认是0,表示每隔多少毫秒就自动调用这个函数
- 通常给一个标识符
- 第一次执行也是间隔毫秒数后执行,之后每个毫秒数就执行一次.
4.4、停止计时器
window.cleaInverval(IntervalID)
此方法取消了先前通过setInerval()建立的定时器
注意:
- window可以省略
- 里面的参数就是定时器的标识符
<script>
var count = 0
var time = setInterval(function () {
if (count == 10) {
alert("结束了")
clearInterval(time)
} else {
count++
console.log(count)
}
}, 1000)
</script>
5、this指向问题
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情 况下this的最终指向的是那个调用它的对象。
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
<script>
//全局作用域或者普通函数中this指向全局对象window
console.log(this)
function fn() {
console.log(this)
}
fn()
setTimeout(function () {
console.log(this)
}, 1000)
//方法调用中谁调用this指向谁
var a = {
name: function () {
console.log(this)
}
}
a.name()
var btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log(this)
})
//构造函数中this指向构造函数的实例
function fn() {
console.log(this)
}
var fun = new fn()
</script>
6、location对象
6.1何为location对象
location 对象存储了当前文档位置(URL)相关的信息,简单地说就是网页地址字符串。使用 window 对象的 location 属性可以访问。
6.2location对象属性
location 对象定义了 8 个属性,其中 7 个属性可以获取当前 URL 的各部分信息,另一个属性(href)包含了完整的 URL 信息,详细说明如下表所示。
属性 | 说明 |
---|---|
href | 声明了当前显示文档的完整 URL,与其他 location 属性只声明部分 URL 不同,把该属性设置为新的 URL 会使浏览器读取并显示新 URL 的内容 |
protocol | 声明了 URL 的协议部分,包括后缀的冒号。例如:“http:” |
host | 声明了当前 URL 中的主机名和端口部分。例如:“www.123.cn:80” |
hostname | 声明了当前 URL 中的主机名。例如:“www.123.cn” |
port | 声明了当前 URL 的端口部分。例如:“80” |
pathname | 声明了当前 URL的路径部分。例如:“news/index.asp” |
search | 声明了当前 URL 的查询部分,包括前导问号。例如:“?id=123&name=location” |
hash | 声明了当前 URL 中锚部分,包括前导符(#)。例如:“#top”,指定在文档中锚记的名称 |
6.1location对象方法
方法 | 描述 |
---|---|
assign() | 加载新的文档(重定向) |
reload() | 重新加载页面,如果参数为true表示强制刷新 |
replace() | 替换当前页面 |
<button>点击</button>
<script>
document.querySelector('button').addEventListener('click', function () {
//刷新页面
location.reload()
//替换页面
location.replace('https://www.baidu.com/')
//重定向页面
location.assign('https://www.baidu.com/')
})
</script>
7、 navigator对象
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返
回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobil e|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|W indows Phone)/i)
)) {
window.location.href = "https://www.bilibili.com/";//手机
} else {
window.location.href = "https://www.bilibili.com/";//电脑
}
8、js执行机制
8.1、JS 是单线程
- js的一大特点就是单线程,也就是说,同一个时间只能做一件事。
- 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
8.2、同步任务和异步任务
关于javascriptjavascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的,一切javascript多线程都是纸老虎!
2.javascript事件循环既然js是单线程,那就像只有一个窗口的银行,客户需要排队一个一个办理业务,同理js任务也要一个一个顺序执行。如果一个任务耗时过长,那么后一个任务也必须等着。那么问题来了,假如我们想浏览新闻,但是新闻包含的超清图片加载很慢,难道我们的网页要一直卡着直到图片完全显示出来?因此聪明的程序员将任务分为两类:
-
同步任务
- 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
- 同步任务都在主线程上执行,形成一个执行栈
-
异步任务
-
不进入主线程、而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出
异步任务放入主线程执行。
-
js的异步是通过回调函数实现的,一般而言异步任务有以下三种类型
- 普通事件:如click、resize等
- 资源加载事件:如load、error等
- 定时器:setInverval、settimeout等
-
异步任务相关的回调函数添加到任务队列中
-
-
**本质区别:**这条流水线上的各个流程执行循序不同
8.3、js执行机制中的事件循环
- 先执行执行栈中的任务
- 异步任务放入任务队列
- 同步任务执行完毕后读取任务队列中的异步任务,于是被读取的异步任务结束等待状态进入执行栈并执行
由于主线不断的重复获取任务、执行任务,所以这种机制叫事件循环
件:如load、error等
- 定时器:setInverval、settimeout等
-
异步任务相关的回调函数添加到任务队列中
-
[外链图片转存中…(img-w0zaAqjL-1607527843586)]
**本质区别:**这条流水线上的各个流程执行循序不同
8.3、js执行机制中的事件循环
- 先执行执行栈中的任务
- 异步任务放入任务队列
- 同步任务执行完毕后读取任务队列中的异步任务,于是被读取的异步任务结束等待状态进入执行栈并执行
由于主线不断的重复获取任务、执行任务,所以这种机制叫事件循环