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>

posted @ 2021-05-05 16:28 别动我咖喱阅读(59) 评论(0) 编辑收藏举报

刷新页面返回顶部

别动我咖喱

JavaScript课程——Day11（BOM，宽高位置属性）

公告