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>
