2022-05-05

window对象

window对象（浏览器的内置的全局对象）也叫顶级对象
全局指的是可以在任何位置来使用window对象

延迟函数

// 开启延时器语法：setTimeout ( function(){}, 延时时间)
// 作用：将函数延时一段时间来执行

// 关闭延时器：clearTimeout(timerId)
// timerId 设置延时器的id ==> 开启延时器的返回值

js执行机制

同步任务：有阻塞问题（for循环时会出现）
异步任务：1. 注册事件； 2. 延时器、定时器；3. 后面ajax

    // 经典面试题

    // 输出结果是？？？1111 3333 2222
    console.log(1111)
    setTimeout(function () {
        console.log(2222)
    }, 1000)
    console.log(3333)

   修改之后的输出结果？？？1111 3333 2222
   console.log(1111)
   setTimeout(function () {
        console.log(2222)
    }, 0)
   console.log(3333)

   let num = 10
    // 异步任务
    setTimeout(function () {
        num = 20
    }, 0)

    console.log(num) // ? 10

location对象

href属性：

获取href属性值，得到完整url地址
console.log(location.href);
设置href属性值，进行页面跳转
location.href = 'http://www.jd.com'

location其他属性方法

search 属性获取查询字符串（符号？后面部分）
hash 属性获取哈希值（符号 # 后面部分）
reload 方法刷新页面

自动检测移动端并跳转

检测 userAgent
验证是否为Android或iPhone

    // 检测 userAgent（浏览器信息）
    (function () {
        const userAgent = navigator.userAgent
        // 验证是否为Android或iPhone
        const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
        const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
        if (android || iphone) {
            // 如果是Android或iPhone，则跳转至移动站点
            location.href = 'http://www.jd.com'
        }
    })()

history对象

back() 后退一个历史记录
forward() 前进一个历史记录

history.go(1)//前进一个历史记录 ==> history.forward()
history.go(3) //前进3个历史记录
history.go(-1)//后退一个历史记录 ==> history.back()
history.go(0) //刷新页面

    let qianjin = document.querySelector('.forward')
    let houtui = document.querySelector('.back')

    // 前进一个历史记录
    qianjin.addEventListener('click', function () {
        history.forward()
    })

    // 后退一个历史记录
    houtui.addEventListener('click', function () {
        history.back()
    })

本地存储

存储数据：
// 语法： localStorage.setItem('键', '值')

获取数据
// 语法： localStorage.getItem('键')

删除数据
// 语法： localStorage.removeItem('键')

    // 演示存：
    localStorage.setItem('uname','xm')
    localStorage.setItem('age','19')

    // 演示取：
    console.log(localStorage.getItem('uname'));
    console.log(localStorage.getItem('age'));

    // 演示删除：
    localStorage.removeItem('age')

本地储存-复杂数据类型

本地存储只适合存字符串，不能直接将复杂数据类型进行本地存储

存：

先把复杂数据进行转换成JSON字符串,==> JSON.stringify()
之后本地存储JSON字符串,==> localStorage.setItem('data', JSON.stringify(复杂数据))

取：

先取出本地存储的JSON字符串
在将JSON字符串解析成JS的复杂数据
console.log(JSON.parse(localStorage.getItem('')));

自定义属性

固有属性：标签自带的属性（比如：title src ）
自定义属性:程序员自定义的属性（作用：清除标签自带的提示）

自定义属性规范推荐的做法
// 说明：建议使用data-* 来表示自定义属性
// 在JS操作的时候，通过 dataset来进行操作