文章目录
BOM概述
BOM( Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tBcfohPv-1648194354826)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220325091703591.png)]
window对象是浏览器的顶级对象,它具有双重角色。
-
它是JS访问浏览器窗口的一个接口。
-
它是一个全局对象。定义在全局作用域中的度量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如 alert()、prompt()等。
注意:window下的一个特殊属性window.name
window对象的常见事件
窗口加载事件
window.onload=function(){}
//或者
window.addEventListener('load',function(){})
//ie9以上
window.addEventListener('DOMContentLoaded',function(){})
-
load 等页面内容全部加载完毕,包含页面dom元素图片flash css等等
-
DOMContentLoaded是DOM加载完毕,不包含图片 falsh css等就可以执行加载速度比load更快一些
<script>
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('aiya');
})
})
window.addEventListener('DOMContentLoaded', function() {
alert('33');
})
</script>
<body>
<button>点击</button>
</body>
调整窗口大小事件
window.onresize = function(){}
window.addEventListener('resize',function(){})
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数
注意:
- 只要窗口大小发生像素变化,就会触发这个事件
- 我们经常利用这个事件完成响应式布局,window,innerWidth:当前屏幕的宽度
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
//窗口宽度innerWidth
console.log(window.innerWidth);
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
定时器
window对象提供了两个
- setTimeout()
- setInterval()
setTimeout()
window.setTimeout(调用函数,[延迟的毫秒数]);
setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
setTimeout()这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用。
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
简单理解∶回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
<script>
//延时事件可以省略,默认为0
//调用函数可以直接写函数,也可以写函数名
//页面中可能有多个定时器,给定时器加标识符(名字)
// setTimeout(function() {
// alert('摆烂2秒');
// }, 2000);
function fn() {
alert('boom');
}
var timer1 = setTimeout(fn, 2000);
var timer2 = setTimeout(fn, 5000); //或者这样,但不提倡
</script>
3s关闭广告demo
<img src="../../images/Eminem1.jpg" alt="">
<script>
var pic = document.querySelector('img');
setTimeout(function() {
pic.style.display = 'none';
}, 3000)
</script>
停止setTimeout()定时器
window.clearTimeout(timeoutID)
点击按钮停止定时器
<button>阻止爆炸</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
alert('boom');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
setInterval()定时器
window.setInterval(调用函数,[延迟的毫秒数]);
setInterval0方法重复调用一个函数,每隔这个时间,就去调用一次回调函。
倒计时案例
<div>
<span class="hour">1</span>
<span class="minute">1</span>
<span class="second">1</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2022-3-25 11:00:00'); //返回用户输入的总毫秒数
function countDown(time) {
var nowTime = +new Date(); //返回当前时间的总毫秒数
var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); //天
d = d < 10 ? '0' + d : d;
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; //
return d + '天' + h + '时' + m + '分' + s + '秒';
}
//先调用一次这个函数,防止第一次刷新页面有空白
countDown();
//开启定时器
setInterval(countDown, 1000);
</script>
停止clearInterval()
window.clearInterval(intervalID);
window可省略
<button class="begin">开启定时器</button>
<button class="close">关闭定时器</button>
<script>
var begin = document.querySelector('.begin');
var close = document.querySelector('.close');
var timer = null; //全局变量,null是一个空对象
begin.addEventListener('click', function() {
timer = setInterval(function() {
console.log('hello');
}, 1000)
})
close.addEventListener('click', function() {
clearInterval(timer);
})
</script>
发送短信案例
手机号码:<input type="number">
<button>发送</button>
<script>
var btn = document.querySelector('button');
time = 3;
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval(function() {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 3; //这个3需要重新开始
} else {
btn.innerHTML = '还剩' + time + '秒';
time--;
}
}, 1000)
})
</script>
this
<button>00</button>
<script>
//一般情况下this指向的时调用它的对象
//1.全局作用域或者普通函数中this指向全局对象window(注意定时器里的this也指向window)
console.log(this); //window
function fn() {
console.log(this); //window
}
fn(); //实则为window.fn(),window省略
setTimeout(function() {
console.log(this); //window
}, 1000)
//
//2.方法调用中谁调用this指向谁
var o = {
sayhi: function() {
console.log(this); //this指向o这个对象
}
}
o.sayhi();
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log(this); //指向button
})
//
//3.构造函数中this指向构造函数的实例
function Fun() {
console.log(this); //指向Fun()
}
var fun = new Fun();
</script>
JS执行队列
JS是单线程
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是∶如果JS执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
同步和异步
为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是,JS中出现了同步和异步。
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
异步
你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。
同步任务
同步任务都在主线程上执行,形成一个执行栈
异步任务
JS的异步是通过回调函数实现的
一般而言,异步任务有以下三种类型:
- 普通事件,如click、resize等
- 资源加载,如onload、error等
- 定时器,包括setTimeout、setInterval等
异步任务相关回调函数添加到任务队列中(也成为消息队列)
console.log(1);
setTimeout(function() {
console.log(3);
},0);
console.log(2);
//1,2,3
JS执行机制
由于主线程不断的重复获得任务、执行任务、再获得、再执行,所以这种机制被成为事件循环 eventloop
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XfkViKzt-1648194354828)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220325115117017.png)]
<script>
console.log(1);
document.onclick = function() {
console.log('onclick');
}
console.log(2);
setTimeout(function() {
console.log(3);
}, 3000)
//1,2始终在最前
//3s内点击:出现在3前面
//3秒后点击:出现在后面
</script>
location对象
定义
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
URL
**统一资源定位符(Uniform Resource Locator, 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 | 主机(域名)www.baidu.com |
port | 端口号 可选,省略时使用方案的默认端口 如http的默认端口为80 |
path | 路径 由零或多个’/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址 |
query | 参数 以键值对的形式,通过&符号分隔开来 |
fragment | 片段 #后面内容 常见于链接锚点 |
location对象的属性
location对象属性 | 返回值 |
---|---|
location.href | 获取或者设置整个URL |
location.host | 返回主机(域名)www. |
location.port | 返回端口号 如果未写返回 空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容常见于链接 锚点 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJsXfMUL-1648194354829)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220325143935983.png)]
实现5秒钟后跳转页面
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
console.log(location.href);
location.href = 'http://felikschen.vcn.ink';
})
var time = 5
jump();
var timer = setInterval(jump, 1000)
function jump() {
if (time == 0) {
location.href = 'http://felikschen.vcn.ink';
clearInterval(timer);
time = 5;
} else {
div.innerHTML = '将在' + time + '秒钟后跳转至的我主页';
time--;
}
}
</script>
案例: 传递数据到其他页面
- 第一个登录页面,里面有提交表单,action提交到index.html页面
- 第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果
- 第二个页面之所以可以使用第一个页面的数据,是利用了URL里面的location.search参数
- 在第二个页面中,需要把这个参数提取.
- 第一步去掉?利用substr
- 第二步利用=号分割键和值split( '= )
login.html
<body>
<form action="index.html">
<!--默认是get提交-->
用户名: <input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>
index.html
<body>
<div></div>
<script>
var div = document.querySelector('div');
console.log(location.search); //?uname=feliks
//1.先去掉? substr('起始的位置','截取几个字符')
var params = location.search.substr(1); //uname=feliks
console.log(params);
var arr = params.split('=');
console.log(arr[1]); //feliks
div.innerHTML = '欢迎你,' + arr[1];
</script>
</body>
location对象的方法
location对象的方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(也称为重定向页面) |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 重新加载页面,相当于刷新按钮或者f5 如果参数是true 强制刷新 ctrl+f5 |
navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
window.location.href='';//手机
}else{
window.location.href='';//电脑
}
history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL.
history对象方法 | 作用 |
---|---|
back() | 可以后退功能 |
forward() | 前进功能 |
go(参数) | 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退一个页面 |
index.html
<a href="list.html">点我去列表页</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward();
history.go(1);
})
</script>
list.html
<a href="index.html">点我回主页</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.back();
history.go(-1);
})
</script>
history对象一般在实际开发中比较少用,但是会在一些OA办公系统中见到。