BOM基础介绍

BOM

• BOM：Browser Object Model 浏览器对象模型。BOM的核心是window对象。
• window：可以用来访问浏览器功能的接口，ECMAScript中的Global对象。
• window对象在全局有定义，声明的全局变量和函数都是window的属性和方法。
• window的方法或者属性在使用时一般省略window。

系统对话框

• alert(): 警告框，在页面中弹出警告框，阻断式。
• confirm(): 带有确认和取消的对话框，确认-true，取消-false。
• prompt(): 带输入框的对话框

// alert(): 警告框，在页面中弹出警告框，阻断式。
// alert('alert');
// window.alert('window.alert');

// confirm(): 带有确认和取消的对话框，确认-true，取消-false。
// var s = confirm('确认删除？');
// console.log(s);

// prompt(): 带输入框的对话框
var s = prompt('请输入内容', '默认值');
console.log(s);

open()和close()

• open(): 打开窗口 open(url, 打开窗口的方式, 设置窗口的大小, 是否取代当前窗口的位置)
• close(): 关闭窗口

location

hash "#contents" 返回URL中的hash（#号后跟零或多个字符），如果URL中不包
含散列，则返回空字符串
host "www.wrox.com:8080" 返回服务器名称和端口号（如果有）
hostname "www.wrox.com" 返回不带端口号的服务器名称
href "http:/www.wrox.com" 返回当前加载页面的完整URL。而location对象的
toString()方法也返回这个值
pathname "/WileyCDA/" 返回URL中的目录和（或）文件名
port "8080" 返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空
字符串
protocol "http:" 返回页面使用的协议。通常是http:或https:
search "?q=javascript" 返回URL的查询字符串。这个字符串以问号开头 

history

• history: 历史记录
• history.go(): 跳转页面
• history.back(): 返回
• history.forward(): 前进

client

• clientWidth: 元素的可视宽 width+padding
• clientHeight: 元素的可视高 height+padding
• document.documentElement.clientWidth: 屏幕的可视宽
• document.documentElement.clientHeight: 屏幕的可视高
• clientLeft: 左边框
• clientTop: 上边框

// - clientWidth: 元素的可视宽 width+padding
// - clientHeight: 元素的可视高 height+padding
var box = document.querySelector('#box');
console.log(box.clientWidth); // 240
console.log(box.clientHeight); // 240

// document.documentElement.clientWidth: 屏幕的可视宽
// document.documentElement.clientHeight: 屏幕的可视高
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

// clientLeft: 左边框
// clientTop: 上边框
console.log(box.clientLeft);
console.log(box.clientTop);

offset

• offsetWidth: 元素占位宽 width+padding+border
• offsetHeight: 元素占位高 height+padding+border
• offsetLeft: 从当前元素的左边框外到offsetParent对象左边框内的距离
• offsetTop: 从当前元素的上边框外到offsetParent对象上边框内的距离

// - offsetWidth: 元素占位宽 width+padding+border
// - offsetHeight: 元素占位高 height+padding+border  
var box = document.getElementById('box');
console.log(box.offsetWidth);      
console.log(box.offsetHeight);      

// offsetLeft: 从当前元素的左边框外到offsetParent对象左边框内的距离
// offsetTop: 从当前元素的上边框外到offsetParent对象上边框内的距离
console.log(box.offsetLeft);
console.log(box.offsetTop);

scroll

• onscroll: 滚动事件
• document.documentElement.scrollTop || document.body.scrollTop: 页面滚动出去的高
• scrollTop: 元素滚动出去的高
• scrollLeft: 元素滚动出去的宽
• scrollWidth: 元素实际内容的宽
• scrollHeight: 元素实际内容的高

// onscroll: 滚动事件
// document.documentElement.scrollTop || document.body.scrollTop: 页面滚动出去的高
window.onscroll = function () {
    console.log('scroll');
    console.log(document.documentElement.scrollTop || document.body.scrollTop);
}
// scrollTop: 元素滚动出去的高
// scrollLeft: 元素滚动出去的宽
// scrollWidth: 元素实际内容的宽
// scrollHeight: 元素实际内容的高
var box = document.getElementById('box');
box.onscroll = function () {
    console.log(box.scrollTop);
    console.log(box.scrollLeft);
    console.log(box.scrollWidth);
    console.log(box.scrollHeight);
    console.log('-------------------');
}

懒加载

• 为了减少同时加载的线程数量,更快的把可视区域内的图片加载完成提升用户体验,也可以减少同一时间发送服务器的请求数量,减少服务器的负载, 从而使用懒加载.
• 原理: 把图片路径放在自定义属性(_src)中, 当图片进入可视区域内, 把自定义属性赋值给src属性, 加载图片.

onresize

• onresize: 屏幕发生变化时调用