JavaScript—BOM 相关知识内容整理

目录

一、什么是BOM

二、window常见事件

1、页面加载事件

2、调整窗口事件

三、定时器

1、两种定时器

2、 setTimeout()定时器

3、回调函数

4、 停止 setTime() 定时器

5、setLnterval()定时器

6、清除定时器claerInterval

四、this指向问题

五、location、navigator、history对象

1、location 对象

2、navigator对象

3.history对象


一、什么是BOM

        BOM(Browser Object Model)浏览器对象模型,他提供了独立于内容而与浏览器窗口进行交互的对象,

        其核心对象是window

        BOM由一系列相关的对象构成,并且每个对象都提供了很多的方法属性

        BOM缺乏标准,JavaScript语法的标准化阻止是ECMA,DOM的标准化阻止是W3C,BOM最初是Netcape浏览器标准的一部分。

        BOM比DOM更大,它包含DOM

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

        1、它是JS访问浏览器窗口的一个接口

        2、它是一个全局对象。定义在全局作用域中的变量、函数都会变成windon对象的属性和方法

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

       注意:window下的一个特殊属性window.name

二、window常见事件

1、页面加载事件

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

        注意:

(1)有了window.onload就可以把Js代码写到页面元素的上方,因为onload是等页面内容全部加载完毕再去执行处理函数

(2)window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准

(3)如果使用addEventListener则没有限制。

        load等页面全部加载完毕,包含页面dom元素, 图片 flash css等等

        DOMContentLoaded 是DOM 加载完毕,不包含图片falah css等就可以执行,加载速度比load更快一些

2、调整窗口事件

        

window.onresize = function(){}

window.addEventListener('resize',function(){});

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

        注意:

        1、只要窗口大小发生像素变化,就会触发这个事件

        2、我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。

三、定时器

  1、两种定时器

        window 对象给我们提供了2个非常好用的方法——定时器

        setTimeout()        指定时间后执行一段代码(延迟执行)

        setLnterval()        每隔一段时间执行一段代码(间隔执行

   2、 setTimeout()定时器

        window.setTimeout(调用函数,[延迟的毫秒数]);

        setTime()方法用于设置一个定时器,该定时器在定时器到后期执行调用函数。

        注意:

        (1)window可以省略

        (2)这个调用函数可以直接写函数,或者写函数名或者采取字符串'函数名()'三种形式。第三种不推荐

        (3)延迟的毫秒数省略默认是0,如果写,必须是毫秒

        (4)因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。 

3、回调函数

         window.setTime(调用函数,[延迟的毫秒数]);

        setTime() 这个调用函数我们也称为回调函数 callback

        普通函数是按照代码顺序直接调用

        而这而过函数,需要等待时间,时间到了采取调用这个函数,因此称为回调函数

        简单理解:回调,就是回头调用的意思。上一件事干完,再回头调用这个函数

4、 停止 setTime() 定时器

 window.clearTimeout(timeoutID)

        注意:

        1.window 可以省略

        2.里面的参数就是定时器的标识符

5、setLnterval()定时器

        window.setInterval(回调函数,[间隔的毫秒数]);

        setLnterval()方法重复调用一个函数,每隔一段时间,就去调用一次回调函数。

        注意:

        1.window可以省略

        2.这个调用函数可以直接写函数,或者函数名或者采取字符串'函数名()'三种形式。

        3.间隔的毫秒数省略默认是0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。

        4.以为定时器可能有很多,所以我们经常给定时器赋值一个标识符。

6、清除定时器claerInterval

        window.clearInterval(intervalID);

        clearInterval()方法取消了先前通过调用sentIntercal()建立的定时器

        注意:

        1.window可以省略

        2.里面的参数就是定时器的标符

四、this指向问题

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定

    this到底指向谁,一般情况下this的最终指向的是那个调用他的对象

五、location、navigator、history对象

1、location 对象

         (1) 什么是location对象

        window对象给我么您提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。

        因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象

        (2)什么是URL

        统一资源定位符(Uniform Resource Locator, URL)是题联网上标准资源的地址。互联网上的每个文件都有

一个唯一的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

    URL的一般语法格式为:

    protocol: //host [:port1/path/ [?query]# fragment

    http://www.itcast.cn/index.html?name= andy&age=18#link

组成说明

protocol    通信协议常用的http,ftp,maito等

host        主机(域名) www.itheima.com

port        端口号可选,省略时使用方案的默认端口如http的默认端口为80

path        路径由零或多个/符号隔开的字符串,-般用来表示主机上的一一个目录或文件地址

query       参数以键值对的形式通过&符号分隔开来

fragment    片段#后面内容常见于链接锚点

        (3) location属性

        location对象属性                返回值

        location.href                  获取或者设置整个URL

        location. host                 返回主机(域名) www.itheima.com

        location.port                  返回端口号如果未写返回空字符串

        location.pathname              返回路径

        location. search               返回参数

        location. hash                 返回片段#后面内容常见于链接锚点

        (4)location 对象的方法

        location对象方法     返回值

        location.assign()     跟href -样,可以跳转页面(也称为重定向页面)

        location.replace()    替换当前页面,因为不记录历史,所以不能后退页面

        location.reload)       重新加载页面,相当于刷新按钮或者f5 如果参数为true强制刷新ctrl+f5

代码展示:

<body>
    <button>点击</button>
    <script>
        var btn =  document.querySelector('button')
        btn.addEventListener('click',function(){
            // 替换当前页面,记录浏览历史,所以可以实现后退功能
               location.assign('http://www.baidu.com')
            // 替换当前页面,因为不记录历史,所以不能后退页面
               location.replace('http://www.baidu.com')
            // 重新加载页面,相当于刷新按钮或者f5 括号加true是强制刷新
            location.reload();
            
        })
    </script>
</body>

2、navigator对象

 navigator对象包含有关浏览器的信息,它有多属性,我们最常用的是userAgent,该属性可以返回由客

    户机发送服务器的user-agent头部的值。

    下面前端代码可以判断用户那个终端打开页面,实现跳转

  if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            window.location.href = ""; //手机
        }

3.history对象

window对象给我们提供了-个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)

访问过的URL.

history对象方法      作用

back()                     可以后退功能

forward()                 前进功能

g0(参数)                  前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

                   ——少年就是莽撞却生动,时刻准备着尝试,无所谓失败。

猜你喜欢

转载自blog.csdn.net/weixin_52984349/article/details/126583970