BOM操作浏览器

window

BOM(浏览器对象模型)

• Browser Object Model
• window是浏览器内置的全局对象
• document是实现dom的基础,依附于window属性 可省略
  

延时器和定时器

• setTimeout
• 仅仅只执行一次 延迟执行
• 清除clearTimeout(延时器名称)
• 递归函数是自己调用自己

       let btn = document.querySelector('button')
        //只执行一次
        let times = setTimeout(function () {
            console.log('111');
        }, 3000)
        //暂停
        btn.addEventListener('click', function () {
            clearTimeout(times)
        })

• 可利用递归 使setTimeout与setInterval一样的效果
  

location对象

href属性

• 获取完整的url地址
• location.href可以更改

search属性

• 获取地址中携带的参数，符号 ？后面部分
• location.search

hash属性

• 获取地址中的哈希值，符号 # 后面部分
• location.hash
• 经常用于不刷新页面 来显示不同的页面

reload属性

• 刷新当前页面 传入参数true为强制刷新
• location.reload(true)

navigator对象

• 通过 userAgent 检测浏览器的版本及平台

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

history对象

back

• 后退

forward

• 前进

go(参数)

• 前进后退

        let up = document.querySelector(".up")
        let back = document.querySelector(".back")
        up.addEventListener('click', function () {
            // history.forward()
            history.go(1)
        })
        back.addEventListener('click', function () {
            // history.back()
            history.go(-1)

        })

js执行机制

• js是单线程语言(同一时间只能做一件事)
• 前一个任务结束,后一个任务才可以开始执行

同步

• 前一个任务结束后,再执行下一个任务
• 程序的执行顺序与任务的排列顺序一致

异步

• 同步异步本质区别:这条流水线上的各个流程执行顺序不同

同步任务

• 同步任务都在主线程上执行,形成一个执行栈

异步任务

• 普通事件 click resize
• 资源加载 load error
• 定时器setTimeout setInterval
• 异步任务添加到任务队列中(消息队列)

js执行机制

• 1.先执行执行栈中的同步任务
• 2.异步任务放入任务队列中
• 3.执行栈中同步任务执行完毕,系统按顺序读取任务队列中的异步任务,异步任务进入执行栈,开始执行
  

事件循环(event loop)

• 主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）
  

swiper插件

• 插件官网地址 [swiper插件官网](https://www.swiper.com.cn/)
• 多个swiper同时使用的时候, 类名需要注意区分

本地存储

• 数据存储在用户浏览器中
• 设置、读取方便、甚至页面刷新不丢失数据

localStorage

• 生命周期永久生效 除非手动删除 关闭页面也存在
• 可以同一浏览器多页面(窗口)共享
• 以键值对的形式存储使用

存储数据

• localStorage.setItem(key, value)

获取数据

• localStorage.getItem(key)

删除数据

• localStorage.removeItem(key)

        //储存数据 localStorage.setItem("键","值") 
        localStorage.setItem("uname", '一只傻狗子')
        localStorage.setItem("age", 18)

        //获得数据
        console.log('获得数据', localStorage.getItem('uname'));
        //删除数据
        // localStorage.removeItem('uname')
        console.log(localStorage.getItem('uname'));

存储复杂数据类型

• JSON.stringify 复杂数据转成JSON字符串 (存)
• JSON.parse JSON字符串转成对象 (取)

       //1. 存储复杂数据类型(引用数据类型)
        let obj = {
            uname: '测试',
            age: 18,
            address: '山东'
        }
        //转成JSON字符串 存储本地存储中
        //复杂数据类型一定要先转成JSON字符串在进行存储
        localStorage.setItem('obj', JSON.stringify(obj))

        //2.取数据 JSON.parse 取出时候用  将字符串转换成对象
        console.log('取数据11', JSON.parse(localStorage.getItem('obj')));

sessionStorage(了解)

自定义属性

固有属性

• 标签自带的属性 如class id title

自定义属性

获取自定义属性

• getAttribute('属性名')

设置自定义属性

• setAttribute('属性名', '属性值')

删除自定义属性

• removeAttribute('属性名')

       let div = document.querySelector('.boxx')
        //设置自定义属性
        div.setAttribute('myid', 10)
        console.log('div', div);
        //得到自定义属性
        console.log('得到自定义的属性', div.getAttribute('myid'));
        //移除自定义属性
        div.removeAttribute('myid')

data-自定义属性

• data-开头
• 一律以dataset对象方式获取

     <!-- data-XX   自定义属性名 -->
    <div class="boxx" data-idx="0" data-name="GG"></div>
     //得到自定义属性的对象  dataset
        console.log('data-', div.dataset);