目录
一、BOM
1、什么是BOM
BOM(Browser Object Model)即
浏览器对象模型
,它提供了独立于内容而与
浏览器窗口进行交互
的对象,
其核心 对象是 window。
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最
初是Netscape 浏 览器标准的一部分
DOM
| BOM |
---|---|
文档对象模型 |
浏览器对象模型
|
DOM 就是把「文档」当做一个「对象」来看待 | 把「浏览器」当做一个「对象」来看待 |
DOM 的顶级对象是 document | BOM 的顶级对象是 window |
DOM 主要学习的是操作页面元素 | BOM 学习的是浏览器窗口交互的一些对象 |
DOM 是 W3C 标准规范 | BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差 |
2、BOM的构成
BOM 比 DOM 更大,它包含 DOM。
window 对象是浏览器的顶级对象,
它具有双重角色。
1. 它是 JS 访问浏览器窗口的一个接口。
2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt() 等。
注意:
window下的一个特殊属性 window.name
二、window 对象的常见事件
1、窗口加载事件
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
// 方式1
window.onload = function () {};
// 方式2
window.addEventListener('load', function () {});
注意:
- 有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕, 再去执行处理函数。
- window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
IE 9以上才支持
2、调整窗口大小事
window.onresize = function(){}window.addEventListener("resize",function(){});
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数
注意:
- 只要窗口大小发生像素变化,就会触发这个事件。
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
三、定时器
1、定时器方法
方法 | 说明 |
---|---|
setTimeout() | 在指定的毫秒数后调用函数或执行一段代码 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或执行一段代码 |
clearTimeout() | 取消由setTimeout()方法设置的定时器 |
clearInterval() | 取消由setInterval()设置的定时器 |
window.setTimeout(调用函数, [延迟的毫秒数]);
setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数
setTimeout() 这个调用函数我们也称为
回调函数 callback
普通函数是按照代码顺序直接调用。
而这个函数,
需要等待
时间,时间到了才去调用这个函数,因此称为回调函数。
2、案例1:3秒后自动关闭广告
案例分析:
① 核心思路:5秒之后,就把这个广告隐藏起来
② 用定时器setTimeout
// 三秒后自动关闭广告
<script>
var timer = setTimeout(fn, 3000);
function fn() {console.log('广告关闭了');}
</script>
3、案例2:发送短信
点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信
案例分析:
① 按钮点击之后,会禁用 disabled 为true
② 同时按钮里面的内容会变化, 注意 button 里面的内容通过 innerHTML修改
③ 里面秒数是有变化的,因此需要用到定时器
④ 定义一个变量,在定时器里面,不断递减
⑤ 如果变量为0 说明到了时间,我们需要停止定时器,并且复原按钮初始状态。
//HTML 代码
<div>
<label for="">
手机号:
<input type="text" name="" id="">
<button>发送</button>
</label>
</div>
//js 代码
//1.获取
var btn=document.querySelector('button');
var time=60; //定义剩下的秒数
btn.addEventListener('click',function(){
btn.disabled=true; //按钮不可用
// 2.创建定时器 setInterval
var timer = setInterval(function () {
if (time == 0) {
//2.1清除定时器
clearInterval(timer);
//2.2让按钮可用
btn.disabled = false;
//2.3让按钮的文本变为‘发送’
btn.innerHTML = '发送';
time=60;
}
else {
btn.innerHTML = '还剩' + time + '秒';
time--;
}
}, 1000)
})
效果如下: