js学习-BOM
BOM概述
BOM即浏览器对象模型，独立于内容与浏览器窗口进行交互的对象，核心对象是window；缺乏标准，浏览器厂商在各自浏览器上定义，兼容性较差。
页面加载事件
window.onload = function(){}
//文档内容完全加载完成触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数
document.addEventListener('DOMContentLoaded',function(){})
//仅当DOM加载完成，不包括样式表、图片、flash等，速度快
调整窗口大小事件
window.onresize = function(){}
//调整窗口大小加载事件，触发就调用的处理函数
window.addEventListener('resize',function(){})
//当前屏幕的宽度
window.innerWidth;
//当前屏幕的高度
window.innerHight;
定时器
//多长时间后调用函数,可以直接在内写函数
var time = window.setTimeout(调用函数，[延迟的毫秒数]);
//停止定时器
window.clearTimeout(time);
//反复调用定时器,每隔一定时间调用一次
var timer = window.setInterval(回调函数，[间隔毫秒数]);
//停止定时器
clearInterval(timer);
同步异步
//同步任务都在主线程上执行，形成一个执行栈
//JS异步通过回调函数实现
/*1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
3.一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是
被读取的异步任务结束等待状态，进入执行栈，开始执行
*/
Location对象
//location.search()获取传递过来的数据
var nam = location.search();
var nams = nam.substr(1);
var arr = nams.split('=');
location.assign('url地址')；
//记录浏览历史，可后退
location.replace('url地址')；
//不记录浏览历史，不可后退
location.reload();
//重新加载页面，参数true强制刷新
/
navigator对象
//检测用什么设备打开页面
navigator.userAgent();
history对象
//回退页面功能
history.back();
//前进页面
history.forward();
//参数1前进一个页面，参数-2回退两个页面
history.go(参数);
offset元素偏移
//返回作为该元素带有定位的父级元素，如都没有返回body
element.offsetParent;
//返回元素相对带有定位父元素上方的偏移
element.offsetTop;
//返回元素相对带有定位父元素左边框的偏移
element.offsetLeft;
//返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetWidth;
//返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight;
//style与offset区别
/*style:
1.只能得到行内样式表中的样式值
2.获得的值带有单位，不包括padding和border的值
3.属性可读写
offset：
1.可以得到任意样式表中的值
2.获得数值无单位，包括padding和border的值
3.属性只读，不能赋值*/
//
client元素可视区
//返回元素上边框大小
element.clientTop;
//返回元素左边框大小
element.clientLeft;
//返回自身包括padding、内容区的宽度，不包括边框，返回值不带单位
element.clientWidth;
//返回自身包括padding、内容区的宽度，不包括边框，返回值不带单位
element.clientHeight;
//
立即执行函数
//不需调用，立刻自己执行
(function(){})() 或者 (function(){}())
//独立创建了一个作用域，避免了命名冲突
元素滚动scroll
//返回被卷上去的上侧距离，返回数值不带单位
element.scrollTop;
//返回被卷去的左侧距离，返回数值不带单位
element.scrollLeft;
//返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollWidth;
//返回自身实际的高度，不含边框，返回数值不带单位
element.scrollHeight;
//声明了DTD
document.documentElement.scrollTop;
//未声明DTD
document.body.scrollTop;
//新方法，IE9开始支持
window.pageYoffset;
window.pageXoffset;
/
本地存储
数据存取sessionStorage
-
数据存储在用户浏览器中，生命周期为关闭浏览器窗口，在同一窗口下数据共享
-
设置、读取方便、甚至页面刷新不丢失数据，以键值对方式存储
-
容量较大，sessionStorage约5M、localStorage约20M
-
只能存储字符串，可以将对象JSON.stringify()编码后存储
//存储数据
sessionStorage.setItem(key,value);
//获取数据
sessionStorage.getItem(key);
//删除数据
sessionStorage.removeItem(key);
//删除所有数据
sessionStorage.clear();
数据存取localStorage
-
生命周期永久生效，除非手动删除，否则页面关闭也会存在
-
可以多窗口共享
-
以键值对形式存储使用
//存储数据
localStorage.setItem(key,value);
//获取数据
localStorage.getItem(key);
//删除数据
localStorage.removeItem(key);
//删除所有数据
localStorage.clear();
