文章目录
1.BOM浏览器对象模型
1.1 BOM概述
1.1.1什么是BOM
- BOM(Browser Object Model)即浏览器模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其对象核心是window
- BOM由一系列相关的对象构成,并且每个对象都提供了很多的方法与属性
- BOM缺乏标准(js有ECMA DOM有W3C),由厂商在各自浏览器上定义
- BOM把浏览器当作一个对象来看
1.1.2 BOM的构成
-
BOM 比 DOM 更大 它包含 DOM
window(document,location,navigation,screen,history) -
window 对象是浏览器的顶级对象,它具有双重角色
-
它是 JS 访问浏览器窗口的一个接口
-
它是一个全局对象,定义在全局作用域中的变量,函数都会变成 window 对象的属性和方法在调用的时候可以省略 window ,前面学习的对话框都属于 window 对象方法 如 alert()、prompt()等
-
注意:window 下的一个特殊属性 window.name, 不要随意定义name变量
1.1.3 BOM和DOM对比
BOM
- 浏览器对象模型
- 把浏览器当作一个对象来看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的,兼容性较差
DOM
- 文档对象模型
- DOM 把文档当作一个对象来看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C标准规范
1.2 window对象的常用事件
1.2.1 窗口加载事件
- window.onload 窗口加载事件,当文档内容完全加载会触发该事件(包括图像、flash、CSS)
- DOMContentLoaded 当DOM加载完成时触发(不包括图片,flash,css等)
- window.onload 传统注册事件方式只能写一次,如果有多个,以最后一个为准,但使用addEventListener 则没有限制
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('button clicked');
})
})
window.addEventListener('load', function () {
alert('load 触发');
})
document.addEventListener('DOMContentLoaded', function () {
alert('DOMContentLoaded 触发');
})
// alert DOMContentLoaded 触发 => alert load触发 => 点击按钮 => alert button clicked
</script>
</head>
<body>
<button>click</button>
</body>
1.2.2 调整窗口大小事件
- window.onresize 是调整窗口大小加载事件
- 只要窗口大小发生变化就会触发
- window.innerWidth当前屏幕的宽度,可利用来完成响应式布局
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 200px;
width: 200px;
background-color: #ff4af4;
}
</style>
<script>
window.addEventListener('load', function () {
var div = document.querySelector('div');
window.addEventListener('resize', function () {
console.log('resize');
if (window.innerWidth <= 800) {
div.style.display = 'none'
} else {
div.style.display = 'block'
}
})
})
</script>
</head>
<body>
<div></div>
</body>
- 调整页面大小会让方框出现/消失
1.3 定时器
1.3.1 setTimeout() 定时器
- window.setTimeout(调用函数, delay)
- 调用函数可以直接写函数,或者写函数名,或字符串’调用函数()’
- 延迟时间不写默认为0
<body>
<script>
var callback = function(){
console.log('callback');
};
var timer1 = window.setTimeout(callback, 2000);
var timer2 = window.setTimeout(callback, 8000);
// => callback(打开页面2s后) callback(打开页面8s后)
</script>
</body>
- 回调函数
- setTimeout() 里的调用函数我们也叫做回调函数
- 这个函数需要等待时间,时间到了才调用,所以叫回调函数(回调意思就是回头调用)
- document.addEventListener(‘click’, fn) 里面的函数也是回调函数
1.3.2 停止setTimeout()定时器
- window.clearTimeout(timoutID) 取消先前调用的setTimeout()定时器
<body>
<button>stop setTimeout</button>
<script>
var btn = document.querySelector('button');
var callback = function () {
console.log('callback 调用');
};
var timer = window.setTimeout(callback, 2000);
btn.addEventListener('click', function () {
clearTimeout(timer);
})
// => 点击按钮则不再打印callback 调用
</script>
</body>
1.3.3 setInterval() 定时器
- 和setTimeout()调用方法极其相似,但功能不一样,此定时器每隔一次设置时间就调用一次回调函数
<body>
<script>
window.setInterval(function () {
console.log('callback');
}, 1000)
</script>
</body>
1.3.4 停止setInterval()定时器
- window.clearInterval(intervalID);
- intervalID 是定时器的标识符
<body>
<button class="stop">stop</button>
<button class="begin">begin</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
let timer = null;
begin.addEventListener('click', function () {
timer = setInterval(function () {
console.log('setInterval');
}, 1000)
})
stop.addEventListener('click', function () {
clearInterval(timer)
})
</script>
</body>
点击begin开始循环打印,点击stop结束循环打印
1.3.5 this
一般情况下,this指向调用它的对象
个人认为:当用this的时候外面有一层函数,那么这个‘它’指的是这个函数
1.3.5.1 全局作用域中
- 全局作用域或者普通函数中this指向全局对象window(定时器里的this也指向window)
<script>
window.console.log(this);
function f() {
console.log(this);
}
window.f();
window.setTimeout(function () {
console.log(this);
})
// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
// => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
</script>
1.3.5.2 方法调用中
- 方法调用中谁调用this指向谁
<script>
var object = {
f : function () {
console.log(this);
}
}
object.f();
document.addEventListener('click', function () {
console.log(this);
})
// => {f: ƒ}
// => #document
</script>
1.3.5.3构造函数中
- 构造函数中this指向构造函数的实例
<script>
function Fun() {
console.log(this);
}
let fun = new Fun();
// => Fun
</script>
1.4 JS执行机制
1.4.1 JS是单线程
JavaScript 语言一大特点是单线程,同一个时间只能做一件事。单线程意味着所有的任务都需要排队,前一个任务结束后一个任务才能开始。这样会造成页面不连贯。
1.4.2 同步与异步
为了解决问题,利用多核CPU,HTML5提出了Web Worker标准,允许JavaScript脚本创建多个线程。于是JS中有了同步和异步。
- 同步: 前一个任务执行完再执行后一个任务
- 异步: 在做一件事的时候可以去处理其他事
1.4.2.1 同步任务
- 同步任务都在主线程上执行,形成执行栈
1.4.2.2 异步任务
- JS异步任务通过回调函数实现
- 一般而言,异步任务有三种类型
- 普通事件 click resize等
- 资源加载 load error等
- 定时器 setTimeout setInterval
异步任务相关回调函数添加到任务队列(消息队列)中
<script>
console.log(1);
setTimeout(function () {
console.log(2);
})
console.log(3);
// => 1 3 2
</script>
1.4.3 JS执行机制
- 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 一旦执行栈中所有同步任务执行完毕,系统就会按次序读取任务队列的异步任务,被读取的异步任务结束等待状态,进入执行栈开始执行
-
事件循环
-
由于主线程不断重复获得任务,执行任务,再获取任务,再执行,这种机制被称为事件循环(解释就是执行栈的任务执行完毕,系统就会按次序读取任务队列的异步任务,异步任务也执行完毕了,又再看看消息队列有没有异步任务,有又再执行,执行完又看。。)
<script>
console.log(1);
document.onclick = function () {
console.log('click');
}
console.log(2);
setTimeout(function () {
console.log(3);
}, 3000)
// => 1 2 3
</script>
- document.onclick = fn 这个语句先写进异步进程处理,点击事件发生,fn进入消息队列
- setTimeout(fn, 3000) 先写进异步进程处理,3s到了fn才写进消息队列
1.5 location对象
1.5.1 什么是location对象
- window 对象给我们提供了一个location属性用于获取或设置窗体的url,并且可以解析url。因为这个属性返回的是一个对象,我们将这个属性也叫做location对象
1.5.2 url
- URL(统一资源定位符)是互联网上标准资源的地址,互联网上每一个文件都有唯一的url,它包含的信息指出文件的位置以及浏览器应该怎么处理。
1.5.3 location 对象的属性
- location.href 获取或设置整个url
- location.host 返回主机(域名) www.baidu.com
- location.port 返回端口号(如果没有则返回空字符串)
- location.pathname 返回路径
- location.search 返回参数
- location.hash 返回片段
1.5.4 location对象的方法
- location().assign() 转跳页面,可以回退
- location().replace() 转跳页面,不可回退
- locaton().reload() 刷新页面,如果参数为true则强制刷新(ctrl+f5)
1.6 navigator 对象
- navigator 对象包含有关浏览器的信息,常用userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值,以转跳不同的页面(比如手机网页打开手机商场页面,电脑端打开电脑端商场页面)
1.7 history 对象
1.7.1 history对象方法
- history.back() 后退
- history.forward() 前进
- history.go() 参数为正则前进,参数为负则后退