WebAPIs(Bom对象)

发布于:2023-01-20 ⋅ 阅读:(3) ⋅ 点赞:(0) ⋅ 评论:(0)

window对象:

BOM:是浏览器对象模型

  •  window对象是一个全局对象,也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
  •  所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  •  window对象下的属性和方法调用的时候可以省略window

延时定时器(延时函数):

开启延时器:setTimeout(回调函数,等到的毫秒数)

清除延时函数:clearTimeout()

  延时器需要等待,后面的代码先执行,延时器属于window中的方法属性

 const but = document.querySelector('button')
        but.addEventListener('click', function () {
            // setTimeout 属于window对象的方法  里面的this 默认是window对象
            // setTimeout 使用this关键字 一定要慎用
            setTimeout(function () {
                but.disabled = true
            }, 2000)

  Js执行机制:

  同步:前一个任务结束再执行后一个任务

  异步:前一个任务还没有结束执行后一个任务,再执行 前一个任务

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

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

 事件循环:

   由于主线程不断地重复获得任务,执行任务,在获得任务,再执行任务就是事件循环


location对象:

常用属性和方法:

  • href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转
  • search 属性获取地址中携带的参数,符号 ?后面部分
  • hash 属性获取地址中的啥希值,符号 # 后面部分
  •  reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新

navigator对象:

通过 userAgent 检测浏览器的版本及平台


/ 检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()

histroy对象:

       history 的数据类型是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应

  • back()  后退功能
  • forward() 前进功能
  • go(参数) 前进后退功能 参数为1前进一步 ,参数为-1后退一步

 本地存储(存储只能为字符串):

     作用:可以将数据永久存储在本地(用户的电脑), 除非手动删除,否则关闭页面也会存在

  • 存储数据:localstorage.setIemt(属性名,属性值)
  • 获取数据:localstoraget.getItem(属性名)
  • 删除:localstoraget.removeItem(属性名)

  存储复杂数据类型:

  将复杂数据类型转换成JSON字符串(JSON.stringify(对象))

  获取:将JSON字符串转换对象:

  先获取字符串  localstorget.getItem(对象)

  (JSON.parse(获取的字符串))