文章目录
一、Window对象
1. window对象 : 浏览器窗口
-
window对象三个特点
(1)window是js中的顶级对象。 所有的全局函数、全局变量都是window对象的成员(属性+成员) (2)只要是window对象中的成员，使用时都可以省略window (3)window对象中有一个属性叫做top, 不可以作为变量名 -
window对象
- 打开窗口 : window.open()
- 关闭窗口 : window.close()
-
window对象两个事件
(1)window.onload : DOM树 + 外部资源路径 加载完毕后执行 (2)window.onbeforeunload : 页面关闭之前执行
//(1)window.onload : DOM树 + 外部资源路径 加载完毕后执行
window.addEventListener('load', function () {
let box = document.querySelector('.box')
console.log(box)
console.log(box.scrollWidth, box.scrollHeight)
})
//(2)window.onbeforeunload : 页面关闭之前执行
window.addEventListener('beforeunload',function(){
console.log('页面关闭之前')
//可以存储一些数据
})
2. location : 网页地址栏
-
location三个方法 ：
1. location.assign('url') : 跳转网页 等价写法: location.href = 'url' 2. location.replace('url') : 替换网页 (无法返回) 3. location.reload() : 刷新网页 (一般用于移动端)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="assign">assign跳转网页</button>
<button class="replace">replace替换网页</button>
<button class="reload">reload刷新网页</button>
<script>
/*
location : 网页地址栏
location三个方法 ：
1. location.assign('url') : 跳转网页
等价写法: location.href = 'url'
2. location.replace('url') : 替换网页 (无法返回)
3. location.reload() : 刷新网页 (一般用于移动端)
*/
console.log( window.location )
//1. href属性: 完整的url网址
//作用：实现页面跳转
// location.href = 'http://www.baidu.com'
//2 hostname: 主机名/域名/ip
// location.assign() : 跳转网页
document.querySelector('.assign').addEventListener('click',function(){
// assign()方法和 location.href 完全等价
location.assign('http://www.baidu.com')
})
// location.replace() : 替换网页
document.querySelector('.replace').addEventListener('click',function(){
// 替换无法返回上一页
location.replace('http://www.baidu.com')
})
// location.reload() : 刷新网页
document.querySelector('.reload').addEventListener('click',function(){
//刷新
location.reload()
})
</script>
</body>
</html>
3.history对象: 历史记录
-
history对象三个方法:
history.back() : 返回上一页 history.forward() : 前进下一页 history.go() : 跳转指定历史记录 0 : 刷新 负数: 返回 -1返回一页 -2返回两页 正数: 前进 1前进一页 2前进两页
4.navigator对象 : 浏览器信息
作用：收集用户数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
navigator对象 : 浏览器信息
作用：收集用户数据
*/
console.log( window.navigator )
console.log( navigator.userAgent )//获取 操作系统 浏览器版本
</script>
</body>
</html>
5.screen对象
screen对象 : 获取用户电脑屏幕大小
一般用于游戏
二、定时器
setInterval 与 setTimeout区别
1.定时器 : 一段代码 间隔时间执行
2.定时器语法 :
-
setInterval() : 永久定时器. 一旦开启永久重复执行，只能手动清除
开启: let timeID = setInterval( function(){} , 时间间隔 ) 清除: clearInterval( timeID ) -
setTimeout() : 一次定时器。 间隔时间内只会执行一次，完毕后自动清除
开启: let timeID = setTimeout( function(){} , 时间间隔 ) 清除: clearTimeout( timeID )
二、存储对象
1.localStorage作用 : 本地存储
经典场景: 免登录
2.localStorage语法 :
2.1 存数据: localStorage.setItem('属性名',属性值)
2.2 取数据: localStorage.getItem('属性名')
有返回值
2.3 删数据: localStorage.removeItem('属性名')
2.4 清空数据 : localStorage.clear()
3.localStorage注意点 :
(1) 永久存储,只要不手动清除。一直存在
(2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="btn1">存数据</button>
<button class="btn2">取数据</button>
<button class="btn3">删数据</button>
<button class="btn4">清空数据</button>
<script>
/*
1.localStorage作用 : 本地存储
经典场景: 免登录
2.localStorage语法 :
2.1 存数据: localStorage.setItem('属性名',属性值)
2.2 取数据: localStorage.getItem('属性名')
有返回值
2.3 删数据: localStorage.removeItem('属性名')
2.4 清空数据 : localStorage.clear()
3.localStorage注意点 :
(1) 永久存储,只要不手动清除。一直存在
(2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储
必问面试题 : localStorage与sessionStorage区别
*/
//存数据: localStorage.setItem('属性名',属性值)
document.querySelector('.btn1').addEventListener('click', function () {
localStorage.setItem('username', 'admin')
localStorage.setItem('password', '654321')
localStorage.setItem('sex', '男')
localStorage.setItem('age', 20 )
})
//取数据: localStorage.getItem('属性名')
document.querySelector('.btn2').addEventListener('click', function () {
let username = localStorage.getItem('username')
console.log(username)
})
//删数据: localStorage.removeItem('属性名')
document.querySelector('.btn3').addEventListener('click', function () {
localStorage.removeItem('sex')
})
//清空数据 : localStorage.clear()
document.querySelector('.btn4').addEventListener('click', function () {
localStorage.clear()
})
</script>
</body>
</html>
2.sessionStorage作用 : 临时存储
经典场景: 页面传值(移动端)
2.sessionStorage语法 :
2.1 存数据: sessionStorage.setItem('属性名',属性值)
2.2 取数据: sessionStorage.getItem('属性名')
有返回值
2.3 删数据: sessionStorage.removeItem('属性名')
2.4 清空数据 : sessionStorage.clear()
3.sessionStorage注意点 :
(1) 临时存储,只要页面关闭，就会自动清除
(2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储
必问面试题 : localStorage与sessionStorage异同点
相同点: 功能相同,都是存储数据
(1)功能相同,都是存储数据
(2)都有大小限制,一般浏览器上限是5MB
不同点: 存储方式不同
(1)localStorage : 硬盘存储
(2)sessionStorage: 内存存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="btn1">存数据</button>
<button class="btn2">取数据</button>
<button class="btn3">删数据</button>
<button class="btn4">清空数据</button>
<script>
/*
1.sessionStorage作用 : 临时存储
经典场景: 页面传值(移动端)
2.sessionStorage语法 :
2.1 存数据: sessionStorage.setItem('属性名',属性值)
2.2 取数据: sessionStorage.getItem('属性名')
有返回值
2.3 删数据: sessionStorage.removeItem('属性名')
2.4 清空数据 : sessionStorage.clear()
3.sessionStorage注意点 :
(1) 临时存储,只要页面关闭，就会自动清除
(2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储
必问面试题 : localStorage与sessionStorage异同点
相同点: 功能相同,都是存储数据
(1)功能相同,都是存储数据
(2)都有大小限制,一般浏览器上限是5MB
不同点: 存储方式不同
(1)localStorage : 硬盘存储
(2)sessionStorage: 内存存储
localStorage如何存储对象类型数据? : json存储
*/
//存数据: sessionStorage.setItem('属性名',属性值)
document.querySelector('.btn1').addEventListener('click', function () {
sessionStorage.setItem('username', 'admin')
sessionStorage.setItem('password', '654321')
sessionStorage.setItem('sex', '男')
sessionStorage.setItem('age', 20 )
})
//取数据: sessionStorage.getItem('属性名')
document.querySelector('.btn2').addEventListener('click', function () {
let username = sessionStorage.getItem('username')
console.log(username)
})
//删数据: sessionStorage.removeItem('属性名')
document.querySelector('.btn3').addEventListener('click', function () {
sessionStorage.removeItem('sex')
})
//清空数据 : sessionStorage.clear()
document.querySelector('.btn4').addEventListener('click', function () {
sessionStorage.clear()
})
</script>
</body>
</html>
总结
