BOM浏览器对象模型，从常见事件，定时器，JS执行队列，location，navigator，history方面
DOM和BOM的区别
DOM
BOM
文档对象模型
浏览器对象模型
把文档当做一个对象来看待
把浏览器当做一个对象来看待
顶级对象是document
顶级对象是window
主要学习的是操作页面的元素
主要学习的是浏览器窗口交互的一些对象
标准是w3c
浏览器厂家在浏览器上定义的，兼容性较差
我作图水平不太好，又没对齐QAQ一、常见事件
1.窗口加载事件
a.window.onload=function(){}
注意全部加载完再执行代码,所以这个就不用必须按代码执行顺序写
是传统的注册事件的方式，只能写一次，如果有多个，以最后一个为准<body>
<scrit>
window.onload=function(){
varbtn=document.querySelector('button');
btn.addEventListener("cck",function(){
alert('少年');
})
}
<scrit>
<button>花儿<button>
<body>b.window.addEventListener(‘load’,function(){})
注意这个和第一个相比就没有限制了，可以多个
DOM、图片、css、flash…都加载完，再执行代码<body>
<scrit>
window.addEventListener('load',function(){
varbtn=document.querySelector('button');
btn.addEventListener("cck",function(){
alert('少年');
})
})
<scrit>
<button>花儿<button>
<body>c.window.addEventListener(‘DOMContentLoaded’,function(){})
注意这个是只有DOM加载完即可，无需等图片，css，flash…都加载完<body>
<scrit>
window.addEventListener('DOMContentLoaded',function(){
varbtn=document.querySelector('button');
btn.addEventListener("cck",function(){
alert('少年');
})
})
<scrit>
<button>花儿<button>
<body>2.调整窗口大小
a.window.οnsize=function(){}
b.window.addEventListener(“size”,function(){})
注意只要窗口大小发生变化就会触发这个事件
可以完成响应式布局，window.innerWid当前屏幕的宽度，window.innerHeight当前屏幕的高度这里写一下b函数的代码。。。。。。
<body>
<scrit>
window.addEventListener('size',function(){
conse.log(innerWid);
conse.log('大小');
})
<scrit><body>二、定时器
1.设置定时器setTimeout（调用函数或者是直接写的函数，延迟的毫秒数）
注意原名是window.setTimeout(…,…),但是window可以省略
注意是毫秒数，如果不写默认值是0
可以是调用函数，也可以是直接写的函数，还有一种表达方式是’调用的函数名（）’，这种不常用
有很多定时器的时候可以给定时器加标识符（就是起个名字）
这个函数叫做，回调函数callback，等到了时间再回头调用<body>
<scrit>
setTimeout(function(){
conse.log('小明同学');直接写函数
},2000)
<scrit>
<body><body>
<scrit>
functioncallback(){
conse.log('小明同学');
}
setTimeout(callback,2000);这种是调用函数滴
<scrit>
<body>2.清除定时器clearTimeout(定时器的标识符)
<body>
<button>定时器停下来<button>
<scrit>
functioncallback(){
conse.log('小明同学');
}
vartime1=setTimeout(callback,5000);
varbtn=document.querySelector('button');
btn.oncck=function(){
clearTimeout(time1);
}
<scrit>
<body>3.setInterval(回调函数,毫秒数);
注意原名是window.setTimeout(…,…),但是window可以省略
注意是毫秒数，如果不写默认值是0
可以是调用函数，也可以是直接写的函数，还有一种表达方式是’调用的函数名（）’，这种不大常用
有很多定时器的时候可以给定时器加标识符（就是起个名字）
这个函数叫做回调函数callback，等到了时间再回头调用
以上这五条和setTimeout一样
不一样的是setInterval函数每隔调用时间就调用函数，是不断重复的，而setTimeout只调用一次<body>
<scrit>
functioncallback(){
conse.log('小明同学');
}
vartime1=setInterval(callback,2000);
<scrit>
<body>4.清除定时器clearInterval(定时器的标识符)
<body>
<button>定时器停下来<button>
<scrit>
functioncallback(){
conse.log('小明同学');
}
vartime1=setInterval(callback,1000);
varbtn=document.querySelector('button');
btn.oncck=function(){
clearInterval(time1);
}
<scrit>
<body>5.关于is的指向性问题
a.全局作用域或者普通函数中is指向全局变量window（注意定时器里的is指向window）
b.方法调用中谁调用is指向谁
c.构造函数中is指向构造函数的实例
三、JS执行队列
原来JS是单线程的一个时间只能做一件事，为了解决这个问题，JS出现了同步和异步（这里视频里面ink老师这个例子我觉得很生动）
同步：一件事接着一件事做，就像做饭，先十分钟烧水，站着等十分钟水烧开了，再去切菜。
异步：同时做几件事，就像做饭，烧水先把火打开，然后去切菜，锅里的水在烧着，菜也在切着。
同步任务都在主线上执行，形成一个执行线
异步任务通过回调函数实现，异步任务有以下三中类型
1.普通事件，如cck，size
2.资源加载，如load
3.定时器
<body>
<scrit>
conse.log('1');
setTimeout(callback,0);注意这里是零秒哦，按照道理应该立即执行functioncallback(){
conse.log('3');
}
conse.log('2');
<scrit>
<body>输出结果是123先执行执行线中的同步任务。
异步任务放到任务队列中。
一旦执行线中的同步任务执行完，按照次序执行任务队列中的异步任务。
又画画了。。。。
四、location
用于获取或者设置URL，这是在B站截得图获取
<body>
<scrit>
conse.log(location.hf);
<scrit>
<body>设置，可以实现页面跳转功能
<body>
<button>B站<button>
<scrit>
varbtn=document.querySelector('button');
btn.oncck=function(){
location.hf="htts:www.bibi.com";
}
<scrit>
<body>五、navigator
navigator.userAgent可以获得浏览器的版本信息，还有是PC端还是移动端
六、history
相当于执行了浏览器的前进后退按钮
history.back();返回
history.forward();前进
history.go(1);往前进一步
history.go(-1);往后退一步
Hi,欢迎访问爱享IT资料源码下载站