BOM浏览器模型
- BOM是浏览器对象模型,主要是给浏览器窗口提供一个交互效果。由一系列对象构成,并且每个对象都提供了很多方法与属性
- BOM缺乏标准,JS语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是网景公司浏览器标准的一部分,兼容性比较差。
- BOM比DOM更大,它包含DOM
- window对象是浏览器的顶级对象,它具有双重角色
他是JS访问浏览器窗口的一个接口。
它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。
在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert(),prompt()等。
window.name 特殊,所以document 命名时 基本不用name()
window对象的常见事件
-
窗口加载事件
window.onload = function() {}
或者
window.addEventListener(“load”,function() {} );
要等整个页面内容,页面dom元素(文档中的标签),图片,flash,css 之类的全都加载完之后才能执行window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数。
注意: 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是电等页面内容全部加载完毕,再去执行处理函数。
window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。
window.addEventListener(‘load’, function(){}); 没有限制 -
DOMContentLoaded
DOM中加载完就可以执行,不包含图片,flash,css等就可以执行 加载速度更快 -
调整窗口大小事件
window.onresize = function () {} 或者
window.addEventListener(“resize”,function(){});
是调整窗口大小加载事件,当触发时就调用的处理函数。
注意: 只要窗口大小发生像素变化,就会触发这个事件。
我们经常利用这个事件完成响应式布局,window.innerWidth 当前屏幕的宽度。
定时器
-
window 对象给我们提供了2个非常好用的方法 - 定时器
(1)
setTimeout(调用函数,[延迟的毫秒数]);
页面中可能有很多的定时器,我们经常给定时器加标时符(给每一个定时器起名字)
秒数为毫秒
```
function callback() {
console.log(‘爆炸了’);} var time1 = setTimeout(callback, 3000); var time2 = setTimeout(callback, 3000);
setTimeout() 这个调用函数我们也称为回调函数 callback  简单理解:回调 , 就是回头调用的意思,上一件事干完,再回头再调用这个函数 **停止setTimeout() 定时器** window.clearTimeout(timeout ID); ==定时器案例==
var ad = document.querySelector('.ad');
var timer = setTimeout(function() {
ad.style.display = 'none';
}, 5000);
//停止定时器
ad.addEventListener('click', function() {
clearTimeout(timer);
console.log('停止');
})
**只调用一次,就结束了这个定时器**
(2)setInterval()定时器
window.setInterval(回调函数,[间隔的毫秒数]);
setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
**每隔间隔时间就调用一次回调函数,会重复调用**
- 倒计时案例,setInterval()定时器
<style>
div {
width: 200px;
margin: 100px auto;
}
span {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 5px;
color: white;
font-size: 18px;
text-align: center;
line-height: 50px;
background-color: black;
}
</style>
</head>
<body>
<!-- 倒计时是不断变化的,因此需要定时器来自动变化(setInterval) -->
<div>
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2020-2-28 10:00:00');
countDown(); //1.先调用一次这个函数,防止第一次刷新页面有空白
//2.开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();
var times = (inputTime - nowTime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
- 发送短信案例
手机号码:<input type="number"><button>发送</button>
<script>
var btn = document.querySelector('button');
var timer = 3; // 剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true; //按钮禁用
var time = setInterval(function() {
if (timer == 0) {
// 清除定时器复原按钮
clearInterval(time);
btn.disabled = false;
btn.innerHTML = '发送';
timer = 3; //这个3让其重新开始
} else {
btn.innerHTML = '还剩下' + timer + '秒';
timer--;
}
}, 1000);
})
</script>
- this
this 的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象
全局变量是window
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例 - JS执行队列
他们的本质区别是:这条流水线上各个流程的执行顺序不同
- location对象
window对象给我们提供给了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
**URL:**统一资源定位符是互联网上标准资源的地址,互联网上的每个文件都有唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
- 表单有了name才能提交
<div></div>
<script>
// console.log(location.search);
//?uname=andy
//先去掉? substr('起始位置',截取几个字符);
var params = location.search.substr(1); //uname=andy
// 利用=把字符串分割为数组 split('=')
var arr = params.split('='); //把字符串分割为数组arr["uname","andy"];
var div = document.querySelector('div');
div.innerHTML = arr[1] + '欢迎你';
</script>
- history对象,就是浏览器的后退和前进按钮,实际开发中比较少用,但是会在OA系统中经常用到