JavaScript-BOM学习归纳总结

JavaScript-BOM学习归纳总结

现在所说的JavaScript包含了三个部分

1. ECMAScript：js的语法规范
2. DOM：操作网页的功能
3. BOM：操作浏览器的功能

BOM（Browser Object Model，浏览器对象模型）

1.window对象

window对象是js中的全局变量，也叫做顶级对象
常见的window对象：
① document alert
② 全局中的变量，函数
③ BOM的属性和方法

（1）入口函数（window.onload = function(){}）
当页面加载完成的时候来执行这个函数，这个功能叫做入口函数
注意点：
① 不仅需要页面加载完成，还需要等待外部资源（img，css，js）加载完成；
② 存在覆盖问题

window.onload = function(){
   
	var box = docunment.querySelector('#box');
	box.onclick = function(){
   
		alert(1);
	}
}

（2）window.open 与window.close
作用：第三方登录会用到

窗口打开语法：window.open(url, name, desc)
参数：
① url：需要打开网页的网址
② name：页面窗口名称，可选的（可通过window.name去获取页面的名称）
③ desc：设置打开的网页的特征，可选的（写法：‘width=xx,heigth=**xx’）
关闭窗口：window.close()

btn1.onclick = function(){
   
	newWin = window.open('http://www.baidu.com', 'demo', 'width=300,height=300,left=100,top=100')
}
btn2.onclick = function(){
   
	// window.close();	// 关闭当前
	newWin.close();		// 窗口调用close方法，关闭窗口
}

2.延时器

语法：setTimeout(function(){}, delay)
参数：
① function(){} 需要延迟执行的函数
② delay：延时的时间，单位为ms
返回值：返回延时器的id，用于后面清除延时器

// 第一种写法
setTimeout(fn, 300