JavaScript—BOM 相关知识内容整理

发布于:2023-01-04 ⋅ 阅读:(526) ⋅ 点赞:(0)

目录

一、什么是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个页面

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

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到