BOM
BOM: 浏览器对象模型 核心对象是window
BOM比DOM更大,包含了DOM
window对象是浏览器的顶级对象
1.它是JS访问浏览器的一个接口
2 .它是全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法,在调用时可以省略window
window对象的常见事件
1.窗口加载事件
window.onload=function(){}
//当文档内容全部加载完成会触发该事件
//window.onload传统注册事件方式只能写一次,如有多个,会以最后一个window.onload为准
//或者
window.addEventListener('load',function(){});
document.addEventListener('DOMContentLoaded',function(){});
//DOM加载完毕,不包含图片 falsh css等就可以执行,加载速度比load更快一些
2.调整窗口大小事件
window.onresize=function(){}
//只要窗口大小发生像素变化,就会触发这个事件 响应式布局
//或者
window.addEventListener('resize',function(){});
window.innerWidth 当前屏幕的宽度
定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
//设置一个定时器,该定时器在定时器到期后调用函数
//调用函数可以直接写函数 函数名 还可以'函数名()'
//页面有很多定时器,我们经常给定时器加标识符(名字)
//这个调用函数也叫回调函数callback
window.setInterval(回调函数,[间隔的毫秒数])
//与第一种方法不同的是 setInterval()方法会重复调用一个函数,每隔这个时间,就去调用一次回调函数
停止setTimeout定时器
window.clearTimeout(timeoutID)
停止 setInterval()定时器
window.clearInterval(intervalID)
倒计时案例:
var hour = document.querySelector('.hour')
var minute = document.querySelector('.minute')
var second = document.querySelector('.second')
var inputtime = +new Date('2023-1-5 00:00:00');
setInterval(countDown, 1000);
function countDown() {
var nowtime = +new Date();
var times = (inputtime - nowtime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
hour.innerHTML = h;
var m = parseInt(times / 60 % 60);
minute.innerHTML = m;
var s = parseInt(times % 60);
second.innerHTML = s;
}
this
this的指向在函数的定义时确定不了,只有函数执行的时候才能确定
一般情况下this的最终指向的是那个调用它的对象
1.全局作用域或普通函数中this指向全局对象window(注意定时器里面this指向window)
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例
JS执行队列
JS的一大特点就是单线程,同一个时间只能做一件事情
console.log(1);
setTimeout(function(){
console.log(3)
},10000);
console.log(2);
//打印2需要等待10秒钟,所以系统自动执行第三个任务
//1 2 3
为了解决问题,利用多核CPU的计算能力,H5提出web worker标准,允许JS脚本创建多个线程。于是,JS中出现了同步和异步。
异步:做这件事的同时可以做其他另外的事
console.log(1);
setTimeout(function(){
console.log(3)
},0);
console.log(2);
//输出仍然1 2 3 why??
同步任务都在主线程上执行,形成一个执行栈
//同步任务
//在主线程执行栈
console.log(1);
setTimeout(fn,0)//回调函数不属于同步任务
console.log(2);
//异步任务
//任务队列(消息队列)
function(){
conole.log(3);
}
//异步任务
//1.普通事件 click resize等
//2.资源加载 load error等
//3.定时器 setInterval setTimeout等
异步任务
1.普通事件 click resize等
2.资源加载 load error等
3.定时器 setInterval setTimeout等
JS的执行机制
1..先执行执行栈中的同步任务
2.异步任务(回调函数)放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕,系统就会按照次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
有多个异步任务会先进行异步进程处理,在把异步任务放入消息队列中
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)
location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL
URL:统一资源定位符 是互联网上标准资源的地址
语法格式:
protocol://host[:port]/path/[?query]#fragment
protocol: 通信协议 http ftp maito等
host: 主机(域名) www.baidu.com
port 端口号 可选,省略时使用默认端口 http的默认端口为80
path 路径 由零或多个‘/’符号隔开的字符串,一般来表示主机上的一个目录或文件地址
query 参数 以键值对的形式,通过&符合分隔
fragment 片段 #后面内容常见于链接锚点
location对象的属性
location.href 获取或设置整个URL
location.host 返回主机(域名)
location.port 返回端口号 未写返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段
location对象的方法
location.assign() 可以跳转页面(记录历史)
location.replace() 替换当前页面,因为不记录历史,所以不能后退页面
location.reload() 重新加载页面
navigator 对象
navigator 对象包含有关浏览器的信息,它有很多属性,最常用的是userAgent,该属性可以返回由客户机发生服务器的user-agent头部的值
history对象
与浏览器历史记录进行交互,该对象包含用户访问过的URL
history对象方法
back() 后退功能
forward() 前进功能
go(参数) 前进后退功能 如果是1就前进1个页面 -1就后退一个页面