在上一篇文章中我们学习了DOM,接下来让我们先通过和DOM的对比来简单了解一下BOM
首先我们先来复习一下DOM:
然后我们来介绍一下BOM:
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性(BOM包含DOM)
window对象是浏览器的顶级对象,它具有双重角色:
代码展示:
<!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是BOM的顶级对象,我们所定义的属性和方法都属于window
// 我们定义一个属性(可以加上window前缀)
var code = 123;
console.log(window.code);
// 我们定义一个方法(可以加上window前缀)
var fn = function() {
// alert也属于window的方法
window.alert('11');
}
window.fn();
</script>
</body>
</html>
我们的JavaScript代码常常在HTML和CSS构造之后才会运行,因而JavaScript代码常常放于HTML的body底部
但是window的窗口加载事件可以改变我们的JavaScript书写位置:
window.onload = function(){}
window.addEventListener('load',function(){})
window.onload是窗口加载事件,当文档内容完全加载完成后会触发该事件,调用其内部的处理函数
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded事件触发,代表仅当DOM加载完毕(不包括图片,flash等)就会执行内部处理函数
注意:
代码展示:
<!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应该写在body末尾,写在这个部分是无法正常使用的 -->
<script>
// 这时就需要采用页面加载事件来等待页面加载完成后再去加载JavaScript内容
// window.onload方法在整个script中只能使用一次,不推荐
window.onload = function() {
// 在里面书写内容
var but = document.querySelector('button');
but.onclick = function(){
alert('我是弹窗')
}
}
// window.addEventListener('load',function(){})可以多次调用,推荐使用
window.addEventListener('load',function(){
alert('页面内容加载完成');
})
// document.addEventListener('DOMContentLoaded',function(){})仅针对DOM的加载,DOM加载后即可使用
document.addEventListener('DOMContentLoaded',function(){
alert('DOM内容加载完成');
})
</script>
<button>点我弹出弹窗</button>
</body>
</html>
我们通过手动拉扯页面边框可以调整页面大小:
window.onresize = function(){}
window.addEventListener('resize',function(){})
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>
<!-- 我们设置一下div的大小,我们希望页面小于一定程度,div消失 -->
<style>
div {
height: 200px;
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
window.addEventListener('load',function(){
// 页面调整大小有两种语法
// window.onresize = function(){}
// window.addEventListener('resize',function({}))
// 其中resize就是调整窗口加载事件,当触发就调用的处理函数
window.addEventListener('resize',function(){
console.log('页面变化了');
})
// 我们希望页面宽度小于800,div隐藏
var div = document.querySelector('div');
window.addEventListener('resize',function(){
if(window.innerWidth < 800){
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>
</html>
window对象为我们提供了两种定时器:
在讲解定时器之前,我们先来了解一下回调函数:
Timeout分为创建和停止:
//创建方法:
window.setTimeout(调用函数,[延迟毫秒数])
//停止方法:
window.clearTimeout(timeout ID)
setTimeout讲解:
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>
// 定时器方法:window.setTimeout(调用函数,{延迟毫秒}),window可以省略
setTimeout(function(){
console.log('3s到了');
},2000)
// 当毫秒数不设置时,默认为0,立即触发
setTimeout(function(){
console.log('立刻触发');
})
// 定时器函数可以是外部函数
function timeback(){
console.log('6s到了');
}
// 我们为了区分定时器,常常会加上标识符
// 当你定义时,这个setTimeout自动开始计时
var timer1 = setTimeout(timeback,6000);
// 我们也可以取消掉定时器setTimeout
// 首先我们定义定时器
var timer = setTimeout(function() {
console.log("10s后爆炸!");
},10000)
// 获得button,在button上捆绑上停止计时器的操作
var button = document.querySelector('button');
button.addEventListener('click',function(){
clearTimeout(timer);
})
</script>
</body>
</html>
Interval分为创建和停止:
//创建方法:
window.setInterval(调用函数,[延迟毫秒数])
//停止方法:
window.clearInterval(Interval ID)
setInterval讲解:
clearInterval讲解:
注意:
代码展示:
<!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 class="begin">点击我开启定时器</button>
<button class="end">点击我终止计时器</button>
<script>
var begin = document.querySelector('.begin');
var end = document.querySelector('.end');
// 注意需要把setInterval的名称定义在外面,使其变为全局变量
var timer = null;
begin.addEventListener('click',function(){
// setInterval(回调函数,【间隔秒数】)
timer = setInterval(function(){
console.log('1s');
},1000);
})
end.addEventListener('click',function(){
clearInterval(timer);
})
</script>
</body>
</html>
在了解JavaScript的执行机制前,我们需要先了解JavaScript的基本信息:
所以在HTML5中,允许JavaScript脚本建立多个线程,于是出现了同步和异步:
同步:
异步:
同时也就区分出同步任务和异步任务:
同步任务:
异步任务:
因而JavaScript的执行机制如下:
我们给出一张图片来解释上述内容:
在学习location对象之前,我们先来了解一下URL:
统一资源定位符(URL)是互联网上标准资源的地址.
互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
组成
说明
protocol
通信协议 常用的http,ftp,maito
host
主机(域名)
port
端口号 可选. 省略时使用方案的默认端口
path
路径 由零个或多个'/'隔开的字符串,一般用来表示主机上的一个目录或文件地址
query
参数 以键值对的形式,用&隔开
fragment
片段 #后面内容常用于连接 锚点
在了解了URL之后我们来介绍一下location:
location对象属性和方法
返回值
location.href
获得或设置 整个URL
location.host
返回主机(域名)
location.port
返回端口号 若没有返回空字符串
location.pathname
返回路径
location.search
返回参数
location.hash
返回片段
location.assign
和href,用来跳转页面(附带历史记录)
location.replace
和href,用来跳转页面(不附带历史记录)
location.reload
重新加载该页面(ctrl+F5)
代码展示:
<!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>
<--我们希望点击该按键后,出现提示n秒后跳转页面,并在倒计时结束后跳转页面-->
</head>
<body>
<button>点击我5s后跳转页面</button>
<div></div>
<script>
var button = document.querySelector('button');
var div = document.querySelector('div');
button.addEventListener('click',function(){
// 在点击后,出现倒计时:
var time = 5;
setInterval(function(){
if(time == 0){
//在这里我们使用href来跳转页面
location.href = 'https://www.baidu.com/';
} else {
// 这里注意div修改文字用innerHTML
div.innerHTML = '还剩下' + time + '秒后跳转页面';
time--;
}
},1000)
})
</script>
</body>
</html>
<!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>
<--这部分我们来讲解location的三种方法-->
</head>
<body>
<button>assign</button>
<button>replaca</button>
<button>reload</button>
<script>
var buttons = document.querySelectorAll('button');
// assign跳转页面,且保留历史记录
buttons[0].addEventListener('click',function(){
location.assign('https://www.baidu.com/');
})
// replace跳转页面,不保留历史记录
buttons[1].addEventListener('click',function(){
location.replace('https://www.baidu.com/');
})
// reload刷新页面,类似于ctrl+f5
buttons[2].addEventListener('click',function(){
location.reload();
})
</script>
</body>
</html>
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发给服务器的user-agent头部信息,用来判断你目前使用的机型
我们常用下述代码来判断你打开的网页是电脑端还是手机端:
if(navigator.userAgent.match(各种手机品牌)) {
//如果是手机,就转到手机端页面
window.location.href = "https://www.baidu.com/";
} else {
//如果是电脑,就转到电脑端页面
window.location.href = "http://news.baidu.com/";
}
window对象给我们提供了history对象,与浏览器历史记录进行交互,该对象包含了用户访问过的URL
history对象方法
说明
history.back()
可以后退网页(类似于浏览器自带后退按键)
history.forward()
可以前进网页(类似于浏览器自带前进按键)
history.go(参数)
可以自定义前进后退页面(参数可以是正负数)
好的,关于BOM的知识我们就讲解到这里,你是否完全明白了呢?
手机扫一扫
移动阅读更方便
你可能感兴趣的文章