cookie
* cookie 只能在用服务器启动的页面中正常使用
* 解决: vscode 安装 Live Server
*
* 语法: document.cookie = 'key=value'
// 设置一条 cookie
// document.cookie = 'QQ=123456789'
// 设置多条 cookie
document.cookie = 'QQ=123456789'
document.cookie = 'pasword=987654321'
// 设置一条带有过期时间的 cookie
/**
* 不管你设置的是那个时区的时间, (我们是东八区)
*
* 它都会按照世界标准时间去设置
*
* 如果我们想要设置一个过期时间的话, 需要先往后调整8小时; 然后加上你需要的过期时间
*
*
* 比如: 我需要设置一条 30秒后过期的 cookie
* 1. 获取当前时间
* 2. 将当前时间往后调整 8 小时
* 3. 把调整后的时间 加上我们设置的过期时间
*/
var timer = new Date()
document.cookie = 'QQ=123456789;expires=' + timer
/**
* 比如: 我需要设置一条 30秒后过期的 cookie
* 1. 获取当前时间
* 2. 将当前时间往后调整 8 小时
* 3. 把调整后的时间 加上我们设置的过期时间
*/
var timer = new Date()
// timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
// document.cookie = 'VX=6666;expires=' + timer
// 获取 cookie
console.log(document.cookie)
1. cookie 与 storage 的区别? (熟读并背诵全文)
* * 出现时间
* cookie: 有 JS 的时候就有了
* storage: 有 H5 以后才有的
* * 存储大小
* cookie: 4kb
* storage: 20MB
* * 前后端交互(前端向后端发送请求)
* cookie: 交互时请求默认携带 cookie
* storage: 交互式请求不会携带, 除非前端人员配置传递
* * 前后端操作
* cookie: 不管前后端语言都可以操作
* storage: 只能有前端语言来操作 (JS)
* * 过期时间:
* cookie: 默认会话级, 页面关闭, 存储消失; 可以通过手动配置
* storage: 不能通过手动配置
*
* 2. localStorage 与 sessionStorage 的区别?
* * 过期时间:
* localStorage: 永久存储, 除非手动清理
* sessionStorage: 会话级别, 关闭页面, 存储就失效
1. 获取非常规 DOM(HTML head body)
// 1.1 HTML语法: document.documentElement
1.2 head 语法: document.head
1.3 body 语法: document.body
JS 在获取常规元素时与 CSS 一样, 可以通过 类名, 标签名, ID名
// 1.1 通过 类名 去获取 标签
var oBox = document.getElementsByClassName('box')
// console.log(oBox)
/**
* oBox 是一个伪数组, 想要获取到某一个元素, 可以通过下标
*
* 伪数组: 长得和数组类似, 有下标有length, 但是没有数组的常用方法
*
* 不管页面具有这个 类名的 元素 有多少个, 获取到的永远是 伪数组的形式
*/
// 1.2 通过 标签名 去获取标签
var oDiv = document.getElementsByTagName('div')
// console.log(oDiv)
// console.log(oDiv[0])
/**
* oDiv 也是一个伪数组, 想要获取到某一个元素, 可以通过下标
*/
// 1.3 通过 ID名 去获取标签
var oBox2 = document.getElementById('box2')
// console.log(oBox2)
/**
* 因为 ID 通常都是独一无二的
* 所以 这里获取到的就是一个具有 box2 ID 名的标签, 而不是一个伪数组
*/
// 2.1 按照选择器的形式 获取标签满足条件的第一个
var myDiv = document.querySelector('.box')
console.log(myDiv)
/**
* querySelector: 获取到满足条件的 第一个标签
*/
// 2.2 按照选择器的形式 后去所有满足条件的标签
var myDivAll = document.querySelectorAll('.box')
console.log(myDivAll)
/**
* querySelectorAll: 获取到满足条件的 所有标签
*/
// 操作元素的属性
/**
* innerHTML
* 赋值时 会识别 字符串中的 html结构
* 如果有实际的标签, 会把它当成标签渲染到页面上
* innerText
* 赋值时 不会识别 字符串中的 html 结构
* 如果有实际的标签, 会把它当成 字符串 渲染到页面上
*/
// 1. 获取元素
var oBox = document.getElementsByClassName('box')[0]
console.log(oBox)
// 2. 获取元素的某些属性
语法: 元素.getAttribute('要查询的属性名')
/ 3. 设置元素的某些属性
// 语法: 元素.setAttribute('要设置的属性名', '要设置的属性值')
// 4. 移出元素的某个属性
// 语法: 元素.removeAttribute('要移除的属性名')
09_H5自定义属性
H5 自定义属性中 data- 是固定的
* cs 是我实际的 属性名
* "123456789" 是我实际的 属性值
// 获取 H5 自定义属性
// 1. 获取语法: 元素.dataset.属性名
console.log(oDiv.dataset.cs)
// 2. 设置语法
oDiv.dataset.cs = 'qwertyuiop' // 标签中实际拥有; 做修改操作
oDiv.dataset.age = 18 // 标签中实际没有; 做新增操作
// 3. 删除
delete oDiv.dataset.age
