JavaScript BOM基础_jsbom基础-优快云博客

本文链接：https://blog.youkuaiyun.com/Huangmiaomiao1/article/details/123112020

BOM基础

浏览器对象模型，独立于内容而与浏览器窗口进行交互的对象，核心对象是window，是浏览器的顶级事项

是js访问浏览器的接口
是一个全局变量，在全局作用域中的变量函数都会成为window对象的属性和方法，调用时可省略window

常见事件

页面加载事件

窗口加载事件

    <script>
        window.onload = function() {

        }
        window.addEventListener("load",function(){
            
        });
    </script>

window.onload当文档内容完全加载完成就会触发该事件（包括图像、脚本文件、CSS、文件等）就调用的处理函数

window.onload传统注册方式只能写一次，如有多个后面的会覆盖前面的，addEventListener可以写多个

test

<body>
    <script>
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert(1);
            })

        }
        // window.addEventListener('load',function(){

        // });
    </script>
    <button>点一下看看</button>
</body>

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

仅当dom加载完毕后就可以触发事件，不包含css、flash等，ie9以上支持。

如果页面图片很多的话，从用户访问到onload触发需要较长实现，交互效果的实现受影响，影响用户体验。此时用这个比较合适

调整窗口大小事件

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

窗口大小像素发生变化就会触发这个事件

window.innerWith 当前屏幕的宽度

定时器

window.setTimeout(调用函数，{延迟的毫秒数});

也称为一个回调函数

调用函数的写法：

可以直接写在里面
可以写在外面，里面写函数名 or 引号里加函数名再加括号 eg ’ fn() ’
一般给定时器赋标识符

setInterval

重复调用一个函数，每隔这个时间，就去调用一次这个函数

取消先前设置的定时器

window.clearTimeout(timeoutID);

clearInterval()

例子：倒计时器

<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        let hour =document.querySelector('.hour');
        let minute =document.querySelector('.minute');
        let second =document.querySelector('.second');
        countDown();//先调用一次这个函数，防止第一次刷新页面有空白
        var inputTime= +new Date('2022-8-14 00:00:00');
        setInterval(countDown,1000);//开启定时器
        function countDown() {
            var thisTime= +new Date();
            var times=(inputTime - thisTime)/1000;  //剩余时间的秒数
            var h=parseInt(times /60 /60);
            h = h >= 10 ? h: '0' + h;
            hour.innerHTML = h;
            var min=parseInt(times /60 %60);
            min = min >= 10 ? min: '0' + min;
            minute.innerHTML = min;
            var sec=parseInt(times %60);
            sec = sec >= 10 ? sec: '0' + sec;
            second.innerHTML = sec;
        }
    </script>
</body>

例子：发送短信接收验证码的按钮

<body>
    请输入你的手机号码:
    <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var res = 10;
        var timer = null;
        btn.addEventListener('click',function() {
            btn.disabled = true;
            timer = setInterval(function() {
                if(res == 0) {
                    btn.disabled = false;
                    clearInterval(timer);
                    btn.innerHTML = '发送';
                    // 需要重新设置按钮里面的文字，否则是 还剩下 1s的字样
                    res = 10;
                } else {
                    btn.innerHTML = '还剩下' + res + '秒';
                    res --;
                }
            },1000);
        })
    </script>
</body>

this

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

全局作用域或普通函数中的this指向全局对象window (定时器里面的this指向的是window)
在方法中，指向的是调用方法的
构造函数中this指向构造函数的实例

JavaScript执行机制

在这里插入图片描述

js的一大特点是单线程，可能会导致的问题：如果js执行时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

同步 & 异步

为了解决上述问题，利用多核CPU的计算能力，HTML5提出了web worker标准，允许 js 脚本创建多个线程，因此出现了同步异步

同步：前一个任务执行结束后执行下一个任务，执行顺序与任务排列顺序一致、同步的。

都在主线程上执行，形成一个执行栈

异步：多个任务一块执行。

通过回调函数实现，将任务放进任务队列（消息队列）中

普通事件：click、resize
资源加载：load、error
定时器

本质区别：流水线上各个流水执行顺序不同

执行机制

先执行栈中的同步任务
异步任务放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断重复获取任务、执行任务、再获取任务、再执行，这种机制称为事件循环

location对象

window对象为我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL

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

URL：统一资源定位符，互联网上标准资源的地址。它包含的信息指出文件的位置以及浏览器如何处理它

location的对象属性

在这里插入图片描述

例子：页面跳转效果

<body>
    <button>点我一下</button>
    <div></div>
    <script>
        let btn = document.querySelector('button');
        let div = document.querySelector('div');
        btn.addEventListener('click',function() {
            let res = 5;
            let timer = setInterval(function() {
                if(res == 0) {
                    // clearInterval(timer);
                    location.herf = 'http://www.baidu.com';
                } else {
                    div.innerHTML = '您将在'+ res +'秒后跳转';
                    res --;
                } 
            },1000);
        })

    </script>
</body>

获取URL参数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XwqW5Abm-1645685907640)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220224144740243.png)]$

表单代码

<body>
    <form action="index.html">
        用户名: <input type="text" name="uname">
        <input type="submit" value="login">
    </form>
</body>

跳转页面的代码

<body>
    <div></div>
    <script>
        // 这个代码传的是中文的时候不行。。
        // console.log(location.search);
        let params = location.search.substr(1);//从1号位截取到最后一个位置
        // console.log(params);
        let arr = params.split('=');
        // console.log(arr);
        let div = document.querySelector('div');
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>