1.浏览器可视窗口大小
+ 获取浏览器可视窗口的大小
+ 语法:
=> window.innerWidth
=> window.innerHeight
+ 注意: 获取的是包含滚动条在内的尺寸(MAC 除外)
console.log('浏览器可视宽度 : ', window.innerWidth, innerWidth)
console.log('浏览器可视高度 : ', window.innerHeight, innerHeight)
2.浏览器的弹出层
1. 提示框
+ 语法: window.alert(提示文本内容)
+ 表现: 一个弹框 + 提示文本 + 确定按钮
+ 返回值: 没有
2. 确认框
+ 语法: window.confirm(提示文本内容)
+ 表现: 在 alert 的基础上 + 取消按钮
+ 返回值: 一个布尔值
=> 如果点击的是 确定, 就是 true
=> 如果点击的是 取消, 就是 false
3. 输入框
+ 语法: window.prompt(提示文本内容)
+ 表现: 在 confirm 的基础上 + 输入框
+ 返回值:
=> 如果你点击确定, 就是 输入的内容(必然是一个字符串类型)
=> 如果你点击取消, 就是 null
三个弹出层的共同点
+ 都会阻断浏览器页面渲染的继续执行
+ 都会阻断 WEBAPI 的工作
=> WEBAPI 的工作内容
-> 分析代码
// 1. 提示框
// var res = window.alert('你好 世界')
// console.log(res)
// 2. 确认框
// var res = window.confirm('你是好人吗 ?')
// console.log(res)
// 3. 输入框
// var res = window.prompt('你的银行卡密码是多少 ?')
// console.log(res)
// console.log(typeof res)
// setTimeout(function () { console.log(123) }, 5000)
// setTimeout(function () { console.log(200) }, 200)
// setTimeout(function () { console.log(100) }, 100)
3.浏览器的地址栏
+ 相对完整的地址
=> https://www.xhl.com:443/a/b/c/login.html?username=admin&password=123456#abc
=> http(s) 传输协议
=> www.xhl.com 域名, 对应处一个 ip 地址, 找到 互联网世界 上的某一台电脑
=> :443 端口号, http 传输协议默认对应 80, https 传输协议默认对应 443
=> /a/b/c/login.html 路径地址
=> ?username=admin&password=123456 查询字符串, 你访问当前文件的时候, 携带给当前文件的信息
=> #abc 哈希值(hash) 锚点, 进行网页定位使用
+ 就是获取浏览器地址栏内的所有信息
+ window 下有一个对象叫做 location
=> 里面存储的就是当前地址栏所有的相关信息
=> {
hash: "#aaa"
host: "www.baidu.com:443"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?a=100&b=200#aaa"
origin: "https://www.baidu.com:443"
pathname: "/index.html"
port: "443"
protocol: "https:"
search: "?a=100&b=200"
}
1. href
+ 是一个读写的属性
=> 读: 获取当前页面的完整地址
-> 语法: window.location.href
=> 写: 设置当前页面的浏览器地址
-> 语法: window.location.href = '值'
2. reload()
+ 是一个方法
+ 作用: 重新加载当前页面
+ 语法: window.location.reload()
+ 注意: 不要书写在打开页面就能执行的位置
// 1-1. href 获取
// console.log(window.location.href)
// 1-2. href 设置
// btn.onclick = function () {
// window.location.href = 'https://www.baidu.com'
// }
// 2. reload()
// window.location.reload()
// btn.onclick = function () {
// window.location.reload()
// }
4.浏览器的标签页
1. 打开新的标签页
+ 语法: window.open(地址)
+ 作用: 打开新的标签页, 开启地址
2. 关闭当前标签页
+ 语法: window.close()
+ 作用: 关闭当前标签页
on.onclick = function () {
// 1. 开启新的标签页
window.open('https://www.baidu.com')
}
off.onclick = function () {
// 2. 关闭标签页
window.close('https://www.baidu.com')
}
5.览器卷去的尺寸(浏览器滚动条定位)
卷去的高度
+ 语法:
=> document.documentElement.scrollTop
-> 有 DOCTYPE 标签的时候, 能获取到尺寸
=> document.body.scrollTop
-> 没有 DOCTYPE 标签的时候, 能获取到尺寸
+ 兼容
=> 使用 || 的短路运算
=> var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
卷去的宽度
+ 语法:
=> document.documentElement.scrollLeft
-> 有 DOCTYPE 标签的时候, 能获取到尺寸
=> document.body.scrollLeft
-> 没有 DOCTYPE 标签的时候, 能获取到尺寸
+ 兼容
=> 使用 || 的短路运算
=> var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
*/
// 1. 浏览器卷去的高度
// console.log('卷去的高度 : ', document.documentElement.scrollTop)
// console.log('卷去的高度 : ', document.body.scrollTop)
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// console.log(scrollTop)
// 2. 浏览器卷去的宽度
// console.log('卷去的宽度 : ', document.documentElement.scrollLeft)
// console.log('卷去的宽度 : ', document.body.scrollLeft)
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
console.log(scrollLeft)
6.浏览器的常见事件
<!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>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
<script>
// 在这里加载代码的时候, 下面的 html 结构还没有加载呢
// console.log(btn)
// window.onload = function () {
// // 这里的代码执行的时候, 是页面的所有资源加载完毕
// // 就包括后面的 html 结构加载完毕以后, 才会执行这个代码
// console.log(btn)
// }
</script>
</head>
<body>
<!-- <img src="https://img0.baidu.com/it/u=2346456477,2040645892&fm=26&fmt=auto" alt="">
<img src="https://img0.baidu.com/it/u=2948795774,2180825126&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
<img src="https://img1.baidu.com/it/u=2895143935,2518194020&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""> -->
<button id="btn">按钮</button>
<script>
/*
浏览器的常见事件
1. load
=> 加载事件
=> 时机: 当页面所有外部资源(html, css, js, 图片, 视音频等) 全部加载完毕后触发
=> 一般:
-> 当你把 js 代码书写在 head 标签内的时候, 并且操作了页面元素
-> 需要加一个 window.onload 事件
=> 注意:
-> 因为这种 on 的形式绑定的事件, 只能绑定一个事件处理函数
-> 如果你写了两个事件处理函数, 那么只能执行后面一个
2. resize
=> 尺寸改变事件
=> 时机: 当页面可视窗口尺寸改变的时候, 触发, 随时改变随时触发
3. scroll
=> 滚动事件
=> 时机: 当页面滚动条滚动的时候触发, 随时改变随时触发
*/
// 1. load
// window.onload = function () {
// console.log('页面全部加载完毕了')
// }
// 2. resize
// window.onresize = function () {
// console.log('尺寸改变了')
// if (window.innerWidth >= 768) {
// alert('竖屏体验更佳 ^_^')
// }
// }
// 3. scroll
window.onscroll = function () {
// console.log('滚')
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
}
</script>
</body>
</html>
7.浏览器滚动到
<!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>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 3000px;
height: 3000px;
}
#btn {
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<button id="btn">滚</button>
<script>
/*
浏览器滚动到
+ 语法: window.scrollTo()
+ 两种参数方式
+ 第一种: 传递数字
=> window.scrollTo(x, y)
-> x 表示横向位置
-> y 表示纵向位置
=> 注意: 必须传递两个参数, 一个报错
=> 特点: 只能瞬间定位, 不能平滑滚动
+ 第二种: 传递对象
=> window.scrollTo({
top: yyy,
left: xxx,
behavior: 'smooth'
})
=> 默认是瞬间定位, 需要一个 key 叫做 behavior 来决定是平滑滚动
*/
btn.onclick = function () {
// 1. 传递数字
// window.scrollTo(100, 1560)
// 2. 传递对象
window.scrollTo({
top: 100,
left: 982,
behavior: 'smooth'
})
}
</script>
</body>
</html>
8.浏览器的本地存储
+ 浏览器本地存储的数据分成几种
1. cookie
2. localStorage
3. sessionStorage
cookie
存储特点
1. cookie 是按照域名存储的
=> 本地打开的页面是无法存储 cookie 的必须在服务器打开
=> 哪一个域名存储的 cookie 哪一个域名使用
2. cookie 的存储大小
=> 4KB 左右
=> 50条 左右
3. cookie 的存储都是字符串, 有自己的固定格式
=> 'key=value; key2=value2; key3=value3'
4. cookie 的存储是有时效性的
=> 默认时效性是 会话级别
=> 我们可以手动设置过期时间
5. cookie 的通讯相关
=> 在前后端交互的时候
=> 会在每一次和后端的 "对话" 中自动携带 cookie
6. 操作权限
=> 前后端都可以操作 cookie
操作语法:
+ document.cookie
服务器打开
+ 借助 vscode 启动临时服务器打开页面
+ 下载一个插件 live server
+ 打开页面的时候
=> 点击 open with live server
设置一条基本的 cookie
+ 语法: document.cookie = 'key=value'
+ 注意: 一次只能设置一条, 设置的默认就是 会话级别 的时效性
*
// 设置了一条叫做 a 的 cookie, 值是 100
// document.cookie = 'a=100'
设置一条带有过期时间 cookie
+ 语法: document.cookie = 'key=value;expires=' + 时间对象
cookie 采用的时间规范
+ 不管你给他的是什么时间节点, 他都当做世界标准时间使用
+ 我们给到的是 11:35, cookie 会把 11:35 当做世界标准时间使用
+ 该条 cookie 会在世界标准时间 11:35 分过期
+ 因为我们时区的问题, 世界标准时间的 11:35 分, 就是我们的 19:35 分
+ 该条 cookie 会在今天晚上 19:35 分过期被自动删除
设置一个 30s 以后过期的 cookie
+ 拿到当前时间, 减去 8 个小时
+ 在向后推进 30s
*/
// var time = new Date('2022-3-2 11:35:30')
// document.cookie = 'a=100;expires=' + time
// 1. 拿到当前时间
// var time = new Date()
// 2. 转换成时间戳 - 8个小时的毫秒数
// var r1 = time.getTime()
// var r2 = r1 - 1000 * 60 * 60 * 8 + 1000 * 30
// 3. 使用调整好的时间戳直接定位时间节点
// time.setTime(r2)
// console.log(time)
// document.cookie = 'a=100;expires=' + time
// 封装设置 cookie
// 讨论: 几个参数 ? 分别是什么 ?
// 第一个: key
// 第二个: value
// 第三个: 过期时间
// 过期时间应该用一个什么数据类型 ?
// 给一个数值类型
// function setCookie(key, value, expires) {
// // 1. 判断 expires 参数是否传递了
// if (!expires) {
// // 直接设置
// document.cookie = key + '=' + value
// return
// }
// // 代码能执行到这里, 说明 expires 有值
// // 2. 设置时间对象
// var time = new Date()
// time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)
// // 设置 cookie
// document.cookie = `${ key }=${ value };expires=${ time }`
// }
function setCookie(key, value, expires) {
// 1. 判断 expires 参数是否传递了
if (expires) {
// 2. 设置时间对象
var time = new Date()
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * expires)
}
document.cookie = `${ key }=${ value };expires=${ time }`
}
// 将来我们使用的时候
setCookie('a', 100, 30)
setCookie('b', 200, 30)
/*
获取 cookie
+ 语法: document.cookie
*/
console.log(document.cookie)
// 封装获取 cookie
getCookie()
function getCookie() {
// 1. 拿到 cookie
var cookie = document.cookie
// 2. 按照 ';' 切割成数组以后遍历
var obj = {}
cookie.split('; ').forEach(function (item) {
// 在循环内 item 就是每一条 cookie
// 3. 对 item 进行再次切割
var t = item.split('=')
// 4. 插入对象
obj[ t[0] ] = t[1]
})
// 5. 把 obj 当做返回值
return obj
}
var res = getCookie()
console.log(res)
delCookie('a')
浏览器的本地存储 - storage
存储特点
1. 前后端操作
=> 只能由前端操作
=> 任何后端语言不能操作
2. 存储位置
=> 浏览器本身
3. 通讯相关
=> 不能自动携带
4. 存储大小
=> 20M 左右
5. 时效性是不可设置的
=> localStroage 是永久存储
=> sessionStorage 是会话存储
6. 存储格式
=> 按照键值对存储, 但是只能存储字符串类型的数据
=> 如果你存储的是其他类型的数据, 会自动帮你转换成字符串存储
7. 操作 API
=> 一套自己完整的操作语法
面试题
+ 解释一下 cookie localStorage sessionStorage session 的区别
+ session 是一个后端的存储空间
+ cookie / localStorage / sessionStorage 的区别
1. 存储大小
=> cookie: 4KB 左右
=> stroage: 20M 左右
2. 通讯相关
=> cookie: 随请求自动携带
=> storage: 不会自动携带
3. 操作相关
=> cookie: 操作复杂, 没有 api, 前后端都可以操作
=> storage: 操作简单, 有 api, 只能前端操作
4. 存储格式
=> cookie: 字符串格式
=> storage: 键值对
5. 时效相关
=> cookie: 默认是会话级别, 可以手动设置
=> storage: localStorage 就是永久, sessionStorage 就是会话, 不可更改
+ localStorage 和 sessionStorage 的区别
1. 跨页面通讯能力
=> lcoalStorage 随便跨页面
=> sessionStorage 只能是本页面跳转可以通讯
2. 时效性
=> localStorage 就是永久
=> sessionStorage 就是会话
+ localStorage 和 sessionStorage 的共同点
=> 不能存储其他数据类型, 只能存储字符串类型数据
=> 如果一定要存储其他数据类型, 转换成 json 格式存储
*/
var obj = { name: "jack" }
var obj2 = { name: 'rose' }
localStorage
// 1. 设置
// 语法: window.lcoalStorage.setItem(key, value)
// window.localStorage.setItem('a', 100)
// window.localStorage.setItem('b', 200)
// window.localStorage.setItem('c', 300)
// 2. 删除
// 语法: window.localStorage.removeItem(key)
// window.localStorage.removeItem('a')
// 3. 获取
// 语法: window.lcoalStorage.getItem(key)
// 得到: 如果有这个 key, 那么就是对应的值, 如果没有这个 key, 那么就是 null
// console.log(window.localStorage.getItem('a'))
// console.log(window.localStorage.getItem('b'))
// 4. 清除(清空)
// 语法: window.localStorage.clear()
// window.localStorage.clear()
sessionStorage
+ 跨页面通讯能力
+ 只有当前页面跳转的才可已使用(在一个标签卡里面可以使用)
// 1. 设置
// 语法: window.sessionStorage.setItem(key, value)
window.sessionStorage.setItem('a', JSON.stringify(obj))
window.sessionStorage.setItem('b', obj2)
// window.sessionStorage.setItem('c', 100)
// 2. 删除
// 语法: window.sessionStorage.removeItem()
// window.sessionStorage.removeItem('a')
// 3. 获取
// 语法: window.sessionStorage.getItem(key)
console.log(window.sessionStorage.getItem('a'))
console.log(window.sessionStorage.getItem('b'))
// 4. 清除
// 语法: window.sessionStorage.clear()
// window.sessionStorage.clear()
浏览器的历史记录
+ 在 window 下有一个叫做 history 的对象
+ 内部存放的就是历史记录相关操作的方法
1. back
+ 语法: window.history.back()
+ 作用: 就是历史回退, 等价于浏览器的 ← 按钮
2. forward()
+ 语法: window.history.forward()
+ 作用: 就是历史回退, 等价于浏览器的 → 按钮
3. go()
+ 语法: window.history.go(数字)
=> 正整数: 表示历史前进
=> 零: 表示从新打开当前页面
=> 负整数: 表示历史回退