BOM(笔记)

最新推荐文章于 2022-05-01 23:22:34 发布

不务正业的前端学徒

最新推荐文章于 2022-05-01 23:22:34 发布

阅读量99

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45522704/article/details/104973864

版权

杂专栏收录该内容

18 篇文章 0 订阅

订阅专栏

window对象是浏览器的顶级对象，它具有双重角色
1、它是js访问浏览器窗口的一个接口
2、它是一个全局对象，定义在全局作用域中的对象、函数都会变成window对象的属性和方法
window下的一个特殊属性是window.name

窗口加载事件

<script>
    // 这是页面加载事件，当文档内容完全加载完成会触发该事件
    // 有了它就可以把js代码写在页面元素的上方
    // window.onload只能写一次， 但addEventListener没有限制
    window.onload = function() {
        window.addEventListener("load", function() {})
    }
</script>

document.addEventListener(‘DOMContentLoaded’, function() {})
仅当DOM加载完成，不包括样式表，图片，flash等，IE9以上支持
如果页面图片多，可以用这个来提高用户的体验

调整窗口大小事件

window.onresiz = function() {}
window.addEventListener(“resize”, function() {})
只要窗口大小发生改变，就会触发这个事件
常常用这个事件完成响应式布局

window.innerWidth是当前屏幕宽度

<div style="width: 100px; height: 100px; background-color: pink;"></div>
<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';
            }
        })
    })
</script>

setTimeout() 定时器

window.setTimeout(调用函数，延迟的毫秒数)
window可省略
调用函数可以直接写函数，或者写函数名，或者字符串’函数名()'三种形式
延迟的毫秒默认是0，必须是毫秒
经常给定时器起个名字，目的是停止计时器

<script>
    function log() {
        console.log('dayin');
    }
    // 起名字
    var log = setTimeout(log, 2000);
</script>

用clearTimeout(计时器名字);来停止计时器

<div style="width: 100px; height: 100px; background-color: pink;"></div>
<button>点击停止计时器</button>
<script>
    var div = document.querySelector("div");
    var dsq = setTimeout(function() {
        div.style.display = 'none';
    }, 5000)
    var button = document.querySelector("button");
    button.addEventListener("click", function() {
        clearTimeout(dsq);
    })
</script>

setInterval() 定时器

window.setInterval(回调函数，毫秒数)；
每隔多少毫秒就调用一次函数，可以多次

调用函数可以直接写函数，或者写函数名，或者字符串’函数名()'三种形式
延迟的毫秒默认是0，必须是毫秒
经常给定时器起个名字，目的是停止计时器

小案例：定时器暂停时间显示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        button {
            background-color: powderblue;
            width: 122px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        
        p {
            background-color: pink;
            width: 250px;
            height: 30px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
        }
    </style>
</head>

<body>
    <p>某个时间</p>
    <button>停止时间</button>
    <button>显示时间</button>
    <script>
        var btn = document.querySelectorAll("button");
        var p = document.querySelector('p');
        getTimer()
        var timer = setInterval(getTimer, 1000);
        btn[0].addEventListener("click", function() {
            clearInterval(timer);
        })
        btn[1].addEventListener('click', function() {
            getTimer()
            var timer = setInterval(getTimer, 1000);
            btn[0].addEventListener("click", function() {
                clearInterval(timer);
            })
        })

        function getTimer() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = arr[date.getDay()];
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            p.innerText = year + '年' + month + '月' + dates + '日 ' + day + ' ' + hour + ':' + minute + ':' + second;
        }
    </script>

</body>

</html>

同步和异步

同步任务都在主线程上执行
异步任务：它是通过回调函数实现的
一般有三类
1、普通时间click、resize等
2、资源加载load、error等
3、定时器setInterval、setTimeout等

js先执行同步任务
异步任务放入任务队列中
一旦同步任务执行完毕，系统就会安装次序执行异步任务

location对象的属性

<script>
    // 返回当前页面的路径和文件名
    var url = location.href;
    console.log(url);
    // 返回主机
    var host = localStorage.host;
    console.log(host);
    // 返回路径
    var pathname = location.pathname;
    console.log(pathname);
    // 返回 web 主机的端口
    var port = location.port;
    console.log(port);
    // 返回参数
    var search = location.search;
    // 返回片段 #后面内容 常见于链接锚点
    var hash = location.hash;
</script>

location.href用法

<div></div>
<script>
    var div = document.querySelector('div');
    var timer = 5;
    setInterval(function() {
        if (timer == 0) {
            location.href = 'index.html';
        } else {
            div.innerHTML = '您将在' + timer + '秒后跳转到??';
            timer--;
        }
    }, 1000)
</script>

search的用法

<div></div>
<form action="">
    用户名<input type="text" name="uname">
    <input type="submit" value="登录">
</form>
<script>
    // ?uname=2131
    console.log(location.search);
    // uname=2131，去掉?
    var params = location.search.substr(1);
    console.log(params);
    // 利用=分隔为数组
    var arr = params.split('=');
    console.log(arr);
    var div = document.querySelector('div');
    div.innerHTML = arr[1];
</script>

location.assign()可以跳转页面（重定向页面）
location.replace() 替换当前页面，不能后退页面
location.reload() 重写加载页面，相当于刷新，如果参数为true则强制刷新

history对象方法
history.back() 后退
history.forward() 前进
history.go(参数) 前进后退功能参数为1，就前进一个页面，-1就后退一个页面

不务正业的前端学徒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM(笔记)

window对象是浏览器的顶级对象，它具有双重角色1、它是js访问浏览器窗口的一个接口2、它是一个全局对象，定义在全局作用域中的对象、函数都会变成window对象的属性和方法window下的一个特殊属性是window.name窗口加载事件<script> // 这是页面加载事件，当文档内容完全加载完成会触发该事件 // 有了它就可以把js代码写在页面元素的上方...
复制链接

扫一扫