一、client系列：宽高边框
二、offset系列：偏移
三、scroll系列
四、BOM的介绍
4.1.打开新窗口
4.2.location对象（本地信息对象）
4.3.history对象
4.4刷新
五、定时器的相关使用
-------------------------------------------------------
一、client系列：宽高边框
clientTop:上边框宽度
clientLeft:左边框的宽度
clientWidth: 盒子(例如div等)的宽度，包括内容+padding
clientHeight:盒子(例如div等)的高度，包括内容+padding
获取屏幕的可视宽高：就是HTML的宽高
如果对屏幕进行缩放，这个计算结果也会变化
document.documentElement.clientWidth;
document.documentElement.clientHeight;
//窗口大小发生变化，会触发该事件。可以在事件里计算宽高
window.onresize=function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
二、offset系列：偏移
offsetWidth:内容宽度+padding+border
offsetHeight:内容高度+padding+border
offsetTop:如果没有设置定位，到body顶部距离。如果设置定位，以父辈为基准的top值
offsetLeft:如果没有设置定位，到body左边距离。如果设置定位，以父辈为基准的left值
三、scroll系列
scrollTop: 浏览器页面卷起的高度
scrollLeft:
scrollWidth:内容+padding+border
scrollHeight:
滚动的时候触发事件:
window.onscroll=function(){
}
四、BOM的介绍
浏览器对象模型；前进，后退，打开标签页等
window下是浏览器对象，window是BOM和DOM的顶层对象
window
------------------------------------------------------
| | | | | |
BOM-------| frames history location navigator screen
|
|-----------------------------------------------------
|
DOM---document
4.1.打开新窗口
//默认在新窗口打开,写__self是在当前页打开，window可以省略
window.open("www.abc.com","__self")
4.2.location对象（本地信息对象）
console.log(window.location);
-------------------------
localhost:8070/code/BOM/02-location.html
-------------------------
hash:""
host:"localhost:8070"
hostname:"localhost"
href:"localhost:8070/code/BOM/02-location.html"
origin:"localhost:8070/code/BOM/02-location.html"
pathname:"/code/BOM/02-location.html"
port:8070
protocol:"http"
search:?wd=%E%B7.......（地址后面的查询条件）
3.5秒后跳转到www.abc.com
setTimeout(function(){
location.href='www.abc.com';
},5000)
4.3.history对象
前进后退的时候使用history对象
//给点击“前进”的按钮添加事件
$('forward').onclick=function(){
window.history.go(1);
}
//给点击“后退”的按钮添加事件
$('back').onclick=function(){
window.history.go(-1);}
4.4刷新
$('refresh').onclick=function(){
//这两个不常用，因为是全局刷新。局部刷新用ajax
window.history.go(0);
window.location.reload();
}
五、定时器的相关使用
一次性定时器：setTimeout(fn,2000)
循环定时器：setInterval(fn,1000)每一秒走一步，周期性循环，每一秒做的是同样的事情
//一次性定时器,不阻塞，先跑完，过两秒再执行里面的函数
//应用：如果对于数据的请求出现数据阻塞的问题，可以考虑使用一次性定时器
//来执行异步操作
console.log('开始');
setTimeout(function(){console.log('走到尽头了');},2000)
console.log(2222); //开始 2222 （过2秒） 走到尽头了
---
//循环定时器
setInterval(function(){num++;console.log(num);},1000); //间隔一秒打印1,2,3...
注意：用定时器的时候先清除定时器，再开定时器，这样不会有bug
clearInterval(定时器对象); //清除循环定时器
clearTimeout(定时器对象); //清除一次性定时器