JavaScript学习笔记14

最新推荐文章于 2024-11-02 19:19:35 发布

正在加载jjj

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量94

点赞数

分类专栏： JS 文章标签： javascript 前端 html

原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha?p=279&spm_id_from=333.1007.top_right_bar_window_history.content.click

版权

JS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

目录

BOM概述

DOM与BOM的区别编辑

window.onload事件

DOMContentLoaded事件

调整窗口事件

定时器

setTimeout()

回调函数callback

五秒之后自动关闭广告案例

停止定时器clearTimeout()

setInterval()定时器

两个定时器的区别：

京东秒杀倒计时案例

clearInterval()停止setInterval定时器

间隔时间发送短信案例

this指向问题

JS执行队列

同步和异步

常见异步任务：

JS执行机制

BOM概述

浏览器对象模型，浏览器窗口进行交互的对象
BOM没有特定的标准，兼容性较差
BOM把浏览器当做一个对象，顶级对象是window
主要学习浏览器窗口的的交互作用
DOM与BOM的区别
它是一个全局对象。定义在全局作用域的变量、函数都会变成window对象的属性和方法，再调用的时候省略了window
特殊情况：window下的一个特殊属性window.name
它是JS访问访问浏览器的一个接口

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        //window.document.querySelector();
        var num = 10;
        console.log(num);
        console.log(window.num);
        function fn() {
            console.log(11);

        }
        window.fn();//等价于fn();  调用的时候可以省略window
        alert(11);//等价于window.alert(11);
        console.log(window.name);
    </script>

</body>

</html>

结果
window对象常见的事件
- window.onload事件
  window.onload是窗口加载事件，当文档内容完全加载完成会触发的事件（包括图像、脚本文件、css文件的），就调用处理函数
- 有了window.onload就可以吧JS代码写到页面元素上方，因为onload就是等页面加载完毕，再去调用执行
- window.onload传统注册方式只能写一次，如果有多个，会以最后一个window.onload为准
- 如果使用addEventListener没有限制，可以写多个
- load等页面内容全部加载完毕，包含DOM元素，图片flash css等

DOMContentLoaded事件

是DOM加载完毕，不含图片flash css，就可以执行，加载速度比load更快一些
触发时，仅当DOM加载完成，不包括样式表，图片，flash等

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        window.addEventListener('load', function () {//有了window.onload就可以吧JS代码写到页面元素上方，因为onload就是等页面加载完毕，再去调用执行.window.onload只能写一次，如果有会以最后一个window.onload为准
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('您点击了一次我');
            })
        })
        document.addEventListener('DOMContentLoaded', function () {//是DOM加载完毕，不含图片flash css，就可以执行，加载速度比load更快一些
            alert(33);
        })

    </script>
    <button>点击</button>


</body>

</html>

结果

调整窗口事件

window.onresize是调整窗口大小的事件，当触发时就会调用的处理函数
只要窗口大小发生变化，就会触发这个事件
window.innerWidth可以获得当前屏幕的宽度

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: aquamarine;
        }
    </style>

</head>

<body>
    <script>
        window.addEventListener('load', function () {
            var div = document.querySelector('div');
            window.addEventListener('resize', function () {
                console.log(window.innerWidth);
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';//使盒子隐藏起来
                } else {
                    div.style.display = 'block';//使盒子显示出来
                }
                console.log('窗口大小变换了');
            })
        })

    </script>
    <div></div>

</body>

</html>

结果

定时器

setTimeout()

语法:window.setTimeOut(调用函数，[延迟毫秒数]);//[]里面代表可以省略
window可以省略
这个延时时间单位是毫秒
毫秒可以省略，如果省略默认是0毫秒
调用函数可以写函数也可以写函数名或者采用自互传'函数名（）'
页面中通常有很多定时器，我们通常给定时器加一个标志符（名称）

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>

        /* setTimeout(function () {//1.里面函数可以直接写函数
            console.log('两秒时间到了');
        }, 2000) */

        function calback() {
            console.log('时间到了');
        }
        var timer1 = setTimeout(calback, 3000);//2.里面函数可以写函数名
        var timer2 = setTimeout(calback, 5000);//2.里面函数可以写函数名
    </script>

</body>

</html>

结果

回调函数callback
- 等时间到了再回头调用函数

五秒之后自动关闭广告案例

核心思路：5秒之后，把这个广告隐藏起来

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <img src="images/maomi.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function () {
            ad.style.display = 'none';//将图片隐藏起来了
            console.log('ad五秒之后隐藏起来了');
        }, 5000)
    </script>

</body>

</html>

结果

停止定时器clearTimeout()

语法：window.clearTimeout(timeoutID)
用来停止setTimeout定时器
里面的参数就是定时器ID
window可以省略

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function () {
            console.log('五秒定时炸弹爆炸了');

        }, 5000)
        btn.addEventListener('click', function () {
            clearTimeout(timer);
            console.log('停止了定时器爆炸');
        })
    </script>

</body>

</html>

结果

setInterval()定时器

语法:window.setInterval(回调函数，[间隔秒数])；
window可以省略
这个延时时间单位是毫秒
毫秒可以省略，如果省略默认是0毫秒
调用函数可以写函数也可以写函数名或者采用自互传'函数名（）'
页面中通常有很多定时器，我们通常给定时器加一个标志符（名称）

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <script>
        setInterval(function () {
            console.log('一秒钟到了');
        }, 1000);
    </script>

</body>

</html>

结果

两个定时器的区别：
- setTimeout 延时时间到了就去回调这个函数，只调用一次，就结束了定时器
- setInterval每隔这个延时时间就去回调这个函数，会调用很多次，重复调用

京东秒杀倒计时案例

setInterval来完成
三个不同盒子存放时分秒
三个盒子利用innerHTML放入计算的小时分秒数
每一次执行也就是间隔毫秒数
最好采用封装函数的范式，防止刷新之后会有空白出现

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        //1.获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2022-9-8 18:00:00');//返回的是用户输入的时间总的豪秒数
        //先调用一次函数，防止页面刷新出现空白
        countDown();
        //2.每隔一秒开启定时器
        setInterval(countDown, 1000);
        //3.倒计时函数
        function countDown() {
            var nowTime = +new Date();//返回的是当前时间的总毫秒数
            var times = (inputTime - nowTime) / 1000;//times是剩余时间的总秒数
            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>

</body>

</html>

结果

clearInterval()停止setInterval定时器

语法：window.clearInterval(timeoutID)
用来停止setInterval定时器
里面的参数就是定时器ID
window可以省略

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null;//定义一个全局变量timer  null是一个空对象
        begin.addEventListener('click', function () {
            timer = setInterval(function () {
                console.log('一秒钟到了');
            }, 1000);
        })
        stop.addEventListener('click', function () {
            clearInterval(timer);
            console.log('停止定时');
        })
    </script>

</body>

</html>

结果

间隔时间发送短信案例

点击发送按钮就立即将按钮禁用：disabled = true；
里面内容发生变化，提示剩余多久的时间可以再次点击按钮，使用innerHTML修改按钮里面的值
按钮里面的秒数不断变化，使用定时器setInterval
如果变量为0说明到了时间，我们需要停止定时器，并且复原到按钮初始状态

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    手机号码：<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);//当秒数为0时，停止倒计时
                    btn.disabled = false;//复原按钮
                    btn.innerHTML = '发送';//复原按钮
                    timer = 3;//复原按钮
                } else {
                    btn.innerHTML = '还剩下' + timer + '秒';//修改button里面的值
                    timer--;//每隔一秒timer值-1
                }
            }, 1000);
        })
    </script>

</body>

</html>

结果

this指向问题

只有函数被调用被执行才能确定this到底指向谁
一般情况下就是调用他对象
1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this也是指向window）
2.方法调用中谁调用this就指向谁
3.构造函数 this指向实例化对象

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>点击</button>
    <script>
        //1.全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this也是指向window）
        console.log(this);
        function fn() {
            console.log(this);//this指向window
        }
        fn();
        setTimeout(function () {
            console.log(this);//this指向window
        }, 1000)
        //2.
        var o = {
            sayHi: function () {
                console.log(this);//this指向的是o这个对象
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        btn.onclick = function () {
            console.log(this);//this指向button
        }
        btn.addEventListener('click', function () {
            console.log(this);
        })
        //3.构造函数  this指向构造函数的实例
        function Fun() {
            console.log(this);//this指向fun实例对象
        }
        var fun = new Fun();
    </script>

</body>

</html>

结果

JS执行队列
- JS是一个单线程语言，同一时间只能做一件事
- 所有任务都需要排队，上一个任务执行完毕，才能执行下一个任务
- 同步和异步
  - 同步：程序执行顺序与任务的排列顺序是一致
  - 异步：同时处理其他事情
  - 本质区别：这条流水线上各个流程的执行顺序不同
  - 同步任务：同步任务放在了主线程执行栈
  - 异步任务：JS异步是通过回调函数实现的，异步任务相关回调函数，添加到任务队列中（消息队列）
    - 常见异步任务：
      - 普通事件:click,resize
      - 资源加载：load,error
      - 定时器：setInterval,setTimeout
- JS执行机制
  - 1.先执行占中的同步任务
  - 2.遇到异步任务（回调函数）放入任务队列中
  - 3.一旦执行栈中的所有同步任务执行完毕，系统按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行