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属性 :

  1. 获取href属性值,得到完整url地址
    console.log(location.href);

  2. 设置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')

本地储存-复杂数据类型

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

存:

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

取:

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

自定义属性

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容