WebAPI-4(BOM,123均为DOM)(同步,异步的概念--所有回调函数都是异步)

本文深入探讨了浏览器对象模型(BOM)的概念,解释了BOM如何通过一系列对象、方法和属性提供浏览器窗口的交互效果。文章详细介绍了window对象的角色、事件处理、定时器功能以及location和history对象的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

BOM浏览器模型

  1. BOM是浏览器对象模型,主要是给浏览器窗口提供一个交互效果。由一系列对象构成,并且每个对象都提供了很多方法与属性
  2. BOM缺乏标准,JS语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是网景公司浏览器标准的一部分,兼容性比较差。
  3. 在这里插入图片描述
  4. BOM比DOM更大,它包含DOM
    在这里插入图片描述
  5. window对象是浏览器的顶级对象,它具有双重角色
    他是JS访问浏览器窗口的一个接口。
    它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法。
    在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert(),prompt()等。
    window.name 特殊,所以document 命名时 基本不用name()

window对象的常见事件

  1. 窗口加载事件
    window.onload = function() {}
    或者
    window.addEventListener(“load”,function() {} );
    要等整个页面内容,页面dom元素(文档中的标签),图片,flash,css 之类的全都加载完之后才能执行

    window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像,脚本文件,CSS文件等),就调用的处理函数。
    注意: 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是电等页面内容全部加载完毕,再去执行处理函数。
    window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。
    window.addEventListener(‘load’, function(){}); 没有限制

  2. DOMContentLoaded
    DOM中加载完就可以执行,不包含图片,flash,css等就可以执行 加载速度更快

  3. 调整窗口大小事件
    window.onresize = function () {} 或者
    window.addEventListener(“resize”,function(){});
    是调整窗口大小加载事件,当触发时就调用的处理函数。
    注意: 只要窗口大小发生像素变化,就会触发这个事件。
    我们经常利用这个事件完成响应式布局,window.innerWidth 当前屏幕的宽度。

定时器

  1. window 对象给我们提供了2个非常好用的方法 - 定时器
    (1)
    setTimeout(调用函数,[延迟的毫秒数]);
    页面中可能有很多的定时器,我们经常给定时器加标时符(给每一个定时器起名字)
    秒数为毫秒
    ```
    function callback() {
    console.log(‘爆炸了’);

        }
       var time1 =  setTimeout(callback, 3000);
        var time2 =  setTimeout(callback, 3000);
    
    	setTimeout() 这个调用函数我们也称为回调函数 callback
    	![在这里插入图片描述](https://img-blog.csdnimg.cn/20200227154121453.png)
    	简单理解:回调 , 就是回头调用的意思,上一件事干完,再回头再调用这个函数
    	**停止setTimeout() 定时器**
    	window.clearTimeout(timeout ID);
    	==定时器案例==
    	
    
    
var ad = document.querySelector('.ad');
        var timer = setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
        //停止定时器
        ad.addEventListener('click', function() {
            clearTimeout(timer);
            console.log('停止');

        })
	**只调用一次,就结束了这个定时器**

(2)setInterval()定时器
	window.setInterval(回调函数,[间隔的毫秒数]);
	setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。
	**每隔间隔时间就调用一次回调函数,会重复调用**

在这里插入图片描述

  1. 倒计时案例,setInterval()定时器
    在这里插入图片描述
<style>
        div {
            width: 200px;
            margin: 100px auto;
        }
        
        span {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin-left: 5px;
            color: white;
            font-size: 18px;
            text-align: center;
            line-height: 50px;
            background-color: black;
        }
    </style>
</head>

<body>
    <!-- 倒计时是不断变化的,因此需要定时器来自动变化(setInterval) -->
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2020-2-28 10:00:00');
        countDown(); //1.先调用一次这个函数,防止第一次刷新页面有空白
        //2.开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
  1. 发送短信案例
 手机号码:<input type="number"><button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var timer = 3; // 剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true; //按钮禁用
            var time = setInterval(function() {
                if (timer == 0) {
                    // 清除定时器复原按钮
                    clearInterval(time);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    timer = 3; //这个3让其重新开始
                } else {
                    btn.innerHTML = '还剩下' + timer + '秒';
                    timer--;
                }
            }, 1000);
        })
    </script>
  1. this
    this 的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象
    全局变量是window
    方法调用中谁调用this指向谁
    构造函数中this指向构造函数的实例
  2. JS执行队列
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    他们的本质区别是:这条流水线上各个流程的执行顺序不同
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
  3. location对象
    window对象给我们提供给了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
    **URL:**统一资源定位符是互联网上标准资源的地址,互联网上的每个文件都有唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
    在这里插入图片描述
    在这里插入图片描述
  4. 表单有了name才能提交
 <div></div>
    <script>
        // console.log(location.search);
        //?uname=andy
        //先去掉? substr('起始位置',截取几个字符);
        var params = location.search.substr(1); //uname=andy
        // 利用=把字符串分割为数组 split('=')
        var arr = params.split('='); //把字符串分割为数组arr["uname","andy"];
        var div = document.querySelector('div');
        div.innerHTML = arr[1] + '欢迎你';
    </script>
  1. 在这里插入图片描述
  2. 在这里插入图片描述
  3. history对象,就是浏览器的后退和前进按钮,实际开发中比较少用,但是会在OA系统中经常用到在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值