BOM
BOM: Browser Object Model 浏览器对象模型
js提供给我们用来操作浏览器的信息的接口
iframes
location
history
document
navigator
....
BOM核心: window
可以直接使用变量名或者函数名就能出线效果的(全局变量、全局函数), 所属对象都是window
对话框
-
警告框: alert()
-
带有确定取消按钮的警告框: confirm('提示内容')
-
带有输入框的对话框: prompt('提示内容', '默认值')
// 1. 警告框: alert() // alert('是否已经了解清除风险'); // 2. 带有确定取消按钮的警告框: confirm('提示内容') // 接收返回值: 取消: false 确定: true // var res = confirm('是否已经了解风险'); // console.log(res); // 3. 带有输入框的对话框: prompt('提示内容', '默认值') // 接收返回值: 取消: null 确定: 输入框的内容 // var res = prompt('请输入要购买的金额', '10000'); // console.log(res);
open与close
如果页面结构html中使用, window不能省略
open: 打开
语法: open(跳转的网址, target, 描述词, 是否替换当前页面在历史记录中的位置)
target: 打开方式 _blank: 新标签页 _self: 当前
描述词: 当前窗口宽高 属性名=属性值,属性名=属性值 只在打开方式是_blank
返回新页面的window
close: 关闭
window对象.close();
js中关闭自己: close();
// 点击第一个按钮 打开uxue官网 var btns = document.querySelectorAll('button'); console.log(btns); var nwin = null; btns[0].onclick = function () { // open('https://www.ujiuye.com'); // open('https://www.ujiuye.com', '_blank'); // open('https://www.ujiuye.com', '_self'); // open('https://www.ujiuye.com', '_self'); nwin = open('https://www.ujiuye.com', '_blank', 'width=500px,height=500px'); console.log(nwin); }; btns[2].onclick = function () { close(); }; btns[3].onclick = function () { nwin.close(); };
location
location是BOM中最有用的对象之一. 既是BOM直接对象, 也是window下的对象
存储相关当前页面的信息: 网址 协议 搜索内容...
// 调试: 打开线上网站 安装插件: live Server console.log(location); // https://www.jd.com/ console.log(location.protocol); // 协议 http https file console.log(location.hostname); // 服务器名称 console.log(location.port); // 端口 console.log(location.host); // 服务器名称 + 端口 console.log(location.pathname); // 文件路径 console.log(location.search); // 搜索内容 ?+后面的内容 console.log(location.hash); // 哈希值 地址后面的散列 #+后面的内容 console.log(location.href); // 完整地址 setTimeout(function () { // 给href赋值 可以实现页面跳转 // location.href = 'https://www.baidu.com'; // window.location.href = 'https://www.baidu.com'; // 刷新 // location.reload(); },3000);
history
history: 历史记录
history.go(数字);
正数: 前进几个页面
负数: 后退几个页面
0: 刷新
history.back(); 回退到上一个页面
history.forward(); 前进到下一个页面
console.log(history); setTimeout(function () { // 前进到02页面 // history.forward(); // history.go(2); // history.go(0); }, 3000);
BOM事件
onload
当script标签写在body、页面结构之前的时候 获取元素拿不到正确的元素 去到的是null
原因: 由于代码是从上到下的顺序去执行的 当执行到script的时候页面中还没有元素 所以取不到
解决: 让js代码在页面结构之后
\1. 使用 window.onload 事件: 等待页面和其中的资源(图片、视频...)都加载完成后 在执行其中的代码
window.onload = function () { var div = document.querySelector('div'); console.log(div); }
onscroll
滚动事件
window.onscroll 事件
window.onscroll = function () { console.log('滚了'); };
onresize
窗口大小改变事件
window.onresize = function () { console.log('变了'); };
元素三大宽高
client
元素可视宽高 client系列:
clientWidth/clientHeight: 元素的可视宽高 内容 + padding
clientLeft/clientTop: 左/上边框的宽度
屏幕的可视区域的宽高:
document.documentElement.clientWidth/clientHeight
/* 元素可视宽高 client系列: clientWidth/clientHeight: 元素的可视宽高 内容 + padding clientLeft/clientTop: 左/上边框的宽度 */ console.log(div.clientHeight, div.clientWidth); // 300+20+10=330 200+15+5=220 console.log(div.clientLeft, div.clientTop); // 25 5 /* 屏幕的可视区域的宽高: document.documentElement.clientWidth/clientHeight */ console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
offset
offset: 元素的占位宽高
offsetWidth/offsetHeight: 元素的占位宽高 内容 + padding + border
offsetLeft/offasetTop: 元素距离具有定位属性的父元素的左侧/顶部的距离 如果没有定位父元素 就是距离body的距离
console.log(div.offsetWidth, div.offsetHeight); // 200+15+5+25+3=248 300+20+10+5+23=358 console.log(div.offsetLeft, div.offsetTop); // 30 1
scroll
scroll: 滚动距离
scrollHeight/scrollWidth: 元素的实际宽高
scrollTop/scrollLeft: 超出当前页面/元素的距离 滚动卷去的距离
获取页面\窗口的滚动距离:
document.documentElement.scrollTop
document.documentElement.scrollLeft
console.log(div.scrollWidth, div.scrollHeight); // 通过滚动事件 div.onscroll = function () { console.log(div.scrollLeft, div.scrollTop); }; // 获取页面滚动的距离: window.onscroll = function () { console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft); };
滚动的距离: scrollTop/scrollLeft可以被赋值 其他的只能获取不能设置
btn.onclick = function () { document.documentElement.scrollTop = 0; };
懒加载
-
当页面滚动的时候, 判断每一个图片是否在页面的可视范围之内 如果在 img的src被赋值成ntag的值
-
一进入页面的时候 判断是否有图片需要显示
-
当页面可视区域的大小发生改变的时候 判断
判断思路:
元素的offsetTop <= window的scrollTop + 屏幕的可视区域的高度
// 1.1 获取元素 var imgs = document.querySelectorAll('img'); console.log(imgs); // 1.2 页面滚动 window.onscroll = function () { auto(); }; // 2. 一进入页面的时候 判断是否有图片需要显示 auto(); function auto() { // 获取滚动距离 和 屏幕的可视区域的高度 var st = document.documentElement.scrollTop; var ch = document.documentElement.clientHeight; // 每一个 for (var i = 0; i < imgs.length; i++) { // console.log(imgs[i].offsetTop); if (imgs[i].offsetTop <= st + ch) { // img的src被赋值成ntag的值 // 获取ntag的值 // console.log(imgs[i].getAttribute('ntag')); imgs[i].src = imgs[i].getAttribute('ntag'); } } }; // 3. 当页面可视区域的大小发生改变的时候 判断 window.onresize = function () { auto(); }
事件对象
当事件发生的时候, 浏览器将相关当前事件的信息都存在一个对象中, 这个对象就是事件对象
普通: event window.event
低版本ff: 事件处理函数的第一个形参的位置
事件对象兼容: var ev = window.event || evs;
document.onclick = function (evs) { // console.log(window.event, evs); var ev = window.event || evs; console.log(ev); console.log(ev.type); // 事件类型 console.log(ev.target || ev.srcElement); // 事件触发源 console.log(ev.clientX, ev.clientY); // 鼠标距离屏幕可视区域的左上角的距离 console.log(ev.screenX, ev.screenY); // 鼠标距离屏幕的左上角的距离 console.log(ev.pageX, ev.pageY); // 鼠标距离页面左上角的距离 }