• BOM


    一、BOM 概述

    Browser Object Model,BOM 浏览器对象模型

    提供了独立于内容,与浏览器窗口进行交互的对象 ,核心对象是 window

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

    二、window 对象常见的事件

    1、页面加载事件 onload

    onload 事件在文档内容(包括图像、脚本文件、CSS文件等)加载完成后触发

    有了该事件就可以不用把 JS 放在文档元素后了,可以写在元素上方

    <script type="text/javascript">
        window.addEventListener('load', function() {     //相同的元素、相同的事件:addEventListener注册方式都有作用
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('我弹出了');
            })
        })
    </script>
    <button type="button">点击</button>

    2、调整窗口大小事件 onresize

    resize 在窗口大小产生变化时触发

    该事件常用来完成响应式布局

    <script type="text/javascript">
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                if (window.innerWidth < 800) {     // 窗口宽度小于800px时,就隐藏div 
                    div.style.display = 'none';    //innerWidth属性:窗口宽度
                }
            })
        })
    </script>
    <div id=""></div>

    三、定时器

    1、定时器 setTimeout()

    在延时时间(第二个参数)过后,执行函数(第一个参数)

    <script type="text/javascript">                     // window可以省略,直接使用setTimeout()
        var timer1 = window.setTimeout(callback, 2000); // 第二个参数是延时时间,单位是毫秒,不写该参数时写时默认为0ms
        var timer2 = window.setTimeout(callback, 4000); // 页面中可能有多个定时器,通常给定时器加标识符(名字) 
        function callback() {                       
            console.log('+ 两秒');
        }
    </script>

    setTimeout() 我们也称为回调函数(需要等待时间再去调用,而普通函数都是按顺序直接调用)

    element.onclick = function() {} 和 element.addEventListener('click', function(){}) 里面的函数也是回调函数

    2、清除定时器 clearTimeout() 

    用来停止 setTimeout() 计时器

    <script type="text/javascript">
        window.addEventListener('load', function() {
            var timer = window.setTimeout(function() {
                alert('太晚啦,已爆炸');
            }, 3000);
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                clearTimeout(timer);  //参数为要停止的定时器名称
            })
        })    
    </script>
    <button type="button">解除爆炸</button>

    3、定时器 setInterval()

    每隔延时时间(第二个参数),反复执行函数(第一个参数)

    <script type="text/javascript">     // window可以省略,直接使用setTimeout()
        window.setInterval(function() { // 第二个参数是延时时间,单位是毫秒,不写该参数时写时默认为0ms
            console.log('i love u ');   // 页面中可能有多个定时器,通常给定时器加标识符(名字) 
        }, 1000);
    </script>

    4、清除定时器 clearInterval()

    用来停止 setInterval() 计时器

    <button type="button">点击停止计时器</button>
    <script type="text/javascript">
        var btn = document.querySelector('button');
        var timer = window.setInterval(function() {
            console.log('好开心啊!');
        }, 1000);
        btn.addEventListener('click', function() {
            window.clearInterval(timer);
        })
    </script>

    四、JS 执行队列

    1、JS 是单线程

    (1)JS 是单线程

    同一个时间只能做一件事。所有任务需要排队,前一个任务结束,才会执行后一个任务。

    (2)存在的问题

    如果 JS 执行时间过长,会造成页面渲染不连贯,导致页面渲染加载阻塞的感觉

    2、同步和异步

    H5 提出 Web Worker 标准,允许 JS 创建多个线程,于是出现了 JS 同步和异步

    (1)同步:前一个任务结束,再执行后一个任务

    (2)异步:多个任务同时执行

    3、同步任务和异步任务

    (1)同步任务

    同步任务都在主线程上

    (2)异步任务

    JS 的异步任务通过回调函数实现,一般异步任务有以下三种类型:

    • 普通事件:onclick、resize 等
    • 资源加载:onload、error 等
    • 定时器:setInterval、setTimeout 等

    异步任务相关的回调函数添加到任务队列(消息队列)中

    4、JS 执行机制

    (1)JS 执行机制

      ① 先执行主线程的同步任务(异步任务放入任务队列中)

      ② 主线程中的同步任务执行完毕,再按次序读取任务队列中的异步任务

      ③ 被读取的异步任务结束等待状态,进入主线程,开始执行

    (2)事件循环 event loop

    由于主线程不断地重复获得任务、执行任务、再获取任务、执行,所以这种机制被称为事件循环

    五、location 对象

    window 对象的 location 属性用于获取或设置窗口的 URL,并且可以解析 URL;

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

    调用的时候可以省略 window(即 window.location 直接省略 window)

    1、属性

    <button type="button">获取location属性</button>
    <script type="text/javascript">
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            //1.location.href 获取或设置整个 URL
            console.log('URL:' + window.location.href);
            //2.location.host 返回域名
            console.log('host:' + window.location.host);
            //3.location.port 返回端口号,未写返回空字符串
            console.log('port:' + window.location.port);
            //4.location.pathname 返回路径
            console.log('pathname:' + window.location.pathname);
            //5.location.search 返回参数
            console.log('search:' + window.location.search);
            //6.location.hash 返回片段(# 后面的内容),常见于链接、锚点 
            console.log('hash:' + window.location.hash);
            window.location.href = 'http://www.baidu.com';
        })
    </script>

    2、方法

    <button type="button" class="btn1">assign</button>
    <button type="button" class="btn2">replace</button>
    <button type="button" class="btn3">reload</button>
    <script type="text/javascript">
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var btn3 = document.querySelector('.btn3');
        btn1.addEventListener('click', function() {
            // 1.assign() 跳转页面(重定向页面)
            location.assign('http://www.baidu.com');  //记录浏览历史,可以后退
        })
        btn2.addEventListener('click', function() {
            // 2.replace() 替换当前页面
            location.replace('http://www.baidu.com'); //不记录浏览历史,不能后退
        })
        btn3.addEventListener('click', function() {  
            // 3.repload() 重新加载页面
            location.reload();   // 不传参数 就是刷新 f5
        })                       // 传入参数 true 就是强制刷新 ctrl+f5
    </script>

    六、navigator 对象

    navigator 对象包含有关浏览器的信息;

    最常用的属性是 userAgent;

    下面前端代码可以判断用户用电脑端还是移动端打开页面,并实现跳转:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script>
                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 = "phone.html"; //如果是移动端,就跳转到其他界面
                }
            </script>
        </head>
        <body>
            <span>你好,你打开的是PC浏览器</span>
        </body>
    </html>

    七、history 对象

    window 对象提供 history 对象与浏览器历史记录进行交互,该对象包含用户在浏览器窗口中访问过的 URL;

    常用的方法如下

    <p><a href="http://www.baidu.com">百度</a></p>
    <button type="button" class="btn1">back</button>
    <button type="button" class="btn2">forward</button>
    <button type="button" class="btn3">go</button>
    <script type="text/javascript">
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var btn3 = document.querySelector('.btn3');
        btn1.addEventListener('click', function() {
            // 1.back() 后退
            window.history.back();
        })
        btn2.addEventListener('click', function() {
            // 2.forward() 前进
            window.history.forward();
        })
        btn3.addEventListener('click', function() {
            // 3.go(参数) 前进后退
            window.history.go(1); //参数为 1 前进1个页面
        })                          //参数为-1 后退1个页面
    </script>

    history 对象一般在实际开发中比较少用,往往会在 OA 系统中见到

  • 相关阅读:
    BZOJ1858[Scoi2010]序列操作 题解
    BZOJ3631[JLOI2014]松鼠的新家 题解
    BZOJ1036[ZJOI2008]树的统计Count 题解
    BZOJ1798[Ahoi2009]Seq 维护序列seq 题解
    BZOJ3212 Pku3468 A Simple Problem with Integers 题解
    BZOJ1012[JSOI2008]最大数maxnumber 题解
    洛谷P1080 国王游戏
    洛谷 P2296 寻找道路
    洛谷P1970 花匠
    洛谷 P1969 积木大赛
  • 原文地址:https://www.cnblogs.com/eidolonw/p/15990082.html
Copyright © 2020-2023  润新知