BOM学习

目录

BOM概述

window对象常见事件

窗口加载事件(onload)

窗口加载事件(DOMContentLoaded)

pageshow事件

调整窗口大小事件(onresize)

定时器

1.setTimeout()

​回调函数

​停止setTimeout()

2.setInterval()

 停止setInterval()

 this指向

JS执行机制

JS是单线程

 同步和异步

 同步任务和异步任务

 *JS执行机制*

location对象

URL

 location对象属性

location对象方法

 获取URL参数

 navigator对象

history对象

PC端网页特效 

offset元素偏移量

offset概述

 offset和style区别

client元素可视区

 立即执行函数

scroll元素滚动

 scroll事件

三大系列对比

 mouseseenter和mouseover区别

BOM概述

BOM是浏览器对象模型,独立于内容而与浏览器窗口进行交互的对象,核心对象为window

 定义的变量都是window的属性,定义的函数都是window的方法(window.name本身有含义)

window对象常见事件

窗口加载事件(onload)

当文档中的所有内容(包括样式表,图片,flash等)全部加载完毕后,才会触发window.onload事件,有了这个事件,可以不用把js必须放在文档内容后面,可以放在任意位置

通过传统注册方式window.onload来注册事件只能写一次,如果写了多个,会以最后一个为准,用事件监听方法来注册,不会出现这种矛盾,即document.addEventListener('load',function())注册页面加载事件

窗口加载事件(DOMContentLoaded)

当DOM加载完成后(不包括样式表,图片,flash),DOMContentLoaded事件会被触发,速度比load更快一点

pageshow事件

调整窗口大小事件(onresize)

当调整窗口大小时,会触发window.onresize事件调用处理函数

定时器

主要是两种setTimeout()和setInterval()

setTimeout()延迟时间到了后,就会去调用回调函数,只调用一次,就结束定时器

setInterval()每间隔一个延迟时间,就会去调用回调函数,会调用很多次这个函数

1.setTimeout()

回调函数

停止setTimeout()

2.setInterval()

 停止setInterval()

 this指向

1.全局作用域或者普通函数中this指向全局对象window

2.方法调用中谁调用this指向谁

3.构造函数中this指向构造函数的实例

JS执行机制

JS是单线程

 同步和异步

同步:程序的执行顺序和任务的排列顺序一样

异步:在做一件事的同时,如果比较花费时间,会同时去做另一件事情

同步和异步的区别就是:在流水线上,各个流程的执行顺序不同

 同步任务和异步任务

 *JS执行机制*

1.先执行执行栈中的同步任务。

2.异步任务(回调函数)放入任务队列中。

3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。

location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。

URL

 location对象属性

location对象方法

 获取URL参数

 navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。

history对象

PC端网页特效 

offset元素偏移量

offset概述

 offset和style区别

client元素可视区

使用方法和offset相同,client不包含边框

 立即执行函数

不需要调用,立马可以自己执行的函数

写法

 多个立即执行函数之间要用分号分割

主要作用:创建一个独立的作用域,避免了命名冲突

scroll元素滚动

 

 scroll事件

当滚动条发生变化时会会触发的事件

页面滚动,上方卷去的高度用window.pageYOffset获得,左侧被卷去宽度为window.pageXOffset获得

某元素滚动,上方高度element.scrollTop获得,左侧宽度element.scrollLeft获得

三大系列对比

 mouseseenter和mouseover区别

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

๑Aurora.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值