BOM浏览器对象模型(顶级对象：window)
onload()和ready()的区别
window.onload = function(){ // 原生JavaScript 页面加载可完毕执行的方法
}
$(document).ready(function(){ // jquery DOM元素加载完毕可执行的方法
})
$(function(){ //jquery 简写方式
})
两者的区别：
1. onload(): 需要等待网页全部加载完毕（包括图片等资源），然后在执行js代码；ready():只需要等待网页中的DOM结构加载完即可执行js代码
2.onload():只可以执行一次，如果有多次，则最后一次会覆盖掉前面的js代码；ready():可以执行多次，js代码不会被覆盖
浏览器窗口大小被改变的事件
window.onresize = function(){
}
localhost对象
- .hash :地址栏上#及后面的内容
- .host : 主机名及端口号
- .hostname : 主机名
- .pathname : 文件路径（相对路径）
- .port : 端口号
- .portocol : 协议
- .search : 搜索的内容
设置页面的跳转地址
location.href = "https://lang1427.github.io"; /*跳转页面地址*/
location.assign("https://lang1427.github.io");
location.reload(); /*重新加载刷新页面*/
location.replace("https://lang1427.github.io"); /*没有历史记录的跳转方式*/
history对象
history.forward(); /*前进*/
history.back(); /*后退，返回上一次*/
history.go(); /*+:前进 -:后退*/
navigation对象
navigation.userAgent; /*判断用户浏览器的类型*/
navigation.platform; /*判断浏览器所在的系统平台类型*/
定时器
var timer = setInterval(function(){ /*设置定时器*/
},1000);
window.clearInterval(timer); /*清理定时器*/
/*一次性的定时器*/
var time = window.setTimeout(function(){
},1000);
window.clearInterval(time); /*清理定时器*/
三大家族（offset、client、scroll）
JavaScript方式
offset系列：通过offset获取style属性中的left、top、width、height的值
<style>
*{
padding:0;
margin: 0;
/* box-sizing: border-box; */
/* 如果为盒子模型，内减模式，则offsetWidth、offsetHeight获取到的是width、height */
}
#dv{
position: absolute;
left: 200px;
top:100px;
background-color: red;
width:200px;
height: 200px;
border:10px solid #ccc;
margin-left: 200px;
padding-left: 100px;
}
</style>
</head>
<body>
<div id="dv"></div>
</body>
<script>
console.log(document.getElementById('dv').offsetLeft)
// offsetLeft: left + margin-left的值，可视区域距离左边的px
console.log(document.getElementById('dv').offsetTop)
// offsetTop: top + margin-top的值，可视区域距离顶部的px
console.log(document.getElementById('dv').offsetWidth)
// offsetWidth： width + border + padding，可视区域的宽度
console.log(document.getElementById('dv').offsetHeight)
// offsetHeight： height + border + padding，可视区域的高度
</script>
client系列：可视区域的宽高（内容没有超出），左上边框的值
.clientWidth // width + padding
.clientHeight // height + padding
.clientLeft // border的px值
.clientTop // border的px值
scroll系列：获取实际内容或元素的宽高（内容超出需要加上超出的部分），向上向左滚出去的距离
window.onscroll = function(){ /*javascript 浏览器的滚动事件*/
}
$(window).scroll(function(){ /*jquery 浏览器的滚动事件*/
})
.scrollWidth // width + padding
.scrollHeight // height + padding
document.documentElement.scrollLeft // 向左滚动出去的距离
document.documentElement.scrollTop // 向上滚动出去的距离
jquery方式
.offset().left // 获取元素相对于页面最左侧的距离 left + margin-left
.offset().top // 获取元素相对于页面最顶部的距离 top + margin-top
.width() // 获取 或 设置 元素的宽度 width，与内容的宽度无关
.height() // 获取 或 设置 元素的高度 height，与内容的高度无关
.scrollTop() // 获取 元素向上滚动的距离值
.scrollLeft() // 获取 元素向左滚动的距离值