BOM01-定时器与offset系列

BOM

什么是BOM？

browser object model：浏览器对象模型，操作浏览器的一些方法。

windows对象

1. window对象是js中的顶级变量，是一个全局的对象。
2. alert() prompt()console.log()等等都是window对象的方法。
3. 平时使用的时候，都会把window给省略。
4. 全局变量其实就是window的属性，全局函数是window的方法。

window.onload

window.onload事件会在页面加载好并且所有图片都加载完成之后才可以执行。

window.onlord又叫入口函数。

如果有图片加载，那么代码一定要写到window.onload里面，否则会出现图片没有加载完成，获取到的宽度和高度不对的情况。

注意：window.onload如果写了多个，后面会覆盖前面的。

window.onload=function(){
    //里面的代码会在窗体加载完成后执行。
    //窗体加载完成包括文档树的加载、还有图片、文件的加载完成。
}

window.open与window.close

window.open（）//打开一个窗口

语法：window.open(url, [name], [features]);
参数1：需要载入的url地址
参数2：新窗口的名称
//_self:在当前窗口打开
//_blank:在新的窗口打开
参数3：窗口的属性，指定窗口的大小
返回值：会返回刚刚创建的那个窗口，用于关闭
示例：
var newWin = window.open("http://www.baidu.com","_blank", "width=300,height=300");

window.close()关闭窗口
newWin.close()；//newWin是刚刚创建的那个窗口
window.close();//把当前窗口给关闭了

window.location

location.href="url" //跳转到指定页面
location.reload(true)//页面强制刷新，如果不传参数为普通刷新

//刷新和强制刷新
//刷新：如果浏览器地址不变，浏览器会去读取缓存
//强制刷新：浏览器不会去读取缓存

window.navigator

navigator.userAgent:可以获区浏览器的版本信息

浏览器兼容性检测

能力检测：判断有没有这个能力，如果没有就用另一种方式。（常用）

代理检测：判断浏览器版本

history对象

对象可以让页面前进或者后退

后退：
history.back();
history.go(-1);
前进：
history.forward();
history.go(1);

screen对象

console.log(screen.width);//屏幕的宽度 
console.log(screen.height);//屏幕的高度
console.log(screen.availWidth);//浏览器可占用的宽度
console.log(screen.availHeight);//浏览器可占用的高度

定时器

延时定时器

//语法
setTimeOut（function,dealy）
//参数1:时间到了调用这个函数，参数2：延迟的时间（毫秒），返回值：定时器的ID

var timer = null;
//设置延时定时器(5秒后爆炸）
timer=setTimeout（function（）{
    console.log("boom")
}，5000）

//清除延时定时器
clearTimeOUT（TIMER）
//参数：定时器的id

间歇定时器

//语法
//设置间歇定时器
setInterval（function,dealy）
//参数1:调用这个函数，参数2：多少时间重复执行（毫秒），返回值：定时器的ID

//清除间歇定时器
clearInterval（Timer）
//参数：定时器的id

注意：定时器里不能使用this（定时器里this代表window对象）

定时器的实质：设置了一个定时器，就是让window每隔1秒钟执行1次function

动画

offset系列

offset Width与offset Height

//与style.width的区别
style.width：
1.只能获取行内的样式
2.获取到的是字符串格式
3.可以设置宽度，记得带单位

offset width：
1.获取自身的宽度（padding，border也会获取）
2.获取到的是数值类型，可以直接进行计算
3.offsetwidth是只读属性，只能获取不能设置

offsetParent

距离自己最近的有定位的父元素

//与parentnode的区别
parentnode:
找自己最近的父元素
offsetParent:
找离自己最近有定位的父元素

offsetleft与offsettop

//与style.left的区别
style.left：
1.只能获取行内的样式
2.获取到的是字符串格式
3.可以设置距离，记得带单位

offsetLeft：
1.获取与offsetParent的真实距离（margin也会获取）
2.获取到的是数值类型，可以直接进行计算
3.是只读属性，只能获取不能设置