一、window对象介绍
1.window对象是js中的顶级对象。 一切默认 全局函数和全局变量都是window的成员(属性+方法)
2.window中的成员,再使用时候一律可以省略window
3.window对象的top属性不能作为变量名
声明变量尽量要规范,不要用标准属性作为变量名
二、window对象两个方法
方法：
-
打开窗口 window.open()
-
关闭窗口 window.close()
//第一个参数: url网址
//第二个参数: 相当于a标签target属性。 默认值_blank:新窗口 _self:当前窗口
//第三个参数: 设置新窗口样式
//第四个参数: 是否替换当前历史记录 true：替换 false:不替换
window.open('http://www.baidu.com','_blank','left=100px,top=100px,width=300px,height=300px')
}
三、window对象事件
* 加载事件 ： DOM树 + 外部资源
2. window.onbeforeunload = function(){}
* 关闭事件： 页面关闭之前执行（存储数据）
案例：
let box = document.querySelector('.box')
//1.加载事件: DOM树 + 外部资源 加载完毕后执行
window.onload = function () {
let box = document.querySelector('.box')
console.log(box.scrollWidth, box.scrollHeight)
}
//2.关闭事件: 页面关闭之前执行
window.onbeforeunload = function () {
//一般关闭之前存储重要数据
console.log('页面马上就要关闭了')
}
四、五星重点location对象
location对象 ： 浏览器地址栏 url
1.重点掌握： location.href = 'url'
2.三个方法
location.assign('url') : 跳转(可以返回)
* location.href = 'url' 功能一致
location.replace('url') : 替换(不能返回)
location.reload('url') : 刷新(一般用于移动端)
// href属性作用: 跳转网页
// location.href = 'http://www.baidu.com'
//assign跳转
document.querySelector('.assign').onclick = function(){
// location.assign('url') 和 location.href = 'url' 功能一致
location.assign('http://www.baidu.com')
}
//replace替换
document.querySelector('.replace').onclick = function(){
//替换网页 ： 不可以回退
location.replace('http://www.baidu.com')
}
//reload刷新
document.querySelector('.reload').onclick = function(){
//刷新网页:相当于F5
location.reload()
}
五、history对象
history对象 ： 历史记录
history.back() : 返回上一页
history.forward() : 前进下一页
history.go(数字) : 跳转指定页面
history.go( 0 ) : 刷新
history.go( 正数 ) : 前进 1：前进1页 2：前进2页
history.go( 负数 ) : 回退 -1：回退1页 -2：回退2页
六、navigator对象
作用：用于收集用户信息
console.log( navigator )//浏览器信息对象
console.log( navigator.userAgent )//用户代理信息（电脑操作系统、浏览器信息）
七、screen对象(了解)
screen : 用户电脑屏幕 （了解，不常用）
八、存储对象
第一
localStorage : 本地存储 应用场景：免登录
语法 :
存数据: localStorage.setItem('属性名',属性值)
取数据: localStorage.getItem('属性名')
删数据: localStorage.removeItem('属性名')
清空数据: localStorage.clear()
案例代码
document.querySelector('.setItem').onclick = function(){
localStorage.setItem('username','admin')
localStorage.setItem('password','123456')
localStorage.setItem('gender','男')
localStorage.setItem('age',20)
}
//取数据: localStorage.getItem('属性名')
document.querySelector('.getItem').onclick = function(){
let a = localStorage.getItem('username')
console.log(a)
}
//删数据: localStorage.removeItem('属性名')
document.querySelector('.removeItem').onclick = function(){
localStorage.removeItem('gender')
}
//清空数据: localStorage.clear()
document.querySelector('.clear').onclick = function(){
localStorage.clear()
}
3.注意点 :
3.1 localStorage永久存储，数据存入硬盘中，一直存在
3.2 只能存储字符串类型数据，如果是其他类型，编译器会自动转成字符串存储
第二
1.sessionStorage : 会话存储 应用场景： 页面间传值
2.语法 :
存数据: sessionStorage.setItem('属性名',属性值)
取数据: sessionStorage.getItem('属性名')
删数据: sessionStorage.removeItem('属性名')
清空数据: sessionStorage.clear()
3.注意点 :
3.1 sessionStorage临时存储，数据存入内存中，只要页面关闭就会消失
3.2 只能存储字符串类型数据，如果是其他类型，编译器会自动转成字符串存储
(1)localStorage与sessionStorage的区别 :
相同点 : 作用一致,都是存储数据
不同点: 存储方式不同
localStorage : 硬盘存储
sessionStorage: 内存存储
(2)localStorage如何存储对象类型 : 使用JSON
案例演示
document.querySelector('.setItem').onclick = function(){
sessionStorage.setItem('username','admin')
sessionStorage.setItem('password','123456')
sessionStorage.setItem('gender','男')
sessionStorage.setItem('age',20)
}
//取数据: sessionStorage.getItem('属性名')
document.querySelector('.getItem').onclick = function(){
let a = sessionStorage.getItem('username')
console.log(a)
}
//删数据: sessionStorage.removeItem('属性名')
document.querySelector('.removeItem').onclick = function(){
sessionStorage.removeItem('gender')
}
//清空数据: sessionStorage.clear()
document.querySelector('.clear').onclick = function(){
sessionStorage.clear()
}
九、JSON格式
- JSON是什么 : JSON是一种数据格式,本质是字符串
- JSON作用 : 跨平台数据传输
开发中网页的数据都是从服务器获取，而服务器的编程语言有很多种。如: java、c++、c#、python、go、.net等等等。 而不同的编程语言由于编译器不同，数据类型不一样的。 后面人们为了解决这个不同平台编程语言不互通问题，就发明了一种通用数据格式：JSON - JSON语法 :
3.1 js->json(前端发给后台) : let json = JSON.stringify( js对象 )
3.2 json->js(后台发给前端) : let js = JSON.parse( json字符串 )
案例，解决localstorage无法储存对象的问题
document.querySelector('.btn1').onclick = function(){
// //(1)先js->json
// let json = JSON.stringify(obj)
// //(2)存json
// localStorage.setItem('user',json)
//简写一行 : 先转后存
localStorage.setItem('user', JSON.stringify(obj) )
}
//2.取对象
document.querySelector('.btn2').onclick = function(){
// //(1)取json
// let json = localStorage.getItem('user')
// //(2)后json->js
// let js = JSON.parse(json)
// console.log(js)
//简写一行 ： 先取后转
let js = JSON.parse( localStorage.getItem('user') )
console.log( js )
}
十、三大家族
三大家族 : 获取尺寸与位置
1.offset家族 : 获取元素 ‘自身’ 宽高和位置
offsetWidth/offsetHeight : 自身宽高 = width + padding + border
offsetLeft/offsetTop : 自身左/上 外边框 到定位父元素
2.scroll家族: 获取元素 ‘内容’ 宽高和位置
scrollWidth/scrollHeight : 内容宽高
scrollLeft/scrollTop : 滚动条滚动距离
3.client家族: 获取元素 ‘可视区域’ 宽高和位置
clientWidth/clientHeight : '可视区域'宽高
clientLeft/clientTop : '可视区域'位置（左边框和上边框宽度）
代码演示
//1.offset家族 : 获取元素 ‘自身’ 宽高和位置
console.log(box.offsetWidth, box.offsetHeight)// 150 + 10*2 + 10*2 = 190
console.log( box.offsetLeft,box.offsetTop )//100 100
//2.scroll家族 : 获取元素 ‘内容’ 宽高和位置
console.log(box.scrollWidth, box.scrollHeight)// 153 503
console.log( box.scrollLeft,box.scrollTop )//0 0
//3.client家族 : 获取元素 ‘内容’ 宽高和位置
console.log(box.clientWidth, box.clientHeight)// 150 + 10*2 + 10*2 = 190
console.log( box.clientLeft,box.clientTop )//10 10
获取网页滚动距离
1.页面滚动事件: window.onscroll
2.页面滚动距离: document.documentElement.scrollTop
给整个页面注册滚动条事件；ps给html注册哦
console.log('滚动条移动')
console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop)
}
scroll实战案例，（提示自己：三张图片）
1. 注册页面滚动事件 : 判断 页面滚动距离 与 top盒子高度 关系
(1)页面滚动高度 > top高度 : 设置nav为固定定位
(2)页面滚动高度 < top高度 : 设置nav为静态定位(标准流)
*/
let topPart = document.querySelector('.top')
let nav = document.querySelector('.nav')
let main = document.querySelector('.main')
//1.页面滚动条事件
window.onscroll = function(){
//2.获取页面滚动高度
let h = document.documentElement.scrollTop
//判断 页面滚动高度 > top高度
if( h >= topPart.offsetHeight ){
nav.style.position = 'fixed'
nav.style.top = '0px'
//固定定位会脱标，后面元素就会瞬间顶上去。 解决方案：给后面盒子margin撑开脱标的高度
main.style.marginTop = 10 + nav.offsetHeight + 'px'
}else{
nav.style.position = 'static'
//margin恢复原来的
main.style.marginTop = '10px'
}
}
横屏竖屏的监听案例
2.响应式布局设备 ：
大PC ： >= 1200px
小pc,大平板 ： 992px - 1200px
平板 ： 768px - 992px
手机 : < 768px
3.响应式布局原理
3.1 监听设备视口大小 ： 媒体查询、clientWidth
3.2 根据视口大小加载不同的样式
*/
//1.注册页面尺寸变化事件 : window.onresize
window.onresize = function(){
//2.获取页面可视区域（页面视口）
let w = document.documentElement.clientWidth
let h = document.documentElement.clientHeight
console.log(w,h)
if( w >= 1200 ){
document.body.style.backgroundColor = 'red'
}else if( w >= 992 ){
document.body.style.backgroundColor = 'orange'
}else if( w >= 768 ){
document.body.style.backgroundColor = 'yellow'
}else{
document.body.style.backgroundColor = 'green'
}
//横竖屏
if( w>h ){
//横屏
document.body.style.backgroundColor = 'cyan'
}else{
document.body.style.backgroundColor = 'purple'
}
}
