• JavaScript课程——Day11(BOM,宽高位置属性)


    1、BOM

    window是js中最大的对象,表示窗口,包含document

    document是文档对象,表示HTML

    所有JavaScript全局对象、函数以及变量均自动称为window对象的成员。全局变量是window对象的属性。全局函数是window对象的方法。

    // 我们声明的全局变量或全局函数都是window下的属性或方法
    var a = 10;
    console.log(a);
    console.log(window.a);
    
    
    // --------------------------
    function fn() {
        console.log(this);
    }
    fn(); // window
    window.fn(); // window
    
    // ------------------------
    window.getComputedStyle

      1.1、弹出窗

    // window是js中最大的对象,所有的一切方法和属性,都是window对象方法和属性
    
    // 带有确定按钮的弹窗,没有返回值
    var n = window.alert('你好');
    console.log(n);
    
    // 确有确定按钮和取消按钮的弹窗,确定返回true,取消返回false
    var n = confirm('是否OK?');
    console.log(n);
    
    // 带有输入框的弹窗,确定返回输入框的值,取消返回null
    var n = prompt('你的分数', 100);
    console.log(n);

      1.2、打开和关闭

    • window.open(url,打开窗口的方式(默认新窗口),设置窗口大小,新窗口是否取代浏览器历史记录中的位置)
      • _self:在当前窗口打开
      • _blank:在新窗口打开
      • 返回新页面的window对象
    • window.close();     只能关闭由js打开的页面
    var btn = document.querySelectorAll('button');
    var w = null;
    
    // 打开
    btn[0].onclick = function () {
        w = open('https://www.baidu.com', '_blank', 'width=500px, height=300px');
        console.log(w); // 新窗口的window对象
        console.log(w == window); // false
    }
    
    // 关闭
    btn[1].onclick = function () {
        w.close();
    }

      1.3、location

    console.log(location); // 浏览器地址 它是一个对象,它下面有很多的属性和方法
    
    console.log(location.href); // 返回浏览器地址 可以设置
    console.log(location.search); // 返回?号以后的东西,包括?号
    console.log(location.hash); // 返回#号以后的东西,包括#号
    console.log(location.host); // 返回服务器名称和端口号(如果有)
    console.log(location.hostname); // 不带端口号的服务器名称
    console.log(location.pathname); // URL中的目录和(或)文件名
    console.log(location.port); // 端口号
    console.log(location.protocol); // 协议
    
    
    setTimeout(function () {
        // 跳转新页面
        // location.href = 'https://www.baidu.com'
        location.reload(); // 重新加载页面
    }, 3000);

      1.4、history

    • history.go(-1);        后退一页
    • history.go(1);         前进一页
    • history.go(2);         前进两页
    • history.back()        后退
    • history.forward()    前进

      1.5、navigator

      navigator对象的属性通常用于检测显示网页的浏览器类型

    console.log(navigator.appCodeName); // 浏览器代号
    console.log(navigator.appName); // 浏览器名称
    console.log(navigator.appVersion); // 浏览器版本
    console.log(navigator.cookieEnabled); // 是否启用了cookie
    console.log(navigator.platform); // 硬件平台
    console.log(navigator.userAgent); // 用户代理
    console.log(navigator.systemLanguage); // 用户代理语言

      1.6、事件

    // 当 html 文档和资源都加载完成后触发
    window.onload = function () {
        console.log('加载完成了');
    }
    
    // 当窗口大小(可视区)发生变化时会触发,连续触发
    window.onresize = function () {
        console.log(1);
    }
    
    // 当拖动滚动条的时候触发,连续触发
    window.onscroll = function () {
        console.log(1);
    }

    2、宽高、位置属性

      2.1、元素宽高

    var box = document.getElementById('box');
    
    // 1、行间 style
    // 2、getComputedStyle  currentStyle
    
    // 注意:不可以获取隐藏元素的宽高,没有单位
    console.log(box.clientWidth); // 可视宽  120 width + padding
    console.log(box.offsetWidth); // 占位宽  122 width + padding + border
    
    // 高也一样,只需要clientWidth 换成 clientHeight

      2.2、可视区宽高

      获取特殊标签

    • console.log(document.body);       body标签
    • console.log(document.documentElement);      html标签
    • document.title = '我是网页的title标签';        title标签
    // 可视区宽高
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    alert(w);
    alert(h);

      2.3、元素位置

    • 元素.offsetLeft
    • 元素.offsetTop

      获取到离它最近的有定位属性的父级距离,如果没有定位的父级,获取到body的距离

    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
    var box3 = document.querySelector('.box3');
    console.log(box3.offsetParent);
    console.log(box3.offsetTop);
    
    // -------------------------------------
    // 封装一个方法,用于获取任何一个元素到文档的距离
    // 传入一个元素,返回一个对象 {left: xx, top: xx}
    function getPos(ele) {
        var o = { left: 0, top: 0 };
    
        while (ele) {
            o.top += ele.offsetTop;
            o.left += ele.offsetLeft;
            ele = ele.offsetParent;
        }
    
        return o;
    }
    
    console.log(getPos(box3));

      2.4、滚动条

    • 获取
      • 元素.scrollTop
      • 元素.scrollLeft
    • 设置
      • 元素.scrollTop = 值
      • 元素.scrollLeft = 值
    // 滚动事件
    window.onscroll = function () {
        // 页面的滚动,滚动的元素是html
        var top = document.documentElement.scrollTop;
        console.log(top); // 标准浏览器支持
    }
    
    document.onclick = function () {
        // 设置
        document.documentElement.scrollTop = 500;
    }

      

      案例:返回顶部

    <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>
            span {
                position: fixed;
                width: 80px;
                height: 80px;
                background-color: red;
                border-radius: 50%;
                right: 10px;
                bottom: 10px;
                cursor: pointer;
                display: none;
            }
        </style>
    </head>
    
    <body style="height: 3000px;">
        <span></span>
    
        <script>
            var span = document.querySelector('span');
    
            // 如果滚动条的高度,超过300,则span展示,否则隐藏
            window.onscroll = function () {
                var top = document.documentElement.scrollTop;
                if (top >= 300) {
                    span.style.display = 'block';
                } else {
                    span.style.display = 'none';
                }
            }
    
            // 点击返回顶部
            span.onclick = function () {
                clearInterval(span.timer); // 先清再开
    
                var top = document.documentElement.scrollTop; // 获取滚动条的高度
    
                span.timer = setInterval(function () {
                    top -= 100;
                    document.documentElement.scrollTop = top; // 再赋值给滚动条
                    if (top <= 0) {
                        clearInterval(span.timer);
                    }
                }, 30);
            }
        </script>
    </body>

      案例:弹出窗

    <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>
            .mark {
                width: 500px;
                height: 500px;
                background-color: #ccc;
                opacity: 0.4;
                position: absolute;
                z-index: 1;
                left: 0;
                top: 0;
            }
    
            .box {
                width: 300px;
                height: 200px;
                border: 1px solid #ccc;
                border-radius: 3px;
                background-color: white;
                position: absolute;
                z-index: 5;
            }
    
            .box .title {
                height: 40px;
                line-height: 40px;
                background-color: #ccc;
                padding-left: 10px;
            }
    
            .box .title h3 {
                float: left;
                margin: 0;
            }
    
            .box .title .close {
                float: right;
                padding: 0 15px;
                cursor: pointer;
            }
    
            .content {
                padding: 10px;
            }
        </style>
        <script>
            window.onload = function () {
                var btn = document.querySelector('button');
                var body = document.body;
    
                btn.onclick = function () {
                    // 获取可视区的宽高
                    var clientW = document.documentElement.clientWidth;
                    var clientH = document.documentElement.clientHeight;
    
    
                    // 创建遮罩
                    var mark = document.createElement('div');
                    mark.className = 'mark';
                    mark.style.width = clientW + 'px';
                    mark.style.height = clientH + 'px';
                    body.appendChild(mark);
    
                    // 创建弹出层
                    var box = document.createElement('div');
                    box.className = 'box';
                    box.innerHTML = `<div class="title">
                            <h3>标题</h3>
                            <span class="close">x</span>
                        </div>
                        <div class="content">
                            <p>这里是内容,是内容</p>
                        </div>`;
                    box.style.left = (clientW - 302) / 2 + 'px';
                    box.style.top = (clientH - 202) / 2 + 'px';
                    body.appendChild(box);
    
                    // 关闭
                    var close = box.querySelector('.close');
                    close.onclick = function () {
                        body.removeChild(mark);
                        body.removeChild(box);
                    }
                }
            }
        </script>
    </head>
    
    <body>
        <button>按钮</button>
    
        <!-- <div class="mark"></div>
        <div class="box">
            <div class="title">
                <h3>标题</h3>
                <span class="close">x</span>
            </div>
            <div class="content">
                <p>这里是内容,是内容</p>
            </div>
        </div> -->
    </body>

      2.5、懒加载

    • 减少了加载时的线程数量,使可视区域内的图片也能够快速加载,优化了用户体验。
    • 减少了同一时间发向服务器的请求数,服务器压力剧减。

      方法:在写网页<img>标签时,并不会将图片的路径放入src属性,而是自定义一个其他的属性_src。将路径放入这个自定义的属性中,那么在加载页面时,这个图片一开始是无法加载的。当浏览器的可视区域移动到此图片上时,将_src中的路径赋值给src属性,并开始加载。

    <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>
            #box {
                width: 700px;
                margin: 50px auto;
            }
    
            #box img {
                width: 300px;
                height: 200px;
                border: 1px solid #ccc;
                margin: 0 20px 20px 0;
            }
        </style>
    </head>
    
    <body>
        <div id="box">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
            <img src="img/white.JPG" _src="img/1.jpg" alt="">
            <img src="img/white.JPG" _src="img/2.jpg" alt="">
            <img src="img/white.JPG" _src="img/3.jpg" alt="">
            <img src="img/white.JPG" _src="img/4.jpg" alt="">
            <img src="img/white.JPG" _src="img/5.jpg" alt="">
            <img src="img/white.JPG" _src="img/6.jpg" alt="">
            <img src="img/white.JPG" _src="img/7.jpg" alt="">
    
        </div>
    
        <script>
            var img = document.querySelectorAll('#box img');
            var clientH = document.documentElement.clientHeight; // 可视区的高
    
            auto(); // 一打开执行一次
            window.onscroll = auto; // 滚动的时候再执行
    
            function auto() {
                var scrollTop = document.documentElement.scrollTop; // 滚动条的高度
                for (var i = 0; i < img.length; i++) {
                    var item = img[i]; // 每个图
                    var top1 = getPos(item).top; // 当前这个图片到顶部的距离
    
                    if (top1 < clientH + scrollTop - 200) { // 小于,证明图片应该到了可视区域
                        item.src = item.getAttribute('_src');
                    }
                }
            }
    
            // 传入一个元素,返回这个元素到文档的距离
            function getPos(ele) {
                var o = { left: 0, top: 0 };
                while (ele) {
                    o.left += ele.offsetLeft;
                    o.top += ele.offsetTop;
                    ele = ele.offsetParent;
                }
                return o;
            }
        </script>
    </body>
  • 相关阅读:
    go通道小案例
    go执行cmd命令并获取输出内容
    vue快速生成二维码
    vue.js数字简化 万转化k显示
    uniapp实现小程序获取用户信息
    实现图片预加载功能
    C# MD5加密字符串方法
    一个封装的 HttpClientHelper
    简易通过队列存储并异步打日志实现
    变量
  • 原文地址:https://www.cnblogs.com/miaochaofan/p/14732008.html
Copyright © 2020-2023  润新知