BOM 和offset、client、scroll系列

Web前端学习总结第七周

JavaScript

一、BOM浏览器对象模型

1、BOM概述

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM的构成
window对象是浏览器的顶级对象，它具有双重角色。

1. 它是JS访问浏览器窗口的接口。
2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

2、window对象的常见事件

（1）窗口加载事件

window.onload = function() {
     };
window.addEventListener("load",function() {
     });

window.onload是窗口加载事件，当文档内容（图片，样式表，flash）完全加载完成会触发该事件，就调用处理函数。通俗的说就是用了此事件就可以随便放到代码中的位置。
注意：window.onload传统注册事件方式只能写一次，如果有多个会以最后一个为标准。

document.addEventListener("DOMContentLoaded",function() {
     });

DOMContentLoad事件触发时，仅当DOM加载完成时，不需要图片，样式表，flash加载完成。该事件在图片视频较多的网页中比较适合使用。

（２）调整窗口大小事件

window.onresize = function() {
     };
window.addEventListener("resize",function() {
     });

window.onresize是调整窗口大小加载事件，当触发时就会被调用。
注意：
3. 只要窗口大小发生像素变化，就会触发该事件。
4. 我们经常通过这个事件来响应布局。window.innerWidth当前屏幕的宽度。

3、定时器

（1）setTimeout()

window.setTimeout(调用的函数,延迟的毫秒数);

setTimeout()方法用于设置一个定时器，该定时器到期后执行调用函数。
注意：

1. window可以省略。
2. 这个调用函数可以直接写函数，或者写函数名。

（2）clearTimeout()

window.clearTimeout(timeout ID);

clearTimeout()方法取消了先前通过setTimeout()建立的定时器。里面的参数就是定时器的标识符，需要给定时器定义一个名字。

（3）setInterval()

window.setInterval(调用的函数,延迟的毫秒数);

setInterval()方法重复调用一个函数，每隔这个事件就调用一次回调函数。
它的注意事项和setInterval基本一样。
clearInterval和clearTimeout也基本一致。
倒计时案例：

<script>
	// 1. 获取元素 
	var hour = document.querySelector('.hour'); // 小时的黑色盒子
	var minute = document.querySelector('.minute'); // 分钟的黑色盒子
	var second = document.querySelector('.second'); // 秒数的黑色盒子
	var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
	countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
	// 2. 开启定时器
	setInterval(countDown, 1000);

	function countDown() {
     
		var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
		var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
		var h = parseInt(times / 60 / 60 % 24); //时
		h = h < 10 ? '0' + h : h;
		hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
		var m = parseInt(times / 60 % 60); // 分
		m = m < 10 ? '0' + m : m;
		minute.innerHTML = m;
		var s = parseInt(times % 60); // 当前的秒
		s = s < 10 ? '0' + s : s;
		second.innerHTML = s;
	}
</script>

4、JS的执行队列

JS是单线程执行的，从上到下依次执行，如果有语句需要等待很长事件执行，那么需要等他执行完下面的语句才会执行。

（1）同步与异步

同步
前一个任务结束后在执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步
在执行一个需要很长时间的任务时，在做这件事的同时，还会去处理其他事情。
同步任务
同步任务都在主线程上执行，形成一个执行栈。
异步任务
异步任务有一下三种类型：

1. 普通事件，如click、resize等。
2. 资源加载，如load、error等。
3. 定时器，包括setTimeout、setInterval等。

异步任务相关回调函数放入任务队列中。

（2）JS执行机制

1. 先执行执行栈中的同步任务。
2. 异步任务放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

5、location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以解析URL。

（1）URL

统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置及浏览器应该怎么处理它。
URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment

组成	说明
protocol	通信协议 常用的http,ftp等
host	主机域名
port	端口号可选,省略时使用方案的默认端口
path	路径 由零或多个’/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
query	参数 以键值对的形式 &符号分隔开来
fragment	片段 #后面的内容常见于链接锚点

（2）location 对象的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机域名
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面的内容常见于链接锚点

（3）location 对象的方法

location对象方法	返回值
location.assign()	可以跳转页面,记录浏览历史,可以后退
location.replace()	替换当前页面,因为不记录历史,所以不能后退页面
location.reload	重新加载页面,相当于刷新按钮

6、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 = ""; //电脑
	}

7、history对象

window对象给我们提供了一个history对象,与浏览器历史进行交互,该对象包含用户(在浏览器窗口中)访问过的URL.

history对象方法	作用
back()	可以后退功能
forword()	前进功能
go(参数)	前进后退功能 参数如果是1前进一个1页面,如果是-1 后退1个页面

二、PC端网页特效

1、元素偏移量offset系列

（1）offset属性

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有有定位父元素的位置
2. 获得元素自身的大小（宽度高度）
3. 注意：返回的数值都不带单位

offset系列常用的属性：

offset系列	作用
element.offsetParent	返回作为该元素带有定位的父元素，如果父级没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左侧的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

（2）offset 与 style 的区别

offset	style
offset可以得到任意样式表中的样式值	style只能获得行内样式表中的样式值
offset系列得到的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包括padding+border+width	style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读属性，可以获取也可以赋值
获取元素大小位置，用offset更适合	给元素更改值，则需要用style改变

2、元素可视区client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列	作用
element.clientTop	返回元素上边框大小
element.clientLeft	返回元素左边框大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

3、立即执行函数

立即执行函数: 不需要调用，立马能够自己执行的函数。立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况。
写法：

(function() {
     })()

(function(){
     }());

4、元素滚动scroll系列

scroll翻译过来就是滚动的，我们使用scroll系类的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll系列	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身的实际宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身的实际高度，不含边框，返回数值不带单位