一、认识BOM
浏览器对象模型
可以理解为：浏览器给我们提供的一系列方法
1.可以打开一个浏览器弹出框 .alert()
2.记录当前窗口大小
3.操作页面跳转
....
二、获取浏览器窗口的尺寸
JS的全局作用域 有一个window对象，我们BOM的方法都在它里面。
使用的时候 语法window.XXX 但是window可以忽略不写。
console.log(window);
console.log(window.innerWidth);
console.log(window.innerHeight);
三、浏览器的弹出框
浏览器的弹出层(confirm/alert/prompt)
confirm 返回布尔值
四、浏览器的地址信息
window有一个location内部记录了浏览器的地址信息
location内部有一个href属性，可以获取当前浏览器的地址，也可以给它赋值的新地址 实现页面跳转
在控制台中输入location 可以看到很多location的属性
setTimeout( function(){
window.location.href = 'http://www.baidu.com';
} , 3000 )
五、浏览器的刷新功能
window对象内部有一个location 它的内部有一个reload方法
这个方法就是刷新
// 不可以在这里直接刷新 否则打开浏览器就会一直刷新
// window.location.reload();
// 设定一个定时器 多少时间后开始刷新
var count = 0;
setInterval(function () {
count++;
console.log(count);
if (count === 5) {
window.location.reload();
}
}, 1000)
六、浏览器的历史记录
浏览器的历史记录(模拟在上角的回退与前进)
window内部有一个history 内部有方法能够让我们能实现浏览器的 前进回退功能
window.history.back() 回退
window.history.forword() 前进(必须现在有过一次回退 才会使用前进)
在控制台中去进行
七、浏览器的版本信息
浏览器的版本信息(了解)
开发的时候不用 面试官也不问
window 对象中的 navigator 对象可以查看相关信息
八、浏览器的onload事件
onload事件 等到页面的所有资源加载完毕后再执行
浏览器的图片加载是异步的
// 在本地会加载得特别快
window.onload = function(){
console.log(111);
}
九、浏览器的滚动事件
浏览器的onscrol事件 其实就是浏览器的滚动事件 浏览器页面滚动的时候会触发
<!DOCTYPE html>有这个声明
document.documentElement.scrollTop 有效 用得更多
<!DOCTYPE html>无这个声明
document.body.scrollTop 有效
但是现在都声明了<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width:40000px;
height: 4000px;
}
</style>
</head>
<body>
<script>
window.onscroll = function () {
console.log('页面滚动了');
console.log('document.body.scrollTop:', document.body.scrollTop);
console.log('document.documentElement.scrollTop:' , document.documentElement.scrollTop);
console.log('document.body.scrollLeft:', document.body.scrollLeft);
console.log('document.documentElement.scrollLeft:' , document.documentElement.scrollLeft);
}
</script>
</body>
</html>
十、浏览器的本地存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
本地存储(面试必问)
1.localStorage
浏览器的本地存储(永久存储),打开浏览器存储上之后，关闭浏览器，信息依然存在里面不会删除
存储语法： window.localStorage.setItem(key , value); 新增数据
window.localStorage.removeItem(key); 删除数据
window.localStorage.clear(); 清除数据
window.localStorage.getItem(key); 获取数据
value必须为字符串
删除一次性只能删除一个
2.sessionStorage
临时存储
特点：页面关闭 直接清楚数据
value必须是字符串
存储语法： window.sessionStorage.setItem(key ,value); 新增数据
window.sessionStorage.getItem(key); 获取数据
window.sessionStorage.removeItem(key); 删除数据
window.sessionStorage.clear(); 清除数据
*/
// localStorage的四个语法
// 新增
var res1 = window.localStorage.setItem('name1' , '羽生');
var res2 = window.localStorage.setItem('name2' , '结弦');
var res3 = window.localStorage.setItem('name3' , '柚子');
var res4 = window.localStorage.setItem('name4' , '噗噗');
// 获取
console.log(window.localStorage.getItem('name1'));
// 删除
window.localStorage.removeItem('name1');
// 清除
window.localStorage.clear();
// sessionStorage
// 新增
var res1 = window.sessionStorage.setItem('name1' , '羽生');
var res2 = window.sessionStorage.setItem('name2' , '结弦');
var res3 = window.sessionStorage.setItem('name3' , '柚子');
var res4 = window.sessionStorage.setItem('name4' , '噗噗');
// 获取
console.log(window.sessionStorage.getItem('name1'));
// 删除
window.sessionStorage.removeItem('name1');
// 清除
window.sessionStorage.clear();
// 存储对象
var obj ={
name:'羽生',
age:28,
sex:'男',
}
// 先把对象obj以JSON字符串的形式存储到localStorage中
window.localStorage.setItem('obj' , JSON.stringify(obj)) ;
// 在将JSON字符串转化成数组类型 在控制台输出
var newObj = JSON.parse( window.localStorage.getItem('obj') );
console.log(newObj);
</script>
</body>
</html>
