感兴趣的朋友可以去我的语雀平台进行查看更多的知识。
https://www.yuque.com/ambition-bcpii/muziteng
5. BOM
5.1 简介
BOM
(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM
由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM
缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
BOM 的构成
BOM
比DOM
更大,它包含DOM
window
对象是浏览器的顶级对象,它具有双重角色
- 它是
JS
访问浏览器窗口的一个接口 - 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用的时候可以省略window
,前面学习的对话框都属于window
对象方法,如alert()
、prompt()
等。
注意:window
下的一个特殊属性window.name
值为' '
<script>
var num = 10;
console.log(num) // 10
console.log(window.num); // 10
function fn() {
console.log(11);
}
fn();
window.fn();
console.dir(window)
</script>
5.2 window对象的常见事件
窗口加载事件
window.onload
是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、CSS 文件、脚本文件等),就调用的处理函
数
window.onload = function(){}
或者
window.addEventListener("load",function(){});
注意
- 有了
window.onload
就可以把JS
代码写到页面元素的上方,因为onload
是等页面内容全部加载完毕,再去执行处理函数。 window.onload
传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload
为准- 如果使用
addEventListener
则没有限制
DOMContentLoaded
事件触发时,仅当DOM
加载完成,不包括图片、样式表、flash等,IE9以上才支持
如果页面的图片很多的话, 从用户访问到onload
触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用
DOMContentLoaded
事件比较合适。
document.addEventListener('DOMContentLoaded',function(){})
调整窗口大小事件
window.onresize
是调整窗口大小加载事件, 当触发时就调用的处理函数。
window.onresize = function(){}
window.addEventListener("resize",function(){});
注意
- 只要窗口大小发生像素变化,就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。
window.innerWidth
当前屏幕的宽度
5.3 定时器
window对象给我们提供了2个非常好用的方法-定时器setTimeout()
、setInterval()
setTimeout()
定时器
setTimeout()
方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
window.setTimeout(调用函数, [延迟的毫秒数]);
注意
window
可以省略- 这个调用函数可以直接写函数,或者写函数名,或采取字符串’函数名()'(不推荐)
- 延迟的毫秒数省略默认是 0,如果写,必须是毫秒
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
setTimeout()
里的调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用,而这个函数,需要等待时间,时间到了才去调用这个函数
简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
element.onclick = function(){}
或者element.addEventListener('click', fn)
里面的函数也是回调函数
停止 setTimeout() 定时器
clearTimeout()
方法取消了先前通过调用setTimeout()
建立的定时器
window.clearTimeout(timeoutID)
注意
- window 可以省略
- 里面的参数就是定时器的标识符
<button>点击停止定时器</button>
<script>
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
window.clearTimeout(timer);
})
</script>
setInterval() 定时器
setInterval()
方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
window.setInterval(回调函数, [间隔的毫秒数]);
注意
- window 可以省略
- 这个调用函数可以直接写函数,或者写函数名,或者采取字符串’函数名()’
- 间隔的毫秒数省略默认是 0,如果写必须是毫秒,表示每隔多少毫秒就自动调用这个函数
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
- 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次
<script>
setInterval(function() {
console.log('继续输出');
}, 1000);
// setTimeout 延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
// setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
</script>
停止setInterval()定时器
clearInterval()
方法取消了先前通过调用setInterval()
建立的定时器
window.clearInterval(timeoutID)
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量 null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('ni hao ma');
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
this
this
的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this
到底指向谁,一般情况下this
的最终指向的是那个调
用它的对象
现阶段,我们先了解一下几个this
指向
- 全局作用域或者普通函数中
this
指向全局对象window(注意定时器里面的this指向window) - 方法调用中谁调用
this
指向谁 - 构造函数中
this
指向构造函数的实例
5.4 location对象
window
对象给我们提供了一个location
属性用于获取或设置窗体的URL
,并且可以用于解析URL
。 因为这个属性返回的是
一个对象,所以我们将这个属性也称为location
对象
location 对象的属性
location 对象的方法
5.5 navigator对象与history对象
navigator对象
navigator
对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent
,该属性可以返回由客户机发送服务器的user-
agent
头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
history对象
window
对象给我们提供了一个history
对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
6. 本地存储
为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案
本地存储特性
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,
sessionStorage
约5M、localStorage
约20M - 只能存储字符串,可以将对象
JSON.stringify()
编码后存储
6.1 window.sessionStorage
存储数据:sessionStorage.setItem(key, value)
获取数据:sessionStorage.getItem(key)
删除数据:sessionStorage.removeItem(key)
删除所有数据:sessionStorage.clear()
特征
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
console.log(localStorage.getItem('username'));
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
// 点击之后,可以把表单里面的值存储起来
var val = ipt.value;
sessionStorage.setItem('uname', val);
// sessionStorage.setItem('pwd', val);
});
get.addEventListener('click', function() {
// 当我们点击了之后,就可以把表单里面的值获取过来
console.log(sessionStorage.getItem('uname'));
});
remove.addEventListener('click', function() {
sessionStorage.removeItem('uname');
});
del.addEventListener('click', function() {
sessionStorage.clear(); // 清除所有的
});
</script>
6.2 window.localStorage
存储数据:localStorage.setItem(key, value)
获取数据:localStorage.getItem(key)
删除数据:localStorage.removeItem(key)
删除所有数据:localStorage.clear()
特征
- 声明周期永久生效,除非手动删除,否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
var val = ipt.value;
localStorage.setItem('username', val);
})
get.addEventListener('click', function() {
console.log(localStorage.getItem('username'));
})
remove.addEventListener('click', function() {
localStorage.removeItem('username');
})
del.addEventListener('click', function() {
localStorage.clear();
})
</script>
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true;
}
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value)
} else {
localStorage.removeItem('username');
}
})
</script>