目录
BOM概述
BOM:浏览器对象模型,提供了独立于内容与窗口进行交互的对象,核心对象是window
由一系列相关对象构成,每个对象都有很多属性和方法
DOM和BOM的对比
DOM | BOM |
---|---|
文档对象模型 | 浏览器对象模型 |
把文档当对象 | 把浏览器当对象 |
顶级对象document | 顶级对象window |
主要操作页面 | 主要是浏览器窗口交互的对象 |
W3C标准 | 浏览器产商自定义,兼容性较差 |
BOM的组成
window对象是浏览器的顶级对象,
是JS访问浏览器窗口的一个接口,
是一个全局对象,定义在全局作用域的变量、函数都会变成它的属性和方法,
调用时可以省略window,比如alert(), prompt()
<script>
var num=10;
function func(){
alert('aaa');
}
console.log(window.num);
window.func();
</script>
一个特殊属性window.name,自带,打印出来是空的,取名字应该避免取name
window对象的常见事件
窗口加载事件
文档内容全部加载完触发onload
//两种写法
window.οnlοad=function(){}
window.addEventListener('load',function(){});
加了onload可以把js代码放到head标签里,
传统onload只能写一次,如果写了多个以最后一个为准,
使用addEventListener没有限制
//DOMContentLoaded
document.addEventListener('DOMContentLoaded',function(){});
DOMContentLoaded仅当DOM加载完成,不包括样式表图片等,IE9+支持,多图片适用
调整窗口大小事件
窗口大小发生变化就触发resize
//两种写法
window.οnresize=function(){}
window.addEventListener('resize',function(){});
经常使用这个完成响应式布局,window,innerWidth窗口的宽度
//窗口小于800像素宽就不显示div
<script>
var div=document.querySelector('div');
window.onresize=function(){
if(window.innerWidth<800){
div.style.display='none';
}else{
div.style.display='block';
}
}
</script>
定时器
setTimeout()
定时器到期后触发
window.setTimeout(调用函数/函数名,[延迟的毫秒数]); //毫秒数省略默认0
或者
setTimeout(调用函数/函数名,[延迟的毫秒数]);
<script>
function func(){
alert('定时器');
}
window.setTimeout(function(){
alert('延迟0秒');
});
window.setTimeout(function(){
alert('延迟2秒');
},2000);
window.setTimeout(func,5000);
</script>
五秒后关闭广告
<script>
var div=document.querySelector('div');
setTimeout(function(){
div.style.display='none';
},5000);
</script>
关闭setTimeout定时器
window.clearTimeout(定时器标识符);
点击按钮停止定时器
<script>
var btn =document.querySelector('button');
var timer=setTimeout(function(){
alert('5s到了');
},5000);
btn.addEventListener('click',function(){
clearTimeout(timer);
});
</script>
setInterval()
每隔多少秒调用一次函数
window.setInterval(回调函数/函数名,[间隔的毫秒数]); //不写默认为0s
关闭setInterval定时器
window.clearInterval(定时器标识符);
每60s发送一次短信
<script>
var btn =document.querySelector('button');
btn.addEventListener('click',function(){
btn.disabled=true;
var time=60;
var timer=null;
timer=setInterval(function(){
time--;
console.log(time);
if(time==0){
btn.disabled=false;
btn.innerHTML='click';
clearInterval(timer);
console.log('a');
}else{
var content='还剩'+time+'秒';
btn.innerHTML=content;
}
},1000);
})
</script>
this
this的指向在函数定义时是确定不了的,只有函数执行的时候才能确定this指向,一般指向调用的对象
全局作用域中或者函数中的this指向window, 定时器里面的this也指向window
<script>
console.log(this);
function func(){
console.log(this);
}
func();
setTimeout(func);
</script>
方法调用中谁调用,this指向谁
<script>
var obj={
say:function(){
console.log(this);
}
}
obj.say(); //打印obj
var btn=document.querySelector('button');
btn.onclick=function(){
console.log(this); //打印button
}
</script>
构造函数中的this指向构造的对象
<script>
function Per(){
console.log(this);
}
var p=new Per();
</script>
JS执行机制
JS的一大特点是单线程,即同一时间只能做同一件事。
问题:如果单一任务执行时间较长,就会导致页面渲染不连贯。
同步和异步
同步:按顺序执行任务,前一个任务结束才能进行下一个任务。
异步:做一个任务的同时可以进行另一个任务。
<script>
console.log(1);
setTimeout(function(){
console.log(3);
},1000);
console.log(2);
//打印顺序 123
</script>
同步任务:在主线程上执行,形成一个执行栈。
异步任务:JS的异步通过回调函数实现,分三类:
1、普通事件,如click、resize等
2、资源加载,如load、error等
3、定时器,包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中。
<script>
console.log(1);
setTimeout(function(){
console.log(3);
},0);
console.log(2);
//打印顺序 123
</script>
执行机制
先执行 执行栈 中的同步任务,异步任务(回调函数)放入任务队列中。
执行栈中的同步任务执行完再执行任务队列里的异步任务。
事件循环
主线程不断获得任务、执行任务、再获取任务、再执行的过程。
location对象
window对象的一个属性,用于获取或设置窗体的url,可以用于解析url,因为这个属性返回的是一个对象,所以称为location对象。
URL
统一资源定位符,是互联网上标准资源的地址。
格式
protocol://host[:port]/path/[?query]#fragment
通信协议 主机名 端口号 文件目录地址 参数 片段(锚点)
location对象的属性
案例:5s后自动跳转页面
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click',function(){
location.href='http://www.baidu.com';
});
var time = 5;
setInterval(function(){
if(time ==0){
location.href = 'http://www.baidu.com';
}else{
div.innerHTML = time + '秒后跳转到百度';
time--;
}
},1000);
</script>
案例:表单提交数据到另一个页面
/** 登录页 输入用户名:andy **/
<form action="index.html">
<input type="text" name="username">
<input type="submit" value="登录">
</form>
/** 主页 **/
<script>
console.log(location.search); //?username=andy
//去掉问号
var username=location.search.substr(1);
//用=分隔
var arr=username.split('=');
console.log(arr[1]);
</script>
location对象的方法
assign: 和href一样可以跳转页面,可以后退
replace: 替换不记录历史记录,所以不能后退页面
navigator对象
包含有关浏览器的信息,常用的属性userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
判断用户用哪个终端打开页面
<script>
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|oPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQbrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
window.location.href=''; //手机
}else{
window.location.href=''; //电脑
}
</script>
history对象
后退
history.back();
history.go(-1);
前进
history.ho(1);