JavaScript (3) BOM 总结

人生苦若如初见

已于 2022-02-09 21:10:48 修改

阅读量504

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

于 2022-02-09 19:10:19 首次发布

本文链接：https://blog.csdn.net/qq_63339948/article/details/122846581

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一 .第一部分
1. 什么是BOM
在这里插入图片描述
2.DOM与BOM的区别

3. Window常见事件
其目的是等页面内容加载完毕后进行的

window.addEventListener('load', function() {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('点击我');
        })
    })
    window.addEventListener('load', function() {

        alert(22);
    })
    document.addEventListener('DOMContentLoaded', function() {
            alert(33);
        })
        // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
        // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些

4.定时器问题
1. setTimeout :
// 语法规范： window.setTimeout(调用函数, 延时时间);
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒但是可以省略，如果省略默认的是0
// 3. 这个调用函数可以直接写函数还可以写函数名还有一个写法 ‘函数名()’
// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符（名字)

   // setTimeout(function() {
    //     console.log('时间到了');

    // }, 2000);
    function callback() {
        console.log('爆炸了');

    }
    var timer1 = setTimeout(callback, 3000);
    var timer2 = setTimeout(callback, 5000);
    // setTimeout('callback()', 3000); // 我们不提倡这个写法

2.清除 setTimeout定时器
clearTimeout(timer);

  var btn = document.querySelector('button');
    var timer = setTimeout(function() {
        console.log('爆炸了');

    }, 5000);
    btn.addEventListener('click', function() {
        clearTimeout(timer);
    })

3. setInterval ( )定时器
// 1语法规范： window.setInterval(调用函数, 延时时间);
// 2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
// 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

 setInterval(function() {
        console.log('继续输出');

    }, 1000);

4.清除 setInterval ( )定时器

clearInterval(timer);

5.倒计时案例

 // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2022-2-10 12:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        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;
        }

二 . 第二部分
1.this 指向问题 ：一般情况下this的最终指向的是那个调用它的对象

  // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
        console.log(this);

        function fn() {
            console.log(this);

        }
        window.fn();
        window.setTimeout(function() {
            console.log(this);

        }, 1000);
        // 2. 方法调用中谁调用this指向谁
        var o = {
            sayHi: function() {
                console.log(this); // this指向的是 o 这个对象

            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     console.log(this); // this指向的是btn这个按钮对象

        // }
        btn.addEventListener('click', function() {
                console.log(this); // this指向的是btn这个按钮对象

            })
            // 3. 构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); // this 指向的是fun 实例对象

        }
        var fun = new Fun();

2.JS执行机制

1. 同步和异步
在这里插入图片描述

3 . Location 对象

1. URL 在这里插入图片描述

获取URL参数案例：
有个弊端：输入的只能是数字或者英文字符串

第一个页面 login.html

<form action="index(1).html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>

第二个页面 index(1).html

 console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';

4.navigator 对象
在这里插入图片描述
5 . history 对象

三 . 第三部分

1.元素偏移量 offset 系列
在这里插入图片描述

缓动动画多个目标值之间移动的动画函数

 // 缓动动画函数封装obj目标对象 target 目标位置
    // 思路：
    // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
    // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
    // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
    function animate(obj, target) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + 'px';

        }, 15);
    }
    var span = document.querySelector('span');
    var btn500 = document.querySelector('.btn500');
    var btn800 = document.querySelector('.btn800');

    btn500.addEventListener('click', function() {
        // 调用函数
        animate(span, 500);
    })
    btn800.addEventListener('click', function() {
            // 调用函数
            animate(span, 800);
        })
        // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
        // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

在这里插入图片描述

函数封装缓动动画

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

2.元素可视区 client 系列
在这里插入图片描述
3 . 元素滚动 scroll 系列

mouseenter 和 mouseover 的区别
在这里插入图片描述
最后一点立即执行函数：

 // 1.立即执行函数: 不需要调用，立马能够自己执行的函数
        function fn() {
            console.log(1);

        }
        fn();
        // 2. 写法 也可以传递参数进来
        // 1.(function() {})()    或者  2. (function(){}());
        
        (function(a, b) {
            console.log(a + b);
            var num = 10;
        })(1, 2); // 第二个小括号可以看做是调用函数
        
        (function sum(a, b) {
            console.log(a + b);
            var num = 10; // 局部变量
        }(2, 3));
        // 3. 立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况

四 . 第四部分
1.触屏事件在这里插入图片描述

2. 移动端常见特性

**classList 属性**
  <div class="one two"></div>
    <button> 开关灯</button>
    <script>
        // classList 返回元素的类名
        var div = document.querySelector('div');
        // console.log(div.classList[1]);
        // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
        div.classList.add('three');
        // 2. 删除类名
        div.classList.remove('one');
        // 3. 切换类
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            document.body.classList.toggle('bg');
        })
    </script>

在这里插入图片描述

五 . 第五部分
1.什么是插件
（1）
（2）
（3）

（4）在这里插入图片描述
2 . 框架概念

人生苦若如初见

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript (3) BOM 总结

一 .第一部分1. 什么是BOM2.DOM与BOM的区别3. Window常见事件其目的是等页面内容加载完毕后进行的window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener('click', function() { alert('点击我'); })
复制链接

扫一扫

专栏目录