BOM 操作浏览器

一、window对象

​

1.BOM（浏览器对象模型）

​ 本质：

​ window是浏览器内置的全局对象，我们学习所有API的知识内容都是基于window对象实现的

​ window对象下包含了navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）

​ 理解：可以把window当做是地球，然后五个超级大国。

2.定时器-延时函数

​ 本质：把一段代码延迟执行

​ 作用：例如广告关闭等

​ 语法：

​ 1.创建延时函数：setTimeout(回调函数，等待的毫秒数)

​ 2.清除延时函数：给延时函数一个变量名timer，clearTimeout(timer)

5秒后广告消失案例

<script>
        setTimeout(function(){
            document.querySelector(`div`).style.display = `none`
        },5000)
</script>

3.递归（提前认知）

​ 本质：一个函数，自己调用自己

​ 使用场景：

1.有一个函数 可以打印出 一个Dom元素所有祖先元素

​ 2.假设你得了传染病，先找你 再找邻居，然后一直找找到没有为止

用延时器实现定时器效果—递归法

<script>
        // 定时器 不会主动清除 除非加清除
        // 延时器 只会执行一次

        // 实现 ： 在延时器内加延时器


        let num = 0
        function func() {
            console.log(++num);
            setTimeout(func,1000)
        }
        func()
</script>

4.location对象

​ 本质：也是一个对象，拆分保存URL地址各个组成部分

常用的属性和方法：

​ 1.href 属性 获取完整的URL地址，对其赋值时用于地址跳转

<script>
        let btn = document.querySelector(`button`)

        btn.addEventListener(`click`,function(){
           location.href = `https://www.baidu.com/`//跳转到网页
           
           location.href = location.href // 刷新页面 自己跳转自己
        })
    
    // 利用延时器 3秒后自动跳转
   		setTimeout(function(){
            location.href = `https://www.baidu.com/`
        },3000)
    </script>

​ 2.search 属性 获取地址中携带的参数，符号？后面的部分（后一个阶段开用）

​ 3.hash 属性 获取地址中的哈希值，符号#后面部分（VUE阶段开用）

​ 4.reload 方法 用来刷新当前页面，传入参数true表示强制刷新

​ 区别与location href 更加优雅，和语义化

<script>
        let btn = document.querySelector(`button`)

        btn.addEventListener(`click`,function(){
            console.log(location.search); // 获取符号？后面部分
            console.log(location.hash);//获取符号# 后面部分 
            location.reload(true) // 是一个方法 强制刷新 比href优雅 语义化
        })
</script>

5.navigator对象

​ 作用：通过userAgent检测浏览器的版本和平台

​ 使用：直接找写好的代码，检测即可

​ 场景1：手机点击下载，识别是安卓还是苹果，给不同用户历史

​ 场景2：识别出当前的访问设备是PC还是移动端，后台根据类型返回对应平台页面。

6.histroy对象

​ 本质：与浏览器地址栏操作相对应，前进后退，历史记录等

​ 常用属性和方法：

<script>
        const btnGo = document.querySelector(`.go`)
        const btnBack = document.querySelector(`.back`)

        btnGo.addEventListener(`click`,function(){
           history.forward()//前进 
           history.go(1) // 前进一个记录
        })

        btnBack.addEventListener(`click`,function(){
            history.back()//后退
            history.go(-1)// 后退一个记录
        })
    </script>

7.本地存储

​ 本质：为了更多需求，需要在本地存储大量数据，HTML5规范提出的解决方案。

​ 特性：

​ 1.数据存储在用户浏览器中

​ 2.设置，读取方便，刷新不丢失数据

​ 3.容量较大

localStorage

​ 特点：

​ 1.生命周期永久,如果用户不手动删除，就一直存储

​ 2.多个页面共享（同一个浏览器可以共享）

​ 3.以键值对形式存储使用

​ 语法：

​ 1.存储数据

​ localStorage.setItem(key, value)

​ 2.获取数据

​ localStorage.getItem(key)

​ 3.删除一个数据

​ localStorage.removeItem(key)

​ 4.清空所有数据

​ localStorage.clear()

<script>

        localStorage.setItem(`arr`,`aaa`)
        localStorage.removeItem(`arr`)//删除一个

        for (let index = 0; index < 100; index++) {
            localStorage.setItem(`key${index}`,index)
            
        }
        localStorage.clear()//清空 

</script>

存储复杂数据类型

​ 作用：本地只能存储字符串，无法存储复杂数据类型，所以要将复杂数据类型转换JSON字符串，再存储到本地

​ 语法：

​ 1.复杂类型数据转成JSON字符串 存储到本地存储中

​ JSON.stringify（复杂数据类型）

​ 2.JSON字符串转成对象 取出时候使用

​ JSON.parse（JSON字符串）

<script>
        //存储数据
        //localStorage.setItem(`自定义`,值-必须是字符串数据类型)
        //无论传入什么类型 最终都会转换字符串
        localStorage.setItem(`data`,`我是字符串`)

        //获取数据
        let data =  localStorage.getItem(`data`)
        console.log(data);//输出：我是字符串 类型是字符串

        //存储浮渣类型 引用类型的数据 会出现数据丢失 就不能简单用`` 如对象 数组
        let obj = { name: '路飞', height: 100, weight: 200 }
        //这样写之后数据就不能调用了 obj.name 都用不了 

        //这样就得把对象格式 转换 字符串 存储到本地
        let objStr = JSON.stringify(obj)
        localStorage.setItem(`obj`,objStr)
        //获取 存储的数据 读取出来
        let newobj = localStorage.getItem(`obj`)
        console.log(newobj);
        //再把字符串的数组 解析回原来的对象
        let newobj2 = JSON.parse(newobj)
        console.log(newobj2);


        /* 总结：本地存储无法存放 复杂类型的数据 通过JSON对象 进行转换 */
</script>

总结：

1.localStorage.setItem("自定义",值-必须是字符串数据类型)

2.无论传入的是什么数据，都会转换成字符串

3.存储复杂类型，通过JSON进行 字符串和对象之间的转换解析

sessionStorage（了解）

​ 特点：

​ 1.区别与上面这个关闭浏览器就没了

​ 2.同一页面下数据可以共享

​ 3.以键值对形式存储使用

​ 4.用法与上用法基本相同

<script>
        // 存
        sessionStorage.setItem(`ss`,123)
        // 取
        console.log(sessionStorage.getItem(`ss`)); 
        // 删一个
        sessionStorage.removeItem(`ss`)
        // 清空
        sessionStorage.clear()
</script>

​ 总结：

​ 1.本地存储 SS 存储 打开页面到关闭页面直接过程 一次会话 ajax node会用

​ 2.登录的时候 用法和local用法一样

​ 3.SS关闭页面数据丢失

​ 4.local 除非用户主动删除 否则一直存在

用本地存储学习信息表案例

<script>     
        let tbody = document.querySelector(`tbody`)
        let btn = document.querySelector(`.add`)
        let uname = document.querySelector(`.uname`)
        let age = document.querySelector(`.age`)
        let gender = document.querySelector(`.gender`)
        let salary = document.querySelector(`.salary`)
        let city = document.querySelector(`.city`)
        //打开页面，获取本地存储的数据
        let strArr = localStorage.getItem(`arr`)
        let arr = []
        //判断本地存储中有无数据
        if(strArr){
          arr = JSON.parse(strArr)
        }else{
          arr = []
        }

        rander()
        
        btn.addEventListener(`click`,function(){
            let data = {
                id: Date.now(),
                uname: uname.value,
                age: age.value,
                gender: gender.value,
                salary: salary.value,
                city: city.value
            }
            arr.push(data)
            //数据新增后，转成字符串
            const strArr = JSON.stringify(arr)
            //在把转换后的数据 存进本地存储
            localStorage.setItem(`arr`,strArr)
            rander()
            uname.value = ``
            age.value = ``
            salary.value = ``
            gender.value = `男`
            city.value = `北京`
        })

        tbody.addEventListener(`click`,function(e){
            if(e.target.nodeName===`A`){
                let index = e.target.dataset.index
                arr.splice(index,1)
                //数据删除后，转成字符串
                const strArr = JSON.stringify(arr)
                //把转换后的数据 存进本地存储
                localStorage.setItem(`arr`,strArr)
                rander()
            }
        })

        function rander() {
            let html = ``
            for (let index = 0; index < arr.length; index++) {
                html += `<tr>
                    <td>${arr[index].id}</td>
                    <td>${arr[index].uname}</td>
                    <td>${arr[index].age}</td>
                    <td>${arr[index].gender}</td>
                    <td>${arr[index].salary}</td>
                    <td>${arr[index].city}</td>
                    <td>
                        <a data-index="${index}" href="javascript:" class="del">删除</a>
                    </td>
                </tr>`   
            }
           
            return tbody.innerHTML = html
        }
</script>

解题思路：

总结：只要哪个地方要插入（修改），就要把数组转字符串-存储本地两段代码写在下面然后再渲染

补充知识

​

元素属性

 <a data-index="1" href="http://www.baidu.com" id ="nav" nihao="我是野生的">点我</a>
<script>
        let a = document.querySelector(`a`)
        //获取固有属性 用点语法
        console.log(a.href);
        //修改固有属性
        a.href = `http//www.qq.com`

        //自定义属性 设置一个属性名hello 值为你好
        a.setAttribute(`hello`,`你好`)
        //获取一个属性名
        console.log(a.getAttribute(`nihao`)); //打印我是野生的
        //删除
        a.removeAttribute(`nihao`)


        //h5建议 的自定义属性 a.data-xxx 开头不能改 
        // 获取：a.dataset.xxx 设置修改：a.dataset.xxx = 3
        console.log(a.dataset.index);
        a.dataset.index=2



        /* 总结
        1.固有属性 用点语法获取
        2.自定义属性 
            随便自己乱命名<a hello="">
                获取 getAtt 设置setAtt 删除removeAtt
            h5 建议 data- 
                获取 <a.data-abc> 设置（a.dataset.abc=456）
        3.最强大是 获取 getAtt 设置setAtt 删除removeAtt
            可以获取任意属性 （固有和H5） */ 
            console.log(a.getAttribute(`data-index`));
            console.log(a.getAttribute(`id`));
</script>

高阶函数

<script>
        /* 高阶函数
        把一个函数 看成一个普通数据 应用在形参 或 返回值中 */

        function f1(callback) {
            callback()
        }

        function f2() {
            console.log(`我是高阶函数`);
        }

        f1(f2) //把f2函数当做是一个形参使用

        setInterval(f2,1000) // 同理

        const btn = document.querySelector(`button`)
        btn.addEventListener(`click`,f2)//f2 也是高阶函数

        function getIndex() {
            let index = 0
            return function () {
                index++
                console.log(index);
            }
        }
        const ff = getIndex()
        ff() //调用
</script>

事件绑定-取消

<script>
        let btn = document.querySelector(`button`)

        function func1() {
            console.log(`已点击`);
        }

        function func2() {
            console.log(`我是第二个点击函数`);
        }

        btn.addEventListener(`click`,func2) // add事件代码可以绑定多个同名事件
        btn.addEventListener(`click`,func1) // 绑定一个封装的函数事件
        btn.removeEventListener(`click`,func1)//取消事件
        /* 注意：取消事件不能取消匿名，得是一个具名的函数 */
</script>

事件流动补充

<div class="a">爷爷
        <div class="b">爸爸
            <div class="c">儿子</div>
        </div>
</div>
<script>
        //事件流动 还有目标阶段
        let a = document.querySelector(`a`)
        let b = document.querySelector(`b`)
        let c = document.querySelector(`c`)
        a.addEventListener(`click`,function(){
            console.log(`爷爷`);
        })
        b.addEventListener(`click`,function(){
            console.log(`爸爸`);
        })
        c.addEventListener(`click`,function(){
            //最底层 就是目标阶段
            console.log(`儿子 目标阶段`);
        })
</script>

字符串和数组方法使用

<script>
        // 字符串转大写
        let msg = `hello`
        console.log(msg.toUpperCase());

        //字符串转小写
        let aaa = `HELLO`
        console.log(aaa.toLowerCase());

        //字符串转数组
        const str = `qwerdfb`
        console.log(str.split(``));//空字符串进行分隔 可以写其他分隔
        
        const str1 = `a-b-c-d`
        console.log(str1.split(`-`));//按照中划线分隔

        //字符串之间的链接
        console.log(str.concat(str1));//少用 = log(str+str1)
        
</script>

<script>
        //数组转字符串
        let arr = [`a`,`b`,`c`]
        console.log(arr.join(``));//join加入，每一个元素之间加入一个符号连接

        let arr1 = [`a`,`b`,`c`]
        console.log(arr.join(`-`));//用-连接成字符串

        //数组和数组之间连接
        console.log(arr.concat(arr1)); 
</script>