我作图水平不太好，又没对齐QAQ 注意 注意 注意 注意 这里写一下b函数的代码。。。。。。 注意 注意 a.全局作用域或者普通函数中this指向全局变量window（注意定时器里的this指向window） 原来JS是单线程的一个时间只能做一件事，为了解决这个问题，JS出现了同步和异步（这里视频里面pink老师这个例子我觉得很生动） 输出结果是1 2 3 用于获取或者设置URL，这是在B站截得图 navigator.userAgent可以获得浏览器的版本信息，还有是PC端还是移动端 相当于执行了浏览器的前进后退按钮 emmmm昨天写了写其他科的作业，今天接着刷视频来整一下BOM的部分。。。。。我还比较菜，有问题欢迎指正~
BOM浏览器对象模型，从常见事件，定时器，JS执行队列，location，navigator，history方面
DOM和BOM的区别
DOM
BOM
文档对象模型
浏览器对象模型
把文档当做一个对象来看待
把浏览器当做一个对象来看待
顶级对象是document
顶级对象是window
主要学习的是操作页面的元素
主要学习的是浏览器窗口交互的一些对象
标准是w3c
浏览器厂家在浏览器上定义的，兼容性较差
一、常见事件
1.窗口加载事件
a. window.onload = function() { }
<body> <script> window.onload = function() { var btn = document.querySelector('button'); btn.addEventListener("click", function() { alert('少年'); }) } </script> <button>花儿</button> </body> b. window.addEventListener(‘load’, function() { })
<body> <script> window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener("click", function() { alert('少年'); }) }) </script> <button>花儿</button> </body> c.window.addEventListener(‘DOMContentLoaded’, function() { })
<body> <script> window.addEventListener('DOMContentLoaded', function() { var btn = document.querySelector('button'); btn.addEventListener("click", function() { alert('少年'); }) }) </script> <button>花儿</button> </body> 2.调整窗口大小
a.window.οnresize=function(){ }
b.window.addEventListener(“resize”, function() { })
<body> <script> window.addEventListener('resize', function() { console.log(innerWidth); console.log('大小'); }) </script> </body> 二、定时器
1.设置定时器setTimeout（调用函数或者是直接写的函数，延迟的毫秒数）
<body> <script> setTimeout(function() { console.log('小明同学');//直接写函数 }, 2000) </script> </body> <body> <script> function callback() { console.log('小明同学'); } setTimeout(callback, 2000);//这种是调用函数滴 </script> </body> 2.清除定时器clearTimeout(定时器的标识符)
<body> <button>定时器停下来</button> <script> function callback() { console.log('小明同学'); } var time1 = setTimeout(callback, 5000); var btn = document.querySelector('button'); btn.onclick = function() { clearTimeout(time1); } </script> </body> 3.setInterval(回调函数, 毫秒数);
以上这五条和setTimeout一样
不一样的是setInterval函数每隔调用时间就调用函数，是不断重复的，而setTimeout只调用一次<body> <script> function callback() { console.log('小明同学'); } var time1 = setInterval(callback, 2000); </script> </body> 4.清除定时器clearInterval(定时器的标识符)
<body> <button>定时器停下来</button> <script> function callback() { console.log('小明同学'); } var time1 = setInterval(callback, 1000); var btn = document.querySelector('button'); btn.onclick = function() { clearInterval(time1); } </script> </body> 5.关于this的指向性问题
b.方法调用中谁调用this指向谁
c.构造函数中this指向构造函数的实例三、JS执行队列
同步：一件事接着一件事做，就像做饭 ，先十分钟烧水，站着等十分钟水烧开了，再去切菜。
异步：同时做几件事，就像做饭，烧水先把火打开，然后去切菜，锅里的水在烧着，菜也在切着。同步任务都在主线上执行，形成一个执行线
异步任务通过回调函数实现，异步任务有以下三中类型
1. 普通事件，如click，resize
2. 资源加载，如load
3. 定时器
<body> <script> console.log('1'); setTimeout(callback, 0);//注意这里是零秒哦，按照道理应该立即执行 function callback() { console.log('3'); } console.log('2'); </script> </body>
又画画了。。。。
四、location
获取
<body> <script> console.log(location.href); </script> </body> 设置，可以实现页面跳转功能
<body> <button>B站</button> <script> var btn = document.querySelector('button'); btn.onclick = function() { location.href = "https://www.bilibili.com/"; } </script> </body> 五、navigator
六、history
history.back();返回
history.forward();前进
history.go(1);往前进一步
history.go(-1);往后退一步
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
95