BOM
- BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心是window。
- window对象是浏览器的顶级对象。
window对象常见事件
窗口加载事件
1. onload
- 当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件等）
window.onload = function(){}
window.addEventListener("load",function(){});
2. DOMContentLoaded
- 仅当DOM加载完成，不包括样式表、图片、flash等等。
- 如果页面图片很多且庞大，用户访问到onload触发可能需要较长的事件，交互效果不好影响用户体验，此时用该事件比较合适。
调整窗口大小事件
- 当窗口大小发生变化时触发。
- 可以利用这个事件完成响应式布局。window.innerWidth：当前屏幕的宽度。
window.onresize = function(){}
window.addEventListener("resize",function(){});
定时器
1. window.setTimeout(调用函数，延迟的毫秒数)
- 延迟时间可以省略，省略则默认为0。
- 一个页面可能有很多个定时器，所以通常会给定时器加上标识符（名字）。
let timer1 = setTimeout(fun1,3000);
let timer2 = setTimeout(fun2,2000);
- 清除/停止setTimeout()定时器,timeoutID:定时器名字
window.chearTimeout(timeoutID);
2. setInterval(回调函数，间隔的毫秒数)
- 第一次执行setInterval时可能会存在页面空白，可以采用封装函数的方式，先调用一次该函数。
fun();
setInterval(fun,1000);
function fun(){.....};
- 清除/停止setInterval()定时器,timeoutID:定时器名字
window.chearInterval(timeoutID);
this
- 一般情况下，this最终指向的是调用它的对象。
- 全局作用域或者普通函数中的this指向全局对象window(包括定时器)。
- 方法调用中谁调用，this就指向谁
let f = {
fun:function(){
console.log('this');
}
}
o.fun();
JS执行机制
- js最大的特点就是单线程，即所有任务都需要排队。如果JS执行的时间过长，容易导致页面的渲染不连贯，造成阻塞问题。
同步
- 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的。
- 同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步
- 在一个任务执行尚未结束的过程中去处理另一个任务，执行顺序与任务的排列顺序不一定一致。
- 异步任务：js的异步是通过回调函数实现的，异步任务通常放在任务队列（消息队列）中，不在主线程执行栈，通常有以下三种：
- 普通事件，如click\resize等
- 资源加载，如load/error等
- 定时器，setInteral/setTimeout
执行机制
- 先执行执行栈中的同步任务。
- 异步任务放入任务队列。
- 同步任务执行完毕后，系统按照次序读取任务队列中的异步任务，进入执行栈，开始执行。
- 主线程不断地重复获得任务、执行任务，这种机制叫做事件循环（even loop）。
(function() {
setTimeout(() => {
console.log(0);
});
new Promise(resolve => {
console.log(1);
setTimeout(() => {
resolve();
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
});
Promise.resolve().then(() => console.log(5));
}).then(() => {
console.log(6);
Promise.resolve().then(() => console.log(7));
setTimeout(() => console.log(8));
});
console.log(9);
})();
location对象
- window对象提供了一个location属性，用于获取或者设置窗体的url，并且可以用于解析url。该属性返回的是一个对象，所以也称为对象。
| location对象属性 | 返回值 |
|---|
| location.href |
获取或者设置整个url |
| location.host |
返回主机名（域名） |
| location.port |
端口号或空字符串 |
| location.pathname |
路径 |
| location.search |
参数 |
| location.hash |
片段，即#后面的内容，常见于链接、锚点 |
- 例子：利用location.search实现不同页面的参数传递。
| location对象方法 | 返回值 |
|---|
| location.assign() |
和href一样，可以跳转页面（重定向页面），记录浏览历史，可以后退页面 |
| location.replace() |
替换当前页面，因为不记录离市，所以不能后退页面 |
| location.reload() |
重新加载页面，相当于刷新或f5，如果参数为true则强制刷新 |
navigator对象
- 包含有关浏览器的信息，最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
判断用户用哪个终端打开页面，实现跳转。
<!--一般由服务端去实现-->
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPa|ios|Android|Mobile|BlackBerry|IEMobile)/i))){
window.lacation.href = ""; //移动端
}else{
window.lacation.href = ""; //PC端
}
history对象
| history对象方法 | 作用 |
|---|
| history.back() |
后退功能 |
| history.forward() |
前进功能 |
| history.go(参数) |
前进后退功能，参数如果是1则前进1个页面，-1则后退1个页面 |
PC端网页特效
元素偏移量offset
- 相关属性可以动态的得到该元素的位置（偏移）、大小等
| offset系列属性 | 作用 |
|---|
| element.offsetParent |
返回作为该元素带有定位的父级元素，都没有则返回body |
| element.offsetTop |
返回元素相对带有定位父元素上偏移 |
| element.offsetLeft |
返回元素相对带有定位父元素左边框偏移 |
| element.offsetWidth |
返回自身包括padding、边框、内容区的宽度，不带单位 |
| element.offsetHeight |
返回自身包括padding、边框、内容区的高度，不带单位 |
用处：获取鼠标在盒子内的位置/根据鼠标的移动放大图片区域
元素可视区client
- 可以获取元素可视区的相关信息。例如动态的得到该元素的边框大小、元素大小等。
| client系列属性 | 作用 |
|---|
| element.clientTop |
返回元素上边框的大小 |
| element.clientLeft |
返回元素左边框的大小 |
| element.clientWidth |
返回自身包括padding、内容区的宽度，不包含边框，不带单位 |
| element.clientHeight |
返回自身包括padding、内容区的高度，不包含边框，不带单位 |
- 可以得到元素的大小、滚动距离等数据。
- 如果内容超出了盒子，scroll得到的会是内容的大小。
- 滚动条在滚动时回触发onscroll事件。
| scroll系列属性 | 作用 |
|---|
| element.scrollTop |
返回被卷区的上侧距离，返回数值不带单位 |
| element.scrollLeft |
返回被卷区的左侧距离，返回数值不带单位 |
| element.scrollWidth |
返回自身实际的宽度，不含边框，不带单位 |
| element.scrollHeight |
返回自身实际的高度，不含边框，不带单位 |
浙公网安备 33010602011771号