BOM
一、BOM概述
1.BOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window. 2.BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 3.BOM缺乏标准, JavaScript语法的标准化组织是ECMA . DOM的标准化组织是W3C , BOM最初是Netscape浏览器标准的一部分。
浏览器对象模型
把浏览器当作一个对象来看待
BOM的顶级对象是window
BOM学习的是浏览器窗口交互的一些对象
二、BOM的顶级对象window
window对象是访问浏览器窗口的一个接口
window对象是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window,对话框都属于window对象的方法,如alert()、prompt()等。
三、window对象的常见事件
1.窗口加载事件
语法:
1.window.onload = function() {};
或:window.addEventListener("load",function() {});
2.document.addEventListener('DOMContentLoaded',function() {});
说明:
1.window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
2.DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等,加载速度更快。IE9以上支持
注意:
1.有了window就可以把JS代码写道页面元素上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。
2.window.onload传统注册事件方式只能写一次,如果多个,会以最后一个window.onload为准。若使用addEventListener则没有限制。
代码示例:注意script位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// window.onload = function() {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function() {
// alert('点击我');
// })
// }
// window.onload = function() {
// alert(22);
// }
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('点击我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
// load 等页面内容全部加载完毕,包含页面dom元素 图片 flash css 等等
// DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
</script>
</head>
<body>
<button>点击</button>
</body>
</html>
2.调整窗口大小事件
语法:.window.onresize = function() {} ;
或:window.addEventLinstner("resize",function() {});
说明:
window.onresize是调整窗口大小时加载事件,触发时就调用的处理函数
注意:
1.只要窗口大小发生像素变化,就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>
</html>
3.两个定时器
(1) setTimeout() 定时器
语法:window.setTimeout(调用函数,[延迟的毫秒数]);
说明:
setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数
注意:
1.window在调用时可以省略
2.延迟时间单位时毫秒,可以省略,若省略默认的是0
3.这个调用函数可以直接写函数 也可以 写函数名,还可以写 '函数名()'但是不推荐
4.页面中可能有很多定时器,我们经常给定时器加标识符(名字)
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// setTimeout(function() {
// console.log('时间到了');
// }, 2000);
function callback() {
console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我们不提倡这个写法
</script>
</body>
</html>
补充:
setTimeout()这个调用函数我们也称回调函数callback
普通函数是按照代码顺序直接调用,但是个函数需要等待时间,时间到了才去执行,故称回调函数。
(2)setInterval()定时器
语法:window.setInterval(回调函数,[间隔的毫秒数]);
说明:
setInterval()方法重复调用一个函数,每间隔这个时间,就去调用一次回调函数。
注意:
1.window在调用时可以省略
2.延迟时间单位时毫秒,可以省略,若省略默认的是0
3.这个调用函数可以直接写函数 也可以 写函数名,还可以写 '函数名()'但是不推荐
4.页面中可能有很多定时器,我们经常给定时器加标识符(名字)
代码示例:
<script>
serInterval(function() {
console.log('继续输出');
},1000);
</script>
(3)停止定时器
语法:
1.window.clearTimeout(timeoutID);
2.window.claerInterval(intervalID);
说明:
两种方法都可以取消先前通过调用而建立的定时器
注意:
1.window可以省略。
2.里面的参数就是定时器的标识符。
代码示例:
setTimeout():
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
});
</script>
setInterval():
<body>
<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量 null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('ni hao ma');
}, 1000);
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
</body>
补充:
定时器里面的this指向window。
四、window对象的重要组成对象
1.location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象 ,所以我们将这个属性也称为location对象。
(1) URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL ,它包含的信息指出文件的位以及浏览器应该怎么处理它。
语法格式:
protocol://host[:port]/path/[?query]#fragment
eg: http://www.itcast.cn/index.html?name=andy&age=18#link
- protocol: 通讯协议 常用http,ftp,maito等
- host: 主机(域名) www.itcast.com
- port: 端口号 可选,省略时使用方案的默认端口为80
- path: 路径 由零个或多个'/'符号隔开的字符串,一般用来表示主机的一个目录或文件地址
- query: 参数 一键值对的形式,通过&符号分隔开来
- fragment: 片段 #后面内容 常见于链接锚点
(2) location 对象的属性
1.location.href: 获取或者设置 整个URL (重点)
2.location.host: 返回机主(域名) www.itcast.com
3.location.port: 返回端口号 如果未写返回 空字符串
4.location.pathname: 返回路径
5.location.search: 返回参数 (重点)
6.location.hash: 返回片段 #后面的内容 常见于链接 锚点
<body>
<button>点击</button>
<script>
var btn =document.querySelector('button');
btn.addEventListener('click', function() {
//console.log(location.href);
location.href = 'www.itcast.con';
})
</script>
</body>
(3) location 对象的方法
1.location.assign(): 跳转页面 (也称为重定向页面)
2.location.replace():替换当前页面,因为不记录历史,所以不能后退页面
3.location.reload(): 重新加载页面,相当于刷新按钮或者 f5 如果参数为true 则为强制刷新 ctrl+f5
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
//记录浏览器历史,所以实现后退功能
//location.assign('http://www.itcast.con');
//不记录浏览历史,所以不可以实现后退功能
//location.replace('http://www.itcast.con');
location.reload(true);
})
</script>
</body>
2.navigator 对象
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转navigator.userAgent
if((navigator.userAgent.match(/(phone|Ipad|pod|iPhone|iPod|ios|ipad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUCI|Fennec|wOSBrowser|BrowserNG|Webos|Symbian|windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href =""; // 电脑
3.history 对象
window对象给我们提供了一个history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
history对象方法:
1.back(): 可以后退功能
2.forward(): 前进功能
3.go(参数): 前进后退功能 参数如果是 1 前进1个页面 如果是-1 后退1个页面
<body>
<a href="">点击我去首页</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
//history.back();
history.go(-1);
})
</script>
</body>