BOM知识点全面总结(附实例、图解)
目录
- BOM概述
- window对象的常见事件
2.1 窗口加载事件
2.2 调整窗口大小事件 - 定时器
3.1 两种定时器
3.2 setTimeout()定时器
3.3 停止setTimeout()定时器
3.4 setInerval()定时器
3.5 停止setInerval(0定时器
3.6 this - js执行机制
4.1 js执行机制
4.2 同步跟异步
4.3 js执行机制 - location对象
5.1 什么是location对象
5.2 URL
5.3 location对象的属性
5.4 location对象的方法 - navigator
- history对象
正文
1. BOM概述
BOM(Browser Object Model)即浏览器对象模型。它提供了独立于页面而与浏览器窗口进行交互的对象,其核心对象是window
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分
BOM比DOM更大,它包含DOM
window对象是浏览器的顶级对象,它具有双重身份
- 它是js访问浏览器窗口的一个接口
- 它是一个全局对象,定义在全局作用域中,函数都会变成window对象的属性和方法
在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert();、prompt(0等。
注意:window下的一个特殊属性window.name,声明的时候不要用name,它是特殊属性
2. window对象的常见事件
2.1 窗口加载事件
document.addEventListener(‘DOMContentLoaded’, function() {})
DOMContentLoaded触发时u,仅当DOM加载完成,不包括样式表、图片,flash等等(IE9以上才支持)
如果页面很多图片的话,从用户访问到onload触发可能需要比较长的时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded比较合适
window.onload = function() {]
或者
window.addEventListener(“load”,function() {});
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、css文件等),就调用的处理函数
注意:
- 有了window,onload就可以把js代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数
- window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个为准
- 如果使用addEventListener则没有限制
window.addEventListener('load',function(){ alert('hi');})window.addEventListener('DOMContentLoaded',function(){ alert('hi');})// load 等页面内容全部加载完毕,包括页面DOM元素 图片 flash css等等// DOMContentLoaded 是DOM加载完毕, 不包括图片 flash css 等就可以执行 加载速度比load快一些
2.2 调整窗口大小事件
window.onresize = function() {}
window.addEventListener(“resize”,function() {});
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数。
注意:
- 只要窗口大小发生像素变化,就会触发这个事件。
- 我们经常·利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度
响应式布局
var div = document.querySelector('div');window.addEventListener('resize',function(){if(window.innerWidth <= 800) {div.style.display = 'none';} else {div.style.display = 'block';}})
3. 定时器
3.1 两种定时器
- setTimeout()
- setInterval()
3.2 setTimeout()定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数
注意:
- window可以省略
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串,**‘函数名()’**三种形式,第三种不推荐。
- 延迟毫秒数省略默认是0,如果写,必须是毫秒
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标志符
setTimeout(function(){console.log('时间到了');},2000);function cal() {console.log('时间真的到了');}// 提倡setTimeout(cal,3000);// 不提倡setTimeout('cal()',3000);// 4、页面中可能有很多的定时器,我们经常给定时器加标志服var time1 = setTimeout(cal,3000);var time2 = setTimeout(cal,5000);
回调函数
setTimeout()这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用。
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
简单理解:回调,就是回头调用的意思。上一件事干完,再回头调用这个函数
以前我们讲的element.onclick = function(){} 或者 element.addEventList(‘click’,fn); 里面的函数也是回调函数
3.3 停止定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器
注意:
- window可以省略
- 里面的参数就是定时器的标志符
var btn = document.querySelector('button');var time = setTimeout(function() {console.log('爆炸了');},5000)btn.addEventListener('click',function(){clearTimeout(time);});
3.4 setInerval()定时器
window.setInterval(回调函数, [间隔的毫秒数]);
setInterval() 方法重复调用一个函数,每隔一段时间,就去调用一次这个回调函数
注意:
- window可以省略
- 这个调用函数可以直接写函数,或者写函数名或者采取字符串,**‘函数名()’**三种形式,第三种不推荐。
- 延迟毫秒数省略默认是0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
- 因为定时器可能有很多,所以我们经常给定时器赋值一个标志符
区别
- setTimeout 延时时间到了,就去调用这个回调函数只调用一次就结束这个定时器
- setInterval 每隔这个延时时间,就去调用这个回调函数
3.5 停止setInterval()定时器
window.clearInterval(intervalID);
clearInterval()方法取消了先前通过调用setInterval建立的定时器
注意:
- window可以省略
- 里面的参数就是定时器的标识符
- this
- 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数实例
4. js执行机制
4.1 js是单线程
JavaScript语言的一大特点就是单线程,也就是说,同一时间只能做一件事。这个因为JavaScript这门脚本语言诞生的使命所致–JavaScript是为了处理页面中用户的交互,以及操作DOM页面而诞生的,比如我们对某个DOM元素进行添加和删除操作,不能同时进行,应该先添加,之后再删除。
单线程就意味着所有的任务需要排队,前一个任务结束,才执行后一个任务,这样导致的问题是:如果js执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
4.2 同步跟异步
为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,于是,js中出现了同步跟异步
同步
前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。
异步
你在做一件事时,因为这件事会花费很长时间,在做这件事的同时,你还可以去处理其他事情,比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜、炒菜、
本质区别是:这条流水线上各个流程的执行顺序不同
同步任务跟异步任务
同步任务
同步任务都在主线程上执行,形成一个执行栈
异步任务
js的异步任务是通过回调函数实现的
一般而言,异步任务有以下三种类型
- 普通事件,如click、resize等
- 资源加载,如load、error等
- 定时器,包括setInterval、setTimeout等
异步任务相关回调函数添加到任务队列中(任务队列也称消息队列)
4.3 js的执行机制
- 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 一旦执行栈中所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
事件循环
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制称为事件循环(event loop)
5. location对象
5.1 什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性称为location对象。
5.2 URL
**统一资源定位符(Uniform Resource Locator,URL)**是互联网上标准资源的地址,互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL的一般语法为:
5.3 location对象的属性
重点记住:href和search
5.4 location对象方法
var btn = document.querySelector('button');btn.addEventListener('click',function(){//记录浏览历史 可以使用后退功能location.assign('http://baidu.com');//不记录浏览历史 不可以使用后退功能location.replace('http://baidu.com');//重新加载页面,相当于刷新location.reload(true);})
6. navigator
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户端发送服务器的user-agent头部的值
下列前端的代码可以判断用户哪个终端打开页面,实现跳转
7. history对象
window对象给我们问提供了一个history对象,与浏览器历史记录进行交互,该对象包含用户(在浏览器中)访问过的URL
history.forward();
history.go(1); //前进一步
history.go(-1); //后退一步
BOM知识点全面总结(附实例、图解)相关推荐
- 再谈三角形整理形态(附实例图解)
对称三角形的定义.市场含义.各项要点.研判诀窍.案例分析.上升/下降三角形的基本概念.市场含义.要点提示.注意事项.形态举例.还有底部三角形.扩散三角形.研判要点.操作要点. 千帆竞发的网易博客 相关 ...
- 从零开始的AI·吃透kNN算法,学完我悟了(附实例代码)
从零开始的AI系列 从零开始的AI·机器学习の基本概念 从零开始的AI·决策树原来这么好理解(附实例代码) 从零开始的AI·朴素贝叶斯?拿来吧你(附实例代码) 文章目录 从零开始的AI系列 前言 一. ...
- Background 全属性实例图解(10种全)(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
- Java面试手册V2.0+突击V3.0知识点整理(一) 附封面图片
虚静出内功 1. Java语言三大特性 1. 封装: 属性用来描述同一类事物的特征,方法可描述一类事物可做的操作 封装就是把属于同一类事物的共性(包括属性和方法)归到一个类中,以方便使用 概念: 封装 ...
- vuex结合php,vuex中store的使用介绍(附实例)
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
- php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
- 从零开始的AI·决策树原来这么好理解(附实例代码)
从零开始的AI系列 从零开始的AI·机器学习の基本概念 从零开始的AI·吃透kNN算法,学完我悟了(附实例代码) 从零开始的AI·朴素贝叶斯?拿来吧你(附实例代码) 文章目录 从零开始的AI系列 前言 ...
- 从零开始的AI·朴素贝叶斯?拿来吧你(附实例代码)
从零开始的AI系列 从零开始的AI·机器学习の基本概念 从零开始的AI·吃透kNN算法,学完我悟了(附实例代码) 从零开始的AI·决策树原来这么好理解(附实例代码) 文章目录 从零开始的AI系列 前言 ...
- python线程创建对象_Python线程下thread对象的用法介绍(附实例)
本篇文章给大家带来的内容是关于Python线程下thread对象的用法介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Thread对象 Thread类用于表示单独的控制 ...
- 高中必背88个数学公式_高中数学:必修+选修全部知识点精华!附高考必背203个公式...
童鞋们好呀,2021高考将至,但是很多高三同学还是处于一个很不好的状态 感觉每一科都很紧张,学校学习的节奏快,自己基础又没跟上,还要补基础 总觉得后一步还没跟上,就要迈下一步了,不知道从哪学,学什么, ...
最新文章
- 自动驾驶多模态传感器融合的综述
- SAP Return to External Vendor
- Scala入门之函数编程
- python不想学了-嫌Python太慢但又不想学C/C++?来了解下JIT技术
- 32位 shell.efi x86_Ubuntu 20.04 LTS或不再支持32位x86 (i386)
- 《python从入门到精通》——生成由数字、字母组成的4位验证码
- 打击犯罪(信息学奥赛一本通-T1386)
- 面试题7:用两个栈实现队列
- python强行终止程序,如何终止Python脚本
- c语言编写的车道线检测程序,opencv车道线检测的实现方法
- 2021年中国钢铁行业发展现状分析,“双碳”背景下行业转型步伐加快「图」
- 能耗监测管理系统作用
- 手机摄像头变成PC电脑摄像头
- java使用aspose实现Excel转PDF加入密码保护并解密
- JavaScript DOM操作,就是这么简单!
- 牛客网 G-送分了 QAQ 数位 dp入门
- DOS命令:systeminfo
- switch()的参数注意项(转)
- 基于LM的双目图像校准算法源码第一部分
- 互联网运营平台指标体系_分享 :滴滴数据仓库指标体系建设实践
热门文章
- 【数字信号处理】基于matlab GUI数字信号处理系统【含Matlab源码 1088期】
- 【危险品识别】基于matlab颜色直方图危险品识别【含Matlab源码 470期】
- python计算工资_python学习之工资结算
- 机器视觉科学计算可视化_模因视觉:对模因进行分类的科学
- 学计算机的大学生买什么U盘,大学生最容易丢的几样东西,最后一件最让人着急,网友:真实了...
- java类加载配置文件_如何在java类中读取Properties配置文件
- 例4.3 数制转换 - 九度教程第44题(进制转换)
- 【C++】pair对组创建
- xml中特殊含义的字符_mybatis中的作用
- netbeans linux 安装教程,linux下安装NetBeans 6.0