js DOM 和 BOM 学习第四天
目录
1. BOM概述
1.1 什么是BOM
- BOM(Browser Object Model),浏览器对象模型,它提供了独立于内容的与浏览器窗口进行交互的对象,核心对象:window
- BOM由一系列对象组成,对象有多属性和方法
- BOM缺乏标准,js标准ECMA,DOM标准W3C,BOM最初是NetScape浏览器标准
图解
BOM结构图
1.2 BOM的构成
- window对象是浏览器的顶级对象
- 它是js访问浏览器的一个接口
- 它是一个全局对象,定义在其中的变量和函数都成为了它的属性和方法
- window有一个特殊属性:window.name,默认是空
示例
<!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>
// 1.顶级对象window
window.alert(11);
alert(11);
console.log(window.name);
function f1(){
console.log(12);
}
f1();
window.f1();
</script>
</body>
</html>
- 效果图
2. window 对象的常见事件
2.1 窗口加载事件
window.οnlοad=function(){}
window.addEventListener('load',function(){})
- 当窗口内容(css样式表,图片,脚本文件等)全部加载完毕后在执行处理函数
- 有了这个,就可以把js代码写在页面元素的上方
- 传统写法以最后一个为准,监听器方法可写多个
2.1.2 开发中更常用的窗口加载事件
document.addEventListener('DOMContentLoaded',function(){})
- 当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>
<script>
// 1.提高窗口加载事件使script文件放在元素前
window.addEventListener('load',function(){
alert('555');
})
//
window.addEventListener('load',function(){
var btn=document.querySelector('button');
btn.onclick=function(){
alert('666')
}
})
// DOM页面加载完毕(html元素加载完毕)
window.addEventListener('DOMContentLoaded',function(){
alert('777');
})
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>
- 效果图
2.2 调整窗口大小事件
window.οnresize=function(){};
window.addEventListener('resize',function(){})
- 窗口大小发生改变,事件触发
- window.innerWidth当前屏幕的宽度
示例
<!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>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
window.addEventListener('load',function(){
var div=document.querySelector('div');
// 当前窗口宽度小于900px是,隐藏粉色盒子
window.addEventListener('resize',function(){
if(window.innerWidth<='900'){
div.style.display='none';
}else{
div.style.display='block';
}
})
})
</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
- 效果图
3. 定时器(window对象的方法)
3.1 setTimeout定时器
window.setTimeout(调用函数,延迟的毫秒数(默认是0))
- 延迟毫秒数后执行调用函数,调用一次
注意点
- 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>
// 1.setTimeout定时器
// window可省略
var timer1=setTimeout(function(){
alert(666);
},2000);
// 推荐给定时器起名
function f1(){
alert('777');
}
// 调用函数的第二种写法
var timer2=setTimeout(f1,5000);
</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>
</head>
<body>
<img src="./images/ad.jpg" alt="">
<script>
// 1.让图片在5秒后自动隐藏
var img=document.querySelector('img');
setTimeout(function(){
img.style.display='none';
},5000)
</script>
</body>
</html>
- 效果图
3.2 停止定时器
window.clearTimeout(定时器的名字)
- 清除指定的定时器,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>
<button>停止计时器</button>
<script>
// 1.设置定时器
var timer=setTimeout(function(){
alert(888)
},5000);
// 2.停止计时器
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
clearTimeout(timer);
})
</script>
</body>
</html>
- 效果图
3.3 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>
// setInterval定时器
setInterval(function(){
console.log(100);
},2000)
</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>
<style>
*{
padding: 0;
margin: 0;
}
.box div{
margin:15px;
float: left;
width: 100px;
height: 100px;
background-color: #000;
color: #fff;
font-size: 40px;
text-align: center;
line-height: 100px;
}
.box {
width: 600px;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
<div class="hour">1</div>
<div class="minute">2</div>
<div class="second">3</div>
</div>
<script>
var inputTime=+new Date('2022-2-20 23:00');//返回用户输入时间的总毫秒数
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
// 先执行一次
countDown();
// 设置一个定时器
setInterval(countDown,1000)
function countDown(){
var nowtime=+new Date();
var restTime=(inputTime-nowtime)/1000;
var s=parseInt(restTime%60);
// 前补零
s=s<10? '0'+s:s;
second.innerHTML=s;
var m=parseInt(restTime/60%60);
m=m<10? '0'+m:m;
minute.innerHTML=m;
var h=parseInt(restTime/60/60%24);
h=h<10? '0'+h:h;
hour.innerHTML=h;
}
</script>
</body>
</html>
- 效果图
3.4 停止setInterval定时器
window.clearInterval(intervalID)
- 取消之前通过调用setInterval()建立的定时器
- 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>
<button>开启定时器</button>
<button>停止定时器</button>
<script>
var begin=document.querySelector('button');
var stop=begin.nextElementSibling;
var timer=null;
begin.onclick=function(){
timer=setInterval(function(){
console.log('输出');
},1000)
}
stop.onclick=function(){
clearInterval(timer)
}
</script>
</body>
</html>
- 效果图
3.5 this指向
- 全局作用域和普通函数中的this指向顶级对象window(定时器里面的this也是window,定时器也是window对象的方法)
- 方法调用时谁调用方法指向谁
- 构造函数中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>
<button>按钮</button>
<script>
// 1.全局作用域下和普通函数this指向
console.log(this);
function fn1(){
console.log(this);
}
fn1();
// 2.方法调用者
var o={
sayhi:function(){
console.log(this);
}
}
o.sayhi();
var btn=document.querySelector('button');
btn.onclick=function(){
console.log(this);
}
// 3. 构造函数的this指向
function Fan(){
console.log(this);
}
var fun=new Fan();
</script>
</body>
</html>
- 效果图
4.js执行机制
4.1 js执行机制为单线程
- 同一时间只能做一件事
4.2 同步和异步
- HTML5提出了web worker标准,允许js创建多线程
- 同步:前一个任务执行完毕后再去执行下一个任务
- 异步:在做这件事的同时可以处理其他事件
示例
<!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>
// 由于h5 提出的标准,会异步执行该流程代码
console.log(1);
setTimeout(function(){
console.log(3);
},3000)
console.log(2);
</script>
</body>
</html>
- 效果图
4.3 同步任务和异步任务
-
同步任务
- 同步任务都在主线程上执行,形成一个执行栈
-
异步任务
- js的异步是通过回调函数来实现的
-
异步任务的类型
- 普通事件:click,resize
- 加载事件:load,error
- 定时器:setInterval,setTimeout
-
异步任务相关的回调函数添加到任务队列(消息队列)中
-
图解
4.4 js执行机制
- 先执行执行栈中的同步任务
- 遇到含有回调函数的同步任务,将回调函数放入消息队列
- 继续执行执行栈中的同步任务
- 当执行栈中所有同步任务执行完毕后,再去消息队列执行异步任务
示例
<!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>
// 根据任务执行机制,得到1 2 3
console.log(1);
setTimeout(function(){
console.log(3);
},0);
console.log(2);
</script>
</body>
</html>
- 效果图
图解
- 主线程不断的重复获得任务,执行任务,再获取,执行任务,这种机制称为事件循环(event loop)
一个实例
<!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>
// 先处理执行栈任务,在执行消息队列任务,循环检测消息队列是否存在任务
console.log(1);
document.onclick=function(){
console.log('click');
}
console.log(2);
setTimeout(function(){
console.log('timeout');
},3000)
</script>
</body>
</html>
- 效果图
5.location对象
5.1 什么是location对象
- window对象提供的一个属性
- 获取或设置窗体的url,可以解析url,返回的是一个对象
5.2 URL
-
统一资源定位符(Uniform Resource Locater)
-
包含的信息指出文件的位置已经浏览器应该怎么处理它
-
一般的语法格式
protocol://host[:port]/path/[?query]#fragment http://www.itcast.cn/index.html?name=andy&age=18#link
- []包裹的内容可选
-
组成
组成 | 说明 |
---|---|
protocol | 通信协议 |
host | 主机(域名) |
port | 端口号,http默认端口80,可省略 |
path | 路径 由零或多个’/'隔开的字符串,表示主机上一个目录或文件地址 |
query | 可选参数,以键值对形式呈现,用&号隔开 |
fragment | 片段 #后面内容 常用于链接锚点 |
5.3 location对象的属性
- 通过window提供的location属性返回的是一个location对象
- 对象属性
location对象属性 | 返回值 |
---|---|
location.href | 获取或设置整个URL |
location.host | 获取主机(域名) |
location.port | 获取端口号,如果未写,返回空串 |
location.pathname | 获取路径名 |
location.search | 获取参数 |
location.hash | 返回片段,#后面内容 |
示例
5s后跳转页面案例
<!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>
<div>
</div>
<script>
var div=document.querySelector('div');
var cnt=5;
f1();
// 5s后跳转到百度首页
setInterval(f1,1000)
function f1(){
if(cnt===0){
location.href='https://www.baidu.com/';
}else{
div.innerHTML='还有'+ cnt+'s后跳转到首页';
cnt--;
}
}
</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>
</head>
<body>
<form action="index.html">
<input type="text" name="uname">
<button type="submit">登录</button>
</form>
</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>
</head>
<body>
<div>
</div>
<script>
// 1.获取login来的参数
var info=location.search;
// console.log(info);
// 2.去掉uname中的问号
// 从下标1开始取,第二个参数不写,取到底
var sub=info.substr(1);
// 将字符串分隔成键值对
var arr=sub.split('=');
// 获取值给div
var div=document.querySelector('div');
div.innerHTML=arr[1]+'欢迎你';
</script>
</body>
</html>
- 效果图
5.4 location 对象的方法
location对象方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(重定向页面),可以后退 |
location.replace() | 替换当前页面,不能后退 |
location.reroad() | 重新加载页面,相对于刷新,如果参数为true,相对于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>
</head>
<body>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
// 1.跳转到新页面,可后退
// location.assign('https://www.baidu.com/');
// 2.替换当前页面,不可后退
// location.replace('https://www.baidu.com/');
// 3.刷新页面
location.reload();
})
</script>
</body>
</html>
- assign效果图
- replace效果图
- reload效果图
6. navigator 对象
- 包含有关浏览器的信息,它由许多属性,最常用的:userAgent,该属性值返回由客户机发送服务器的user-agent头部的值
- 下面前端代码可以判断用户哪个终端打开,实现跳转
7.history 对象
- window提供的对象
- 与浏览器历史记录进行交互,该对象包含用户(在浏览器窗口)中访问过的URL
history 对象方法 | 作用 |
---|---|
back() | 可以后退功能 |
forword() | 前进功能 |
go(参数) | 前进后退功能,如果是1,前进1步,-1则后退一步 |
示例
-
首页
<!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> <a href="./list.html">前往列表页</a> <button>前进</button> <script> var btn=document.querySelector('button'); btn.onclick=function(){ history.forward(); } </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> </head> <body> <a href="./index.html">回到首页</a> <button>回退</button> <script> var btn=document.querySelector('button'); btn.onclick=function(){ history.back(); } </script> </body> </html>
-
效果图
8.课后作业
1.电子时钟
<!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>
<style>
div{
width: 400px;
font-size: 20px;
margin: 100px auto;
background-color: skyblue;
text-align: center;
}
</style>
</head>
<body>
<div></div>
<script>
function getCurTime(){
var date=new Date();
console.log(date);
var year=date.getFullYear();
var month=date.getMonth();
var dates=date.getDate();
var hour=date.getHours();
hour=hour<10 ? '0'+hour : hour;
var minute=date.getMinutes();
minute=minute<10 ? '0'+minute : minute;
var second=date.getSeconds();
second=second<10 ? '0'+second : second;
var day=date.getDay();
var days=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return year+'年'+month+'月'+dates+'日'+days[day]+' '+hour+':'+minute+':'+second;
}
var div=document.querySelector('div');
div.innerHTML=getCurTime();
setInterval(function(){
div.innerHTML=getCurTime();
},1000)
</script>
</body>
</html>
- 效果图
2. 光棍节倒计时
<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 500px;
margin: 100px auto;
/* background-color: pink; */
text-align: center;
}
.box h2{
margin-bottom: 30px;
}
.box span{
display: inline-block;
text-align: center;
height: 30px;
width: 60px;
line-height: 30px;
}
.box span:nth-of-type(1){
color: orange;
}
.box span:nth-of-type(n+2){
color: #fff;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<h2>距离光棍节,还有</h2>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<script>
var iptTime=new Date('2022-11-11 00:00:00');
var rDay=document.querySelector('span');
var rHour=rDay.nextElementSibling;
var rminute=rHour.nextElementSibling;
var rsecond=rminute.nextElementSibling;
getCntTime();
setInterval(getCntTime,1000);
function getCntTime(){
var nowTime=new Date();
var restTime=(iptTime-nowTime)/1000;
var s=parseInt(restTime%60);
s=s<10? '0'+s:s;
rsecond.innerHTML=s+'秒';
var m=parseInt(restTime/60%60);
m=m<10? '0'+m:m;
rminute.innerHTML=m+'分';
var h=parseInt(restTime/60/60%24);
h=h<10? '0'+h:h;
rHour.innerHTML=h+'时';
var day=parseInt(restTime/60/60/24);
rDay.innerHTML=day+'天';
}
</script>
</body>
</html>
- 效果图