BOM

BOM

浏览器对象模型。
与浏览器窗口进行交互的对象，核心对象是 window。

一、页面事件

事件	事件名称
☆ 表单提交	onsubmit
☆ 页面加载	onload
卸载页面	onunload
☆ 内容发生改变	onchange
☆ 窗口大小改变	onresize
滚动条移动	onscroll

1、窗口加载事件

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS等），才调用处理程序。
window.onload = function(){}
或者 window.addEventListener(‘load’,function(){});

注：
1、window.onload 传统注册事件方式只能写一次，有多个会以最后一个为准。
2、addEventListener 则没有限制

document.addEventListener(‘DOMContentLoaded’,function(){})
DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表、图片、flash等。
如果页面图片很多，从用户访问到 load 触发需要较长时间，而 DOMContentLoaded 则不会。

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);
});

2、定时器

setTimeout() 或者 setInterval()

setTimeout(调用函数,延迟毫秒数); 只调用一次。
1、调用函数可以直接写函数，或者写函数名或者采取字符串**函数名()**三种形式。
2、一般会给定时器赋值一个标识符（也就是命名）。
var timer = setTimeout(fn,1000);
3、清除定时器
clearTimeout(timerId);
timerId 就是定时器的标识符。

setInterval(调用函数,间隔毫秒数); 重复调用，每隔一段时间调用一次
清除定时器：clearInterval(timesId);

注：
给定时器赋值标识符时，不要在调用定时器的函数里面声明，要在函数外面声明（全局变量）；不然在清除函数时，undefined标识符。

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);
});

错误：

var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');

begin.addEventListener('click', function() { 
	var timer = setInterval(function() { //在函数内部声明，局部变量
    	console.log('ni hao ma');
	}, 1000);
});
stop.addEventListener('click', function() {
	clearInterval(timer);  //timer undefined
});

3、onSubmit、onReset

如果这两个事件中调用的是自定义函数名，则必须在函数名前面加 return 语句，否则，无论返回的值是 true 还是 false ，当前事件返回的值一律都是 true 。

二、JS执行机制

JS 将代码分为同步任务和异步任务。
同步任务：在主线程上执行，形成一个执行栈。
异步任务：将相关函数（回调函数）添加到任务队列中。
①普通事件，如click、resize等
②资源加载，如load、error等
③定时器，包括setInterval、setTimeout 等

执行顺序：
①先执行执行栈中的同步任务
②将异步任务放入异步进程处理，等待操作指令
③完成操作（触发）后，将异步任务放入任务队列中（不执行）
④一旦执行栈中所有的同步任务执行完毕，系统就会依次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

三、location对象

location 属性用于获取或者窗体的URL，并且可以用于解析URL；返回的是一个对象，所以也可称为location对象。

URL的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议 常用的http，ftp，maito等
host	主机（域名）
port	端口号
path	路径
query	参数。键值对的形式，通过&符号分隔开
fragment	片段，链接，锚点

location对象属性	返回值
☆location.href	获取或者设置整个URL
location.host	返回主机（域名）
location.port	返回端口号
location.pathname	返回路径
☆location.search	返回参数
location.hash	返回片段，链接，锚点

location对象方法	返回值
location.assign()	跟 href 一样，可以跳转页面（记录浏览历史，可以后退）
location.replace()	替换当前页面 （不记录历史，不能后退）
location.reload()	重新加载页面 （相当于刷新），参数为true 强制刷新

1、获取URL参数

点提交键后弹到另一页面，将输入的名字显示在另一页面。
login.htm

<form action="index.html">
	用户名： <input type="text" name="uname">
    <input type="submit" value="登录">
</form>

点击跳转后，跳到index.html

<div></div>
<script>
	console.log(location.search); // ?uname=andy
    // 1.先去掉？  substr('起始的位置'，截取几个字符);
    var params = location.search.substr(1); // uname=andy
    console.log(params);
    // 2. 利用=把字符串分割为数组 split('=');
    var arr = params.split('=');
    console.log(arr); // ["uname", "ANDY"]
    var div = document.querySelector('div');
    // 3.把数据写入div中
    div.innerHTML = arr[1] + '欢迎您';
</script>

总结： 跳转到另一页面时，会产生对应的参数。所以我们要用到该参数，就利用 location.search来获取参数，再利用 substr() 截掉符号，再用 split(‘分隔符’) 将字符串转换成数组。

四、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 = "../H5/index.html"; //手机
}else{
	window.location.href = "index.html"; //电脑
}

五、history

与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL。

history对象方法	作用
back()	后退
forward()	前进
go(参数)	前进后退。 1：前进一个页面；-1：后退一个页面

六、PC端网页特效

1、offset

偏移量，可以动态得到元素的位置（偏移），大小等。
①获得元素距离带有定位父元素的位置
②获得元素自身的大小（宽度高度）
③返回的数值不带单位

offset对象属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，没有则返回body
element.offsetTop	返回相对于该元素带有定位的父级元素上方的偏移；没有则以body为准
element.offsetLeft	返回相对于该元素带有定位的父级元素左边的偏移；没有则以body为准
element.offsetWidth	返回自身包括 padding、边框、内容区的宽度
element.offsetHeight	返回自身包括 padding、边框、内容区的高度

2、offset 与 style 的区别：

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

3、鼠标在盒子内位置

①鼠标在页面的位置（e.pageX，e.pageY）
②盒子距离页面的位置（box.offsetLeft，box.offsetTop）
③相减便可得到鼠标在盒子内的位置

4、元素可视区client

client 翻译过来就是客户端

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

5、立即执行函数

普通函数：声明、调用
function fn(){}、fn(); 或者匿名函数 function(){}

立即执行函数：不需要调用，立马能够自己执行的函数
(function(){})()
或者(function(){}())

主要作用：创建了一个独立的作用域，避免了命名冲突。

// 1.(function(){})() 将最后一个小括号当做调用函数，里面也可放实参
(function(a){
	console.log(a);
})(1);

// 2.(function(a){
	console.log(a);
}(1));

6、scroll

scrollt属性	作用
element.scrollTop	返回被卷到上边的内容最顶部距离上边框下沿的距离，不带单位
element.scrollLeft	返回被卷到左边的内容最左侧距离左边框右沿的距离，不带单位
element.scrollWidth	返回自身内容实际的宽度，不含边框，不带单位
element.scrollHeight	返回自身内容实际的高度，不含边框，不带单位

页面被卷去的部分

页面被卷去头部：window.pageYOffset
页面被卷去左侧：window.pageXOffset

7、offset、client、scroll 区别

三大系列	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度
element.clientWidth	返回自身包括padding、内容区的宽度，不包含边框
element.scrollWidth	返回自身内容实际的宽度，不包含边框

主要用法：
1、offset 系列经常用于获得元素位置 offsetLeft、offsetTop
2、client 系列经常用于获取元素大小 clientWidth、clientHeight
3、scroll 系列经常用于获取滚动距离 scrollTop、scrollLeft

七、本地存储

1、数据存储在用户浏览器中
2、设置、读取方便，甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify()编码后存储
5、本地存储里面只能存储字符串的数据格式，可以把数组对象转换为字符串格式 JSON.stringify()
6、获取本地存储的数据，需要把里面的字符串数据转换为对象格式 JSON.parse()

var todolist = [{
	title: '我今天吃八个馒头',
    done: false
}, {
    title: '我今天学习jq',
    done: false
}];
 // 1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
localStorage.setItem("todo", JSON.stringify(todolist));
var data = localStorage.getItem("todo");
// 2. 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
data = JSON.parse(data);
console.log(data[0].title);  // 我今天吃八个馒头

1、sessionStorage

1、生命周期为关闭浏览器窗口
2、在同一个窗口（页面）下，数据可以共享
3、以键值对的形式存储使用
存储数据：sessionStorage.setItem(key,val)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
清空数据：sessionStorage.clear()

2、loaclStorage

1、生命周期永久生效，除非手动删除，否则页面关闭依旧存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3、以键值对的形式存储使用
存储数据：loaclStorage.setItem(key,val)
获取数据：loaclStorage.getItem(key)
删除数据：loaclStorage.removeItem(key)
清空数据：loaclStorage.clear()