JavaScript基础12--BOM属性和方法介绍

BOM

BOM（Browser Object Model）：浏览器对象模型，提供了一套操作浏览器功能的工具。

BOM包含的内容很多，但是很多东西都不太常用，在BOM中需要大家掌握的就一个东西，那就是定时器 。

window对象

1. window对象是一个全局对象，也可以说是JavaScript中的顶级对象
2. 像document、alert()、console这些都是window的属性，其实BOM中基本所有的属性和方法都是属性window的。
3. 所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法
4. window对象下的属性和方法调用的时候可以省略window

window.onload

window.onload事件会在窗体加载完成后执行，通常我们称之为入口函数。

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

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

浏览器会对页面的加载做优化，在加载图片的时候，图片的引入会延迟。

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：常用属性

window.document 也是DOM的顶级对象，用于操作浏览器中的页面功能。
window.console 用于操作浏览器中的控制台功能。
window.location 用于操作浏览器中的地址栏相关功能
window.history 用于操作浏览器中的历史记录相关功能。
window.navigator 用于操作浏览器与系统的一些相关信息。

window中的常用方法

window.alert(); 弹出提示框
window.confirm(); 弹出确认提示框（询问）
window.prompt(“提示内容”，“提示框里面的默认内容”); 弹出提示框允许用户输入内容。

location对象,保存了用于进行地址栏操作的相关功能。

跳转相关功能：

1. location.href = ‘http://www.baidu.com’; 点击按钮可以实现跳转。可以后退。
2. location.assign(“www.baidu.com”);同上
3. location.replace(“www.baidu.com”);实现跳转，无法返回，后退。

刷新功能：

1. location.reload(); 刷新页面，参数里写true 是强制刷新。
2. console.log(window.location.hash);//哈希值 其实就是锚点
3. console.log(window.location.host);//服务器 服务器名+端口号 ，例如www.baidu.com:8080 ,8080就是端口
4. console.log(window.location.hostname);//服务器名,www.baidu.com/index.html; www.baidu.com就是服务器名
5. console.log(window.location.port);//端口 www.baidu.com/index.html:8080 8080就是端口。
6. console.log(window.location.pathname);//路径名 www.baidu.com/index.html ；/index.html就是路径
7. console.log(window.location.protocol);//协议，例如http:// 、 https:// 、file://
8. console.log(window.location.search);//参数,例如：https://www.baidu.com/s?wd=有道&rs 后面的wd=%E6%9C%89%E9%81%93&rs就是参数。

navigator属性

1. navigator.userAgent; // 用户代理字符串：浏览器版本(可以修改)
2. navigator.platform //用来获取电脑平台信息。

history对象
表示页面的历史
后退：
history.back();
history.go(-1);
前进：
history.forward();
history.go(1);

screen对象
window.screen 对象包含有关用户屏幕的信息。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

定时器

延时定时器 timeout

延时定时器可以让代码延迟一段时间之后才执行（定时炸弹）

设置延时定时器

//语法：setTimeOut(callback, time);
//参数1：回调函数，时间到了就会执行。
//参数2：延时的时间
//返回：定时器的id，用于清除
//示例：
var timer = setTimeOut(function(){
	//1秒后将执行的代码。
}, 1000);

清除延时定时器

//语法：clearTimeOut(timerId)
//参数：定时器id
//示例：
clearTimeOut(timer);//清除上面定义的定时器

间隔定时器 interval

间隔定时器让定时器每隔一段时间就会执行一次，并且会一直执行，直到清除定时器为止

设置间隔定时器

//语法：var intervalID = setInterval(func, delay);
//参数1：重复执行的函数
//参数2：每次间隔的毫秒数
//返回：定时器的id，用于清除
//示例：
var timer = setInterval(function(){
	//重复执行的代码。
}, 1000);

清除间隔定时器

//语法：clearInterval(intervalID)
//参数：定时器id
//示例：
clearInterval(timer);//清除上面定义的定时器

实际上两个定时器的清除方式可以交换使用，clearInterval和clearTimeout可以交换使用，但是不推荐这样做。