BOM(Browser Object Model)是浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM有一系列对象构成。没有标准,兼容性比较差。
DOM的核心对象是document。
BOM比DOM更大,包含了DOM。
window对象的常见事件
页面加载事件
window.onload()是窗口页面加载事件,当文档内容完全加载完成后会触发该事件。有了该事件,就可以把JavaScript代码放到页面的任何地方。
DOMContentLoaded事件,仅当DOM加载完成就触发,不包括样式表,图片等。可以看出该事件比上述onload事件加载更快。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('load', function() {
alert(123)
})
document.addEventListener('DOMContentLoaded', function() {
alert(12345)
})
</script>
</body>
</html>
执行代码可以发现,先弹出12345,再弹出123。
调整窗口大小事件
当浏览器窗口大小变化时,会触发该事件。
window.onresize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('resize', function() {
console.log('窗口大小发生变化')
})
</script>
</body>
</html>
定时器
setTimeout()
语法:window.setTimeout(调用函数,延迟的毫秒数)
在定时器到期后执行调用函数。window调用的时候可以省略。
这里面的调用函数称为回调函数callback,需要等待时间到了,才调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
setTimeout(function() {
console.log('2s时间到了');
}, 2000)
function fn() {
console.log('三秒时间到了');
}
//注意这两种调用方法均可以
setTimeout(fn, 3000)
setTimeout('fn()', 3000)
</script>
</body>
</html>
停止定时器
window.clearTimeout(timeoutID)
经常给定时器起一个名字,clearTimeout里面放的就是定时器的名字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script>
var btn = document.querySelector('button')
var timer = setTimeout(function() {
console.log('5s时间到了');
}, 5000)
btn.addEventListener('click', function() {
window.clearTimeout(timer)
})
</script>
</body>
</html>
setInterval()
语法:window.setInterval(调用函数,间隔的毫秒数)
每隔一个时间,就去调用一次回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var timer = setInterval(function() {
console.log('2s时间到了');
}, 2000)
</script>
</body>
</html>
同样,这个定时器也可以停止。
语法:window.clearInterval(intervalID)
this指向问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//一般情况下,this的最终指向的是那个调用它的对象
//全局作用域或普通函数中this指向全局对象window,定时器里面的this指向window
console.log(this);
function fn() {
console.log(this);
}
fn()
//方法调用中,谁调用this指向谁
var o = {
sayHi: function() {
console.log(this);//指向o这个对象
}
}
o.sayHi()
</script>
</body>
</html>
JavaScript执行机制
JavaScript语言的一大特点是单线程,就是同一个时间只能做一件事。这样的话就会有一个问题,就是前面有一段代码执行时间过长,使得下面代码无法执行。
Javascript最新的标准,允许JavaScript脚本创建多个线程。为了解决这个问题,就提出了同步和异步。
同步:前一个任务结束后再执行下一个任务,程序的执行顺序与任务的排列顺序一致。
异步:在做这件事的同时,还可以处理其他事情,例如烧水的同时还可以切菜。
Javascript的执行机制是将所有的同步任务放到主线程的执行栈中。JavaScript的异步是通过回调函数实现的。常见的异步任务有以下三种类型
- 普通事件 click、load 不点击是不会添加到任务队列中。
- 资源加载 load、error
- 定时器 setInterval、setTimeout
异步任务相关回调函数添加到任务队列中。
JavaScript的执行机制是:
- 先执行执行栈中的同步任务。
- 异步任务放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕后,系统会依次读取任务队列中的异步任务。
location对象
location属性用于获取或设置窗体的URL,或者用于解析URL。返回的是一个对象。
在url中 ?后面的是query。表示参数,以键值对的形式,通过&符号分隔开来。
#后面内容是片段,常见于链接、锚点。
location对象的属性
对象属性 | 返回值 |
---|---|
location.href | 获取或设置整个URL |
location.host | 返回主机域名 |
location.port | 返回端口号 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- //点击按钮实现跳转页面 -->
<button>按钮</button>
<div></div>
<script>
var btn = document.querySelector('button')
var div = document.querySelector('div')
var timer1 = 5
btn.addEventListener('click', function() {
location.href = 'https://hao.360.com/?a1004'
})
//5s后实现自动跳转页面
var timer = setInterval(function() {
if (timer1 == 0) {
location.href = 'https://hao.360.com/?a1004'
} else {
div.innerHTML = '将在' + timer1 + '秒后跳转页面'
timer1--
}
}, 1000)
</script>
</body>
</html>
获取url参数实现两个页面传值,可以看284视频。
navigator对象
navigation对象包含有关浏览器的相关信息,可以判断用户是使用手机端还是浏览器端打开了页面。也可以获得系统或浏览器的版本号。