前端自学学习笔记——JS(BOM)
文章目录
第一章 BOM简介
BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。BOM将浏览器中的各个部分转换成了一个一个的对象, 我们通过修改这些对象的属性,调用他们的方法,从而控制浏览器的各种行为。
BOM提供了独立于内容与浏览器窗口进行交互的对象,核心对象是window。
window对象是浏览器的顶级对象,是JS访问浏览器窗口的一个接口,是一个全局对象(全局变量、函数是window对象的属性和方法)。
第二章 window对象的常见事件
2.1 窗口加载事件(window.onload)
当文档内容(图像、脚本文件、css、falsh等)全部加载完会触发该事件。
使用传统注册方式window.onload只能写一次,若有多个,以最后一个为准;使用window.addEventListener(‘load’,function(){})则无限制。
document.addEventListener(‘DOMContentLoaded’,function(){})常用于图片多的页面;DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等。
2.2 调整窗口大小事件(window.onresize)
只要窗口大小像素发生了变化,就会触发该事件。利用该事件完成响应式布局。
window.innerWidth:当前屏幕宽度
window.innerHeight:当前屏幕高度
第三章 定时器
3.1 setTimeout()定时器
开启定时器语法:window.setTimeout(回调函数[,延迟的毫秒数])
停止定时器语法:window.clearTimeout(定时器标识符)
设置一个定时器,在定时器到期后执行回调函数,只调用一次
注:页面中可能有多个定时器,记得给每个定时器加标识符
3.2 setInterval()定时器
开启定时器语法:window.setInterval(回调函数[,延迟的毫秒数])
停止定时器语法:window.clearInterval(定时器标识符)
重复调用一个函数,每隔这个时间,就调用一次回调函数。
3.3 this指向
一般情况下,this的最终指向时那个调用它的对象
- 全局作用域或普通函数中,this指向全局对象window(定时器中也是)。
- 方法调用中,谁调用this就指向谁。
- 构造函数中,this指向构造函数的实例。
第四章 JS执行机制
-
JS是单线程的,同一时间只能做一件事情。
-
HTML5提出Web Worker标准,允许JS创建多线程(同步、异步)。
-
同步任务:在主线程上执行,形成一个执行栈。
-
异步任务:通过回调函数实现,添加在任务队列中,常见有:普通事件、资源加载、定时器。
-
执行顺序:①先执行执行栈中的同步任务。
②异步任务(回调函数)放入任务队列中
③一旦执行栈中的所有同步任务执行完毕,系统会按次序读取任务队列中的异步任务,将异步任务放入执行栈中,开始执行。
-
事件循环Eventloop:主线程不断重复获得任务,执行任务,再获取任务,再执行。异步进程处理失败异步任务是否调用,再放入异步队列中。
第五章 location对象
location对象是window对象提供的一个属性,用于获取或设置窗体的URL,并可用于解析URL,由于返回值为一个对象,所有成为location对象。
5.1 URL组成
protocol://host[:port]/path/[?query]#fragment
通信协议 主机 端口 路径 参数 片段
注:默认端口为8080
5.2 location对象属性
location对象属性 | 含义 |
---|---|
location.href | 获取或设置整个URL |
location.host | 返回主机名(域名) |
location.port | 返回端口号,若未写,返回空串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 |
5.3 location对象方法
location对象方法 | 含义 |
---|---|
location.assign | 可以跳转页面,能后退 |
location.replace | 可以跳转页面,不能后退 |
location.reload | 重新加载页面,相当于刷新;若无参数或为false直接刷新,为true强制刷新。 |
第六章 navigator对象
navigator对象包含浏览器有关的信息,常用userAgent属性,该属性返回由客户机发送服务器的user-agent头部的值。
使用navigator.userAgent判断用户哪个终端打开页面。
第七章 history对象
history对象与浏览器历史记录进行交互,该对象包含用户在浏览器窗口中访问过的URL。
history对象方法 | 含义 |
---|---|
back() | 后退 |
forward() | 前进 |
go() | 前进后退。参数为正表示前进,参数为负表示后退。 |
如果觉得对你有帮助的话,点个赞呗~
如需转载,请注明出处Hoki802