web学习笔记(二十五)BOM开始

简介: web学习笔记(二十五)BOM开始

1.BOM概述

1.1什么是BOM

   BOM(Browser Object Model)就是浏览器对象模型(整个浏览器),他的核心对象是window,BOM缺乏标准,JavaScript语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏览器标准的一部分。


      我们学习BOM主要是学习浏览器窗口交互的一些对象,BOM是浏览器厂商在各自浏览器上定义的,兼容性较差

1.2BOM的构成

window对象是浏览器的顶级 它具有双重角色。

  1. 它是JS访问浏览器窗口的一个接口。(可以对浏览器进行前进、后退、滚动,大小)
  2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert。、prompt。等。

2.windom常用属性汇总

可以在前面加上window.也可以省略。 image.png

   <script>
        console.log(innerHeight,innerWidth);
        console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);
     </script>

3.window常用方法汇总

 (1)定时器

       setInterval(调用函数,时间)时间毫秒。周期调用时间到了后调用第一次,以后每隔这个时间就调用函数。

       setInterval(function(){},1000)

   setInterval(函数名,1000,[实参1],[实参2],...)

       setInterval('函数名(实参1,实参2)',1000)

 (2)清除定时器

       clearInterval('时间标识');

  时间标识就是将定时器用变量接一下,到时候清除定时器时直接在括号内写入这个变量名即可,这个时间标识一定要是全局变量。清除定时器只是让动画停止了,并没有真的将时间标识中的值移走


(3)延迟调用


setTimeout(回调函数,时间,[实参1],[实参二]),时间到了,定时器调用回调函数,只调用一次。


clearTimeout用来清除延时调用,同样需要在括号写入时间标识。

4)声明变量和函数

我们之前学习的var a=10;声明变量和function show(){}声明函数都是window的属性和方法。之前默认把window.给省略掉了。

4.window对象常见事件汇总

(1) 窗口的加载事件window.onload

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等),就调用的处理函数。

1.  
方法一:只能写一次  window.onload=function(){
 
        }
 
 方法二:利用监听器,可以编写多次 window.addEventListener('load',function(){
 
            })

(2)窗口加载事件二DOMContentLoaded

document.addEventListener('DOMContentLoaded',function(){})

OMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。


Ie9以上才支持


如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用 户的体验,此时用DOMContentLoaded事件比较合适,比window.onload速度要快。

(3)窗口调整尺寸事件window.onresize

window.onresize = function () {}
window.addEventListener("resize",function(){});

window.onresize 是调整窗口大小加载事件,当触发时就调用的处理函数。

注意:

  • 只要窗口大小发生像素变化,就会触发这个事件。
  • 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。

5.this总结:

this的指向在函数定义的时指向谁是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this 的最终指向的是那个调用它的对象

现阶段,我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window (注意定时器里面的this指向window )
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例对象
  4. this是上下文执行程序时,系统直接传过来的一个隐式参数。
  5. 自执行函数中的this也指向window。
相关文章
|
1月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
86 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
2月前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
1月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
27 0
|
6月前
|
JavaScript
web学习笔记(二十)
web学习笔记(二十)
34 0
|
4月前
|
自然语言处理 运维 JavaScript
web-flash 学习笔记
web-flash 学习笔记
|
6月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
39 0
|
6月前
|
存储 JSON JavaScript
web学习笔记(二十八)
web学习笔记(二十八)
42 0
|
6月前
web学习笔记(二十七)PC端网页特效
web学习笔记(二十七)PC端网页特效
35 0
|
6月前
|
JavaScript 前端开发 Go
web学习笔记(二十六)
web学习笔记(二十六)
39 0
|
6月前
|
JavaScript
web学习笔记(二十四)
web学习笔记(二十四)
36 0

热门文章

最新文章