JS第三部分--BOM浏览器对象模型

一、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(定时器对象); //清除一次性定时器