Js基础_BOM

是发财不是旺财

已于 2022-03-05 13:29:07 修改

阅读量382

点赞数

分类专栏： Js基础文章标签： javascript 前端搜索引擎

于 2022-03-02 11:16:21 首次发布

本文链接：https://blog.csdn.net/qq_45578388/article/details/123221021

版权

Js基础专栏收录该内容

24 篇文章 2 订阅

订阅专栏

一、什么时BOM

1.BOM概念

BOM(Browser Object Model) 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
在这里插入图片描述

2.BOM的构成

在这里插入图片描述
window对象是浏览器的顶级对象，具有双重角色

他是JS访问浏览器窗口的一个接口。
他是一个全局对象，定义再全局作用域中的变量，函数都会变成window对象的属性和方法。

window的下一个特殊属性window.name

<script>
var num = 10
console.log(window.num)//10
</script>

二、window对象的常见事件

1.窗口加载事件

window.onload = function(){}
或者
window.addEventListener(“load”,function(){})

window.onload当文档内容完成加载后会触发该事件，就调用的处理函数

注意：

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

三、定时器

1.案例_倒计时

<div>
  <span class="hour">1</span><span class="minute">2</span><span class="second">3</span>
</div>
</body>
<script>
var hour = document.querySelector('.hour')
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
let inputTime = +new Date('2022-3-2 19:00:00')
countDown()
setInterval(countDown,100)
function countDown() {
  let nowTime = +new Date()
  let times = (inputTime - nowTime) / 1000
  let d = parseInt(times / 60 / 60 / 24)//天
  d = d < 10 ? '0' + d : d
  var h = parseInt(times / 60 / 60 % 24)//小时
  h = h < 10 ? '0' + h : h
  hour.innerHTML = h
  var m = parseInt(times / 60 % 60)//分
  m = m < 10 ? '0' + m : m
  minute.innerHTML = m
  var s = parseInt(times % 60)
  s = s < 10 ? '0' + s : s
  second.innerHTML = s
  return d + '天' + h + '时' + m + '分' + s + '秒'
}
</script>

2.this指向问题

<body>
<button>
  点我
</button>
</body>
<script>
// this指向问题 一般情况下this的最终指向的是那个调用它的对象

// 1.全局作用域或者普通函数中this指向全局对象window（定时器里的this指向window）
console.log(this)//打印window
function fn(){
  console.log(this)
}
window.fn()//打印window
setInterval(function(){
  console.log(window)
},1000)//每隔一秒打印一个window

// 2.方法调用中谁调用this就指向谁
let any ={
  Hello: function(){
    console.log(this)//this指向any这个对象
  }
}
any.Hello()//打印Hello:f()

let btn = document.querySelector('button')
btn.onclick = function(){
  console.log(this)//this指向的是button
  alert(this)
}

// 3.构造函数中this指向构造函数实例
function Fun(){
  console.log(this)//this指向的是fun实例对象
}
let fun = new Fun()
</script>

四、JS执行队列

1.JS是单线程

JavaScript的一大特点就是单线程，代表着：同一时间只能做一件事。（前一个任务结束才能进行下一个任务）

2. 同步和异步

为了防止线程堵塞，合理利用多核cpu的计算能力。HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程，于是，JS中出现了同步和异步

2.1 同步

前一个任务执行后再执行下一个任务，执行顺序和任务的排列顺序是一致的，同步的。

2.2 异步

同时做多个事情，如：在做某件事情时，这件事情会花费很长事件，再此同时，还可以去做别的事情

本质区别：在流水线上各个流程的执行顺序不同

案例

console.log(1)
setInterval(function(){
  console.log(3)
},1000)
console.log(2)

在这里插入图片描述

2.3同步任务

同步任务都在主线程上执行，形成一个执行线

2.4异步任务

JS的异步任务是通过回调函数实现

主要类型：

普通事件，如click，resize等
资源加载，如load，error等
定时器，包括setinterval，setTimeout等
异步任务相关回调函数放到任务队列（消息队列）中

2.5JS执行机制

1.先执行执行栈中的同步任务
2.异步任务放到任务队列中（暂不执行）
3.执行剩余同步任务，当所有同步任务执行完毕，再按读取顺序执行异步任务
在这里插入图片描述

五、location对象

window对象提供了的一个location属性用来获取或设置窗体的URL，并且可以用于解析URL，这个属性返回的是一个对象

URL：
统一资源定位符，是互联网上标准资源的地址。

1.location对象的属性

在这里插入图片描述

2.location对象的方法

在这里插入图片描述

六、navigator对象

navigator对象包含了浏览下的很多相关信息，其中有很多属性和方法

七、history对象

window对象提供的，能让我们和浏览器历史记录进行交互。
在这里插入图片描述

是发财不是旺财

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Js基础_BOM

文章目录一、什么时BOM1.BOM概念2.BOM的构成二、window对象的常见事件1.窗口加载事件三、定时器1.案例_倒计时2.this指向问题四、JS执行队列1.JS是单线程2. 同步和异步2.1 同步2.2 异步案例2.3同步任务2.4异步任务2.5JS执行机制五、location对象1.location对象的属性2.location对象的方法一、什么时BOM1.BOM概念BOM(Browser Object Model) 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其
复制链接

扫一扫