JS中的BOM

一、Bom的基本概述

1.1 Bom的概述

• Bom是浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
• BOM由一系列相关的对象构成，并且每个对象都提供了许多方法与属性
• BOM缺乏标准，JS语法的标准化组织是ECMA，DOM标准化组织是W3C，BOM最初是Nerscape浏览器标准的一部分。

1.2 Bom的构成

1.2.1 window对象

window对象的基本概念

• window对象是浏览器的顶级对象，具有双重角色
• 它是JS访问浏览器窗口的一个接口
• 它也是一个全局对象，定义在全局作用域中的变量、函数都会编程window对象的属性和方法，在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert（）、prompt（）等

window常见的事件

窗口加载事件

• window.onload = function( ){ } / window.addEventListener( “load” , function( ){ });
• 概念： 当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数
• 注意事项：有了window.onload就可以把JS代码写到页面元素的上方，因为onload等页面内容全部加载完毕，再去执行函数，但是该传统注册方式只能够写一次，如果有多个，以最后一个为准。但是使用window.addEventListener(“load”,function(){})无限制。
• window.addEventListener(“DOMContentLoaded,function(){}”):等DOM内容加载完毕就可以执行，不包含图片、flash、css等，加载速度比load快。

	//先弹出alert再显示btn按钮
	window.addEventListener('load', function() {
		var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('点击我');
            })
        })
        window.addEventListener('load', function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
        })
       // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
       // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

调整窗口大小事件

• window.onresize = function( ){ } / window.addEventListener( “resize” function( ){ });
• 概念：只要窗口大小发生变化，就触发这个事件，常用这个二十九完成响应式布局。

	window.addEventListener('load', function() {
    var div = document.querySelector('div');
    window.addEventListener('resize', function() {
          console.log(window.innerWidth);
          console.log('变化了');
          if (window.innerWidth <= 800) {
                 div.style.display = 'none';
                } else {
                  div.style.display = 'block';
                }
            })
        })

定时器

• window对象提供了两种定时器：setTimeout( )、setInterval( )

1. window.setTimeout(调用函数，[延迟的毫秒数])；也叫回调函数:该定时器在到期后执行调用函数，window可以省略，这个调用函数可以直接写函数，或者写函数名或者采取字符串 函数名() 三种形式 最后一种不推荐。延迟的毫秒数可以省略，默认为0，单位为毫秒。因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

function callback() {
            console.log('爆炸了');
        }
        var timer1 = setTimeout(callback, 3000);

2. 停止setTimeout（）定时器：window.clearTimeout(timeoutID)

btn.addEventListener('click', function() {
            clearTimeout(timer);
        })

3. window.setInterval(回调函数，[间隔毫秒数])；定时器

• 重复调用一个函数，每个这个事件就调用一次
• window可以省略、可以直接写函数/函数名/字符串，默认间隔毫秒数为0，单位为毫秒，因为定时器很多所以经常附标识符

//每隔一秒打印出一个
setInterval(function() {
            console.log('继续输出');
        }, 1000);

4. 清除定时器：clearInterval( ){ }

//点击stop按钮后清除定时器
stop.addEventListener('click', function() {
            clearInterval(timer);
        })

this指向问题

1. 一般情况下this的最终指向的是那个调用它的对象
2. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
3. 方法调用中谁调用this,this就指向谁
4. 构造函数中this指向构造函数的实例

js执行队列

1. JS是单线程：同一个时间只能够做一件事，所有的任务需要排队执行，前一个任务结束后才执行下一个任务。
2. 同步和异步：HTML5中提出，允许JS脚本创建多个线程，于是js种出现了同步和异步。JS执行机制先执行执行栈中的同步任务，异步任务放入任务队列中，当执行栈中所有的同步任务执行完毕时，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈种执行。
   由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环。

1.2.2 location对象

location对象的基本概念

1. window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以我们将这个属性也成为location对象。

URL：统一资源定位符

1. 格式：protocol://host[:port]/path/[?query]#fragment
2. 概念：是互联网上标准资源的地址，每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
3. 各部分组成的解析说明

location对象的属性

location对象的方法

1.2.3 navigation对象

1. 概念：navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
2. 下面前端代码可以判断用户那个终端打开页面，实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowse|JUC|Fennec|WOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
        window.location.href = ""; //手机端
        } else {
            window.location.href= ""; //电脑
            }

1.2.4 history对象

1. 概念：window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包括用户再浏览器窗口种访问过的URL。
   2.常见对象方法及其作用

二、PC端网页特效

2.1 元素偏移量offset系列

2.1.1 offset基本概念和常用属性

• offset的概念：就是偏移量的意思，使用offset系列相关属性可以动态的得到元素的位置、大小等。获得的元素距离带有定位父元素的位置，获得元素自身大小，且返回值均不带单位。
• 常用属性

2.1.2 offset和style区别

2.2 元素的可视区client系列

• 概念：client就是客户端的意思，使用client系列相关属性来获取元素的可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
• 常用属性

扩展知识：立即执行函数

• 立即执行函数的作用：创建了一个独立的执行区域，避免了命名冲突问题
• 语法格式

//无参数时
function fn() {
            //函数体内容
        }
        fn();
//需要传入参数时
(function(形参) {
	//函数体
})(实参)
(function(形参){
	//函数体
}(实参));

2.3 Scroll系列

2.3.1 scroll的常用属性

• scroll的概念：scroll就是滚动的意思，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
• • 常用属性

2.4 总结

2.4.1 三大系列的大小对比

扩展知识：mouseenter和mouseover的区别

• 当鼠标移动到元素上时会触发mouseenter事件
• 类似mouseover但是它们之间有区别：mouseover鼠标经过自身盒子会触发，经过子盒子还会触发（事件冒泡），但是mouseenter只会经过自身盒子触发
• mouseleave搭配mouseenter使用，也不会有事件冒泡

动画函数的封装

• 实现原理：通过定时器setInterval()不断移动盒子位置(注意：移动的元素需要添加定位，才能使用element.style.left)
• 需要传递的参数：动画对象和移动到的距离
• 缓动效果原理
• 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。
• 核心思路：让盒子的移动距离慢慢变小，速度就会慢慢落下来。
• 算法公式：（目标值-现在的位置）/10=每次移动的距离步长。
• 停止条件：让当前盒子位置等于目标位置就停止定时器。