3 BOM

非洲小朋友(๑°3°๑)

已于 2022-12-20 23:37:46 修改

阅读量39

点赞数

文章标签： javascript 前端 html

于 2022-12-20 23:18:16 首次发布

本文链接：https://blog.csdn.net/qq_64266012/article/details/128391414

版权

3 BOM

3.1 BOM顶级对象Window

特点：

1.是JS访问浏览器窗口的一个接口；

2.它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用时可以省略window。

   // window.document.querySelector()
        var num = 10;
        console.log(num);
        console.log(window.num);

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

        }
        fn();
        window.fn();
        // alert(11);
        // window.alert(11)
        console.dir(window);
        // var name = 10;
        console.log(window.name);

3.2 window对象常见事件

3.2.1 窗口加载事件

1.load等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等，在来触发该事件

2.DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行加载速度比 load更快一些

// window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        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);
            })
            window.onload

注意：传统方式写注册事件只能写一个，以最后一个为主，使用addEventListener无限制

3.2.2 调整窗口大小事件

1.resize：调整窗口大小加载事件，当触发时就调用的处理函数

   <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>

代码解读：

div已写了style样式，代码没有显示，innerWidth是获取当前屏幕的宽度。

3.3 定时器

3.3.1 setTimeout/setInterval

语法：

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

       // 1. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 2. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
//       3. 这个window在调用的时候可以省略
        // setTimeout(function() {
        //     console.log('2');

        // }, 2000);
        function callback() {
            console.log('1');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);

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

        }, 1000);

注意：这个延时时间单位是毫秒，默认0。

3.3.2 停止定时器

语法：

window.clearTimeout(定时器标识符);可以取消线先前调用setTimeout()建立的定时器。
window.clearInterval(定时器标识符);可以取消线先前调用setInterval()建立的定时器。

<button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('1');

        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>



<button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>

3.4 JS执使用行机制

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

异步：在做该任务的同时，也可以去处理其它任务。

执行机制：JS会把任务分成同步任务和异步任务，同步任务放到执行栈中，异步任务提交到异步进程处理，等待触发，触发完之后放到任务队列中，待执行栈的全部任务执行完之后，在到任务队列取任务来执行，然后在回头看看任务队列是否还有，若有则继续，该重复过程称为事件循环。

3.5 location对象

常见属性：

属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

 <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            location.href = 'http://www.baidu.com';
        })
        var timer = 5;
        setInterval(function() {
            if (timer == 0) {
                location.href = 'http://www.baidu.com';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转';
                timer--;
            }

        }, 1000);
    </script>

常见方法：

方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮如果参数为TRUE 强制刷新 Ctrl+f5

 <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            // location.assign('http://www.baidu.com');
            // 不记录浏览历史，所以不可以实现后退功能
            // location.replace('http://www.itcast.cn');
            location.reload(true);
        })
    </script>

3.6 navigator 对象（了解）

navigator 对象包含有关浏览器的信息，最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。

具体使用方法请参考 MDN

3.7 history 对象

与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。一般不会使用

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能参数是1 前进一个页面若是-1 后退一个页面

示例：

<a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>

    <a href="index.html">点击我去往首页</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.back();
            history.go(-1);
        })
    </script>