什么是BOM?
BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
- bom把浏览器当做一个对象来看待
- bom的顶级对象是window
- bom学习的是浏览器窗口窗口交互的一些对象
- bom是浏览器厂商在各自浏览器上定义的，兼容性较差
BOM的构成
window包含document,location,navigation,screen,history
window对象
window是BOM的顶级对象，它具有双重角色
- 它是js访问浏览器窗口的一个接口
- 它是一个全局对象，定义在全局作用域中的变量，函数，都会变成window对象的属性和方法。在调用的时候可以省略window,如alert(),prompt()等
window对象的常见事件
1.窗口加载事件
1. window.onload:当文档内容完全加载完成会触发该事件
常用：window.onload =function(){ }或者
window.addEventListener('load',function(){})；
2.document.addEventListener('DOMContentLoaded',function(){}):仅当DOM加载完成时(即不包括样式表，图片，flash）事件即被触发
2 调整窗口大小加载事件
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。常和window.innerwidth连用，常利用该事件完成响应式布局。
常用：window.onresize=function(){}或者window.addEventListener('resize',function(){})
3 定时器
1..setInterval():重复调用一个函数，每隔一段时间，就去调用一次该函数
语法规范：window.setInterval(调用函数，延迟时间)
这个调用函数可以直接写函数，或者写函数名等形式
2.停止setInterval()定时器
window.clearInterval(intervalID)
3.setTimeout():设置一个定时器，在定时器到期后执行调用函数。只调用一次
语法规范：window.setTimeout(调用函数，延迟时间)
4. 停止setTimeout()定时器
window.clearTimeot(timeoutID)
eg:
<img src="" class="ad>
<script>
var ad=document.querySelector('.ad');
setTimeout(function(){
ad.style.display='none'},5000);
</script>
location对象
1.location对象的方法
| location对象的方法 | 返回值 |
|---|---|
| location.assign() | 跟href一样，可以跳转页面 |
| location.replace() | 替换当前页面 |
| location.reload() | 重新加载页面 |
注意：
1.location.assign() 记录浏览历史，可以实现后退功能
2.location.replace()不记录浏览历史
3.location.reload()如果里面参数为true则为强制刷新。
如何获取URL
主要利用location.search;方法
eg:
log.html
<body>
<form action="index.html">
姓名：<input type="text" name="uname">
<input type="submit" value="登录">
<form>
</body>
index.html
<body>
<div></div>
<script>
console.log(location.search);//得到?uname=某某某
var x=location.search.substr(1);//去掉前面的问号
var y=x.split('=');
var z=documnet.querySelector('div');
div.innerHTML = y[1];
</script>
</body>
navigation对象
navigation对象包含有关浏览器的信息，，它有很多属性，我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
if((navigator.userAgent.match(/(phone|pad|iPhone...)/i)))
{ window.location.href="";
}else{
window.location.href="";
}
history对象
history对象让我们与浏览器历史记录进行交互，该对象包含用户访问过的URL
| history对象方法 | 作用 |
|---|---|
| back() | 后退功能 |
| forward() | 前进功能 |
| go() | 前进后退功能，参数如果是1，则前进一个页面，参数如果是-1，则后退一个页面 |
语法：history.back();=history.go(-1);
history.forward();=history.go(1);
screen对象
Screen 对象包含有关客户端显示屏幕的信息。
（没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。）
screen 对象属性
具体使用：screen.width等等
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
