BOM(Browser Object Model)-window对象

一.BOM-window对象

BOM：Browser Object Model 浏览器对象模型
核心：window对象；
所有的全局变量和局部函数都属于window，都是window的属性和方法，就连DOM的document也是window对象的属性，都可以写成indow.XX，一般会省略window；
window：窗口；
document：文档；

二. window提供的系统警告框

1. alert();–>警告框;

window.alert("警告框"); //一般会省略window;
alert("警告框");

2. confirm; -->带选择的对话框

confirm("确定或者取消"); //返回true-->确定，false-->取消;

3. promt(“提示信息”,默认值)

var s = prompt("请输入数字",3);
console.log(s); -->确定--输入的内容  取消--null

三. opan与close（打开/关闭网页）

1.opan（打开）

语法： opan(url,打开方式,设置窗口大小,新窗口是否取代浏览器记录中的位置)
打开方式：
_self： 在当前窗口打开；
_blank： 在新窗口打开；

2. close()关闭窗口

//没有参数，关闭当前网页
<buttton onclick="window.close()">关闭</button>

四. body位置属性

1. client

clientWidth/clientHeight(元素可视宽高)

1. 元素.clientWidth：元素可视宽;(width + 左右的padding)；
2. 元素.clientHeight：元素可视高度;(height + 上下的padding)；
3. document.documentElement.clientWidth/Height：屏幕的可是宽高；
4. 元素边框
   元素.clientTop：上边框；
   元素.clientLeft：左边框；

2. offset

1. 元素占位宽高
   元素.offsetWidth/Height ：content + padding + border；
2. 元素定位父元素的距离
   1. 元素.offsetTop：当前元素的顶部，到定位父元素的距离，没有定位父元素，到body的距离；
   2. 元素.offserLeft ：当前元素左边，到定位父元素的距离，没有定位父元素，到body的距离；

3.scroll

1. 滚动事件
   onscroll：滚动条滚动的时候调用
2. 屏幕滚动的距离：
   document.documentElement.scrollTop ：获取页面被卷去的高；
   document.body.scrollTop：获取页面被卷去的高；
3. 元素
   元素.scrollTop ：被卷去的高；
   元素.scrollLeft：被卷去的宽；
   元素.scrollWidth ：获取元素实际内容宽；
   元素.scrollHeight ：获取元素实际内容高；

五. 懒加载

先只加载可视窗口区域的图片，当用户向下拖动滚动条的时候再继续加载后面的图片（同样，也只是加载可视窗口区域的图片）；

1. 减少了加载时县城数量，使可视区域内的图片也能够快速加载，优化了用户体验；
2. 减少了同一时间发向服务器的请求数，服务器压力剧减；

方法：在写网页<img>标签时并不会兼顾图片的路径放入src属性，而是自定义一个其他属性:_scr。将路径放入这个自定义的属性中，南无在加载页面时买这个图片一开始是无法加载的，而当浏览器的可是区域移动到此图片上时，将_src中的路径赋值给scr属性，并开始加载。

//获取元素
var oImg = document.getElementsByTagName("img");
//确定那些图片能显示
for(var i = 0;i<oImg.length;i++){
	//当前图片的顶部是否在可视区里面；
	//获取当前元素的顶部距离
	var offsetTop = oImg[i].foosetTop;
	var clientH = document.documentElement.clientHeight;
	var scollTop = document.documentELement.scrollTop || document.body.scrollTop;
	if(offsetTop <= clientH+scollTop){
		oImg[i].scr = oImg[i].getAttribute('_src');
	}
}

六. resize事件

当屏幕发生变化的时候调用
window.onresize = dunction(){
console.log(“屏幕大小发生改变”);
}