文章目录
一.BOM-window对象
BOM:Browser Object Model 浏览器对象模型
核心:window对象;
所有的全局变量和局部函数都属于window
,都是window的属性和方法,就连DOM的document也是window对象的属性,都可以写成indow.XX
,一般会省略window;
window:窗口;
document:文档;
二. window提供的系统警告框
1. alert();–>警告框;
window.alert("警告框"); //一般会省略window;
alert("警告框");
2. confirm; -->带选择的对话框
confirm("确定或者取消"); //返回true-->确定,false-->取消;
3. promt(“提示信息”,默认值)
var s = prompt("请输入数字",3);
console.log(s); -->确定--输入的内容 取消--null
三. opan与close(打开/关闭网页)
1.opan(打开)
语法: opan(url,打开方式,设置窗口大小,新窗口是否取代浏览器记录中的位置)
打开方式:
_self: 在当前窗口打开;
_blank: 在新窗口打开;
2. close()关闭窗口
//没有参数,关闭当前网页
<buttton onclick="window.close()">关闭</button>
四. body位置属性
1. client
clientWidth/clientHeight(元素可视宽高)
元素.clientWidth
:元素可视宽;(width + 左右的padding);元素.clientHeight
:元素可视高度;(height + 上下的padding);document.documentElement.clientWidth/Height
:屏幕的可是宽高;- 元素边框
元素.clientTop
:上边框;
元素.clientLeft
:左边框;
2. offset
- 元素占位宽高
元素.offsetWidth/Height
:content + padding + border; - 元素定位父元素的距离
元素.offsetTop
:当前元素的顶部,到定位父元素的距离,没有定位父元素,到body的距离;元素.offserLeft
:当前元素左边,到定位父元素的距离,没有定位父元素,到body的距离;
3.scroll
- 滚动事件
onscroll
:滚动条滚动的时候调用 - 屏幕滚动的距离:
document.documentElement.scrollTop
:获取页面被卷去的高;
document.body.scrollTop
:获取页面被卷去的高; - 元素
元素.scrollTop
:被卷去的高;
元素.scrollLeft
:被卷去的宽;
元素.scrollWidth
:获取元素实际内容宽;
元素.scrollHeight
:获取元素实际内容高;
五. 懒加载
先只加载可视窗口区域的图片,当用户向下拖动滚动条的时候再继续加载后面的图片(同样,也只是加载可视窗口区域的图片);
- 减少了加载时县城数量,使可视区域内的图片也能够快速加载,优化了用户体验;
- 减少了同一时间发向服务器的请求数,服务器压力剧减;
方法:在写网页<img>
标签时并不会兼顾图片的路径放入src属性,而是自定义一个其他属性:_scr
。将路径放入这个自定义的属性中,南无在加载页面时买这个图片一开始是无法加载的,而当浏览器的可是区域移动到此图片上时,将_src
中的路径赋值给scr
属性,并开始加载。
//获取元素
var oImg = document.getElementsByTagName("img");
//确定那些图片能显示
for(var i = 0;i<oImg.length;i++){
//当前图片的顶部是否在可视区里面;
//获取当前元素的顶部距离
var offsetTop = oImg[i].foosetTop;
var clientH = document.documentElement.clientHeight;
var scollTop = document.documentELement.scrollTop || document.body.scrollTop;
if(offsetTop <= clientH+scollTop){
oImg[i].scr = oImg[i].getAttribute('_src');
}
}
六. resize事件
当屏幕发生变化的时候调用
window.onresize = dunction(){
console.log(“屏幕大小发生改变”);
}