一、BOM概述
- BOM——Browser Object Model,浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window(顶级对象)。
- BOM将浏览器当做一个对象来看待。
- BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。
- BOM缺乏标准,最初是Netscape浏览器最标准的一部分。
- BOM学习的是浏览器窗口交互的一些对象。
- BOM是浏览器厂商在各自浏览器定义的,兼容性较差
BOM比DOM更大 ,包含DOM(window中包含document)
BOM的双重角色
- BOM是JS访问浏览器窗口的一个接口
- BOM是全局对象,定义在全局作用域的变量、函数都会变成window对象的属性和方法
调用时可省略window,如alert(),prompt()
注:window下的一个特殊属性window.name (声明对象最好不要用name)
二、 window对象常见事件
①窗口加载事件
以下是窗口加载事件的两种方式,当文档内容完全加载完毕会触发该事件,调用处理函数
<button>点击查看</button>
<script>
// 1
window.onload = function(){
var btn = document.querySelector('button');
btn.onclick=function(){
alert('你来人间一趟');
}
}
// 2
window.addEventListener("load",function(){
var btn = document.querySelector('button');
btn.onclick=function(){
alert('你要看看太阳');
}
})
// 输出“你要看看太阳”
// 3
document.addEventListener('DOMContentLoaded',function(){
alert('加载完DOM就可执行,更快!');
})
// 加载完毕后最先弹出这个
</script>
- 有这个就可以将JS代码写在页面元素上方
- window.onload传统注册方式,只能写一次,多个会以最后一个window.onload为准
- addEventListener没有上述限制
- load:页面全部加载完毕,包含页面dom元素,图片,flash,css等
- DOMContentloaded:dom加载完毕,不包含图片,flash,css等就可执行
②调整窗口大小事件
<div style="width: 300px; height: 300px; background-color: blueviolet;"></div>
<script>
// 1
window.onresize = function(){
console.log('change');
}
// 2
window.addEventListener('load',function(){
var div = document.querySelector('div');
window.addEventListener('resize',function(){
console.log('变化');
console.log(window.innerWidth);
if(window.innerWidth<=800){
div.style.display = 'none';
}
else{
div.style.display = 'block';
}
})
})
</script>
上述两种方式可判别调整窗口大小
其中第二种方式里的内容可以通过判断window.innerWidth长度来决定元素的显示与否
三、定时器
①setTimeout()定时器
语法:window.setTimeout(调用函数,延时时间);(window在调用时可省略)
注:
- 延时单位默认是ms,但是可以省略,省略默认为0(立即执行)
- 这个调用函数可以直接写函数,还可以写函数名,'函数名()'
- 页面中可能有很多计时器,我们常给其加标识符(var timer1=balabala)
<script>
// 1.直接写函数
setTimeout(function(){
console.log('time is due');
// 2s后显示
},2000);
// 2.函数名
function callback(){
console.log('boom');
}
setTimeout(callback,3000);
// 3.'函数名()' 但是不提倡这种写法!
setTimeout('callback()',5000);
</script>
setTimeout() 这个调用函数我们也称回调函数(等待时间,回头调用)
②停止setTimeout()定时器
语法:window.clearTimeout(timeoutID);
<script>
var timer = setTimeout(function(){
console.log('time is due');
},2000);
//window.clearTimeout(timeoutID) window可省略
var btn = document.querySelector('button');
btn.onclick = function(){
clearTimeout(timer);
}
</script>
③setInterval()定时器
语法:window.setInterval(调用函数,间隔时间);
<script>
setInterval(function(){
console.log('time is due');
},2000);
</script>
每隔一段时间调用一次定时器
④停止setInterval()定时器
语法:window.clearInterval(interval ID);
<script>
var btn = document.querySelector('button');
// var timer = null;
// 如果计时器和停止计时器分别在两个监听器中
// 须在外面定义timer为全局变量,令其为空(null)
// 使其能被两个监听器调用
timer = setInterval(function(){
console.log('time is due');
},1000);
btn.addEventListener('click',function(){
clearInterval(timer);
})
</script>
⑤this
this指向问题:一般情况下this最终指向调用它的对象
<button>点击</button>
<script>
// 返回window
// 例1
console.log(this);
// 例2
function fn(){
console.log(this);
}
window.fn();
// 例3
window.setTimeout(function(){
console.log(this);
},1000)
// 方法调用中:谁调用指向谁
// 例1
var xiaoming = {
say:function(){
console.log(this); //指向xiaoming这个对象,它调用了say
}
}
xiaoming.say();
// 例2
var btn = document.querySelector('button');
btn.onclick = function(){
console.log(this); //指向btn这个按钮对象,返回button
// addEventListener同理
}
</script>
- 全局作用域或者普通函数中this指向的是全局对象window(定时器里面的this指向window)
- 方法调用中—谁调用this指向谁
四、JS执行队列
JS是单线程
为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是出现了同步异步。
同步:前一个任务结束再执行后一个任务,程序的执行顺序与任务的排列顺序一致同步。
异步:在做一件事的同时也可以做其他事情。
同步任务都在主线程上执行,形成一个执行栈
异步任务通过回调函数实现,一般有以下三种类型
- 普通事件,如click,resize
- 资源加载,如load,error
- 定时器,如setTimeout,setInterval
异步任务相关回调函数添加到任务队列(消息队列)中
JS执行机制
- 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
五、location对象
①什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体URL,并可以解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
②URL
统一资源定位符,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL一般语法格式为
protocol://host[:port] /path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
③location对象的属性
重点记住 href 和 search
④location对象的方法
- location.assign() :和href一样,可以跳转页面(重定向页面)
- location.replace():替换当前页面,因为不记录历史,所以不能后退页面
- location.reload():重新加载页面,相当于刷新按钮或f5,如果参数为true强制刷新Ctrl+f5
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
// 记录浏览历史,所以可以实现后退功能
location.assign('http://www.baidu.com');
// 不记录浏览历史,不能后退
location.replace('http://www.baidu.com');
// 点击按钮=刷新
location.reload();
})
</script>
六、navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可返回由客户机发送服务器的user-agent头部的值
七、history对象
window对象给我们提供了一个history对象,与浏览器历史记录交互。该对象包含用户(在浏览器窗口中)访问过URL。
history对象方法
- back():可以后退功能
- forward():前进功能
- go(参数):前进后退功能,参数如果是1,前进1个页面;如果是-1,后退一个页面