BOM-浏览器操作

GLYB－85

已于 2023-03-15 16:19:34 修改

阅读量303

点赞数

分类专栏：前端 JavaScript 文章标签：前端 javascript

于 2022-06-04 23:42:08 首次发布

本文链接：https://blog.csdn.net/weixin_45888283/article/details/125103406

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

BOM- 操作浏览器

一、window对象
二、swiper 插件
三、本地存储
四、自定义属性（拓展）

一、window对象

1.1 BOM-浏览器对象模型

window : 是浏览器内置中的全局对象。
属性:navigator、location、document、history、screen ，这些属性构成了BOM对象。
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
依附于 window 对象的所有属性和方法，使用时可以省略 window。

1.2 定时器-延时函数（重点）

语法

//setTimeout 仅仅只执行一次
setTimeout(回调函数，等待的毫秒数）

清除延时函数

let timer=setTimeout(回调函数，等待的毫秒数）
clearTimeout(timer)

延迟函数结合递归函数可实现 setInterval的功能

<body>
    <div></div>
    <script>
        let div = document.querySelector('div')
        //获取本地时间和延迟函数
        function fn() {
            div.innerHTML = new Date().toLocaleString()
            setTimeout(fn, 1000)
        }

        // 不要忘记调用函数
        fn()
    </script>
</body>

两种定时器对比

间隔函数setInterval	延时函数setTimeout
重复执行，首次执行会延时	延时执行，只执行 1 次；结合递归可重复执行
clearInterval 清除	clearTimeout 清除

1.3 JS执行机制（重点）

JS执行特点：单线程，同一时间只能做一件事，所有任务需要排队；为此，引入了同步和异步解决这个问题。

1.3.1 同步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的。
同步任务：同步任务都在主线程上执行，形成一个执行栈。

1.3.2 异步

异步：可同时进行多个任务。
异步任务：
– 普通事件：click、resize 等；
– 加载事件： load、error 等；
– 定时器： setInterval、setTimeout 等；
– ajax。
异步任务添加到任务队列中，通过回调函数实现 。

1.3.3 JS执行机制

先执行执行栈中的同步任务；
异步任务放入任务队列中；
执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

事件循环（ event loop）：主线程不断的重复获得任务和执行任务。

1.4 location对象

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分。

常用属性

<script>

    // 1.href属性：获取完整的 URL 地址、实现自动跳转功能
    // 1.1 获取URL地址
    console.log(location.href)
    // 1.2 赋予地址，实现自动跳转
     location.href = 'https://www.baidu.com/'

    // 2.search属性：获取地址中携带的参数，符号 ？后面部分。
    // 应用场景：字符串截取，页面与页面之间传递数据，此处了解
    console.log(location.search)

    // 3.hash属性：获取地址中的啥希值，符号 # 后面部分。
    // 此处了解
    console.log(location.hash)

</script>

常用方法

<body>
    <button>刷新</button>
    <script>
        // reload方法：刷新当前页面，传入参数 true 时表示强制刷新 。
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            // 刷新 有本地缓存
            location.reload()

            // 强制刷新 不使用本地缓存，重新加载最新资源
            location.reload(true)
        })

    </script>
</body>

1.5 navigator对象

navigator的数据类型是对象，主要用来获取浏览器的信息。

userAgent 属性：检测浏览器的版本及平台；
navigator．userAgent；
代码去网上复制粘贴即可。

1.6 histroy对象（了解）

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。

常用属性和方法

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数）	参数值：1表示前进一个页面，-1表示后退一个页面

二、swiper 插件

使用插件：

注意: 多个swiper同时使用的时候, 类名需要注意区分。

三、本地存储

3.1 本地存储特征

sessionStorage和localStorage;
数据存储在用户浏览器中；
设置、读取方便，页面刷新不丢失数据；
容量较大。

3.2 localStorage

3.2.1 localStorage

生命周期永久生效，除非手动删除，否则关闭页面也会存在；
同一浏览器可多窗口共享数据；
以键值对的形式存储使用。

3.2.2 简单数据类型操作

//1.存储数据
localStorage.setItem('key', value)

//2.获取数据
localStorage.getItem('key')

// 3.删除数据
localStorage.removeItem('key')

3.2.3 存储复杂数据类型存储（重难点）

JSON字符串

<script>　        
    // JSON字符串 属性和值都用双引号包含
    let obj = {
        "uname": "酷盖",
        "age": "23",
        "address": "85号行星"
    }       
</script>

存储：JSON.stringify(复杂数据类型) – 将复杂数据转换成JSON字符串；

<script>
   // 1.存储复杂数据类型：转换为json字符串　JSON.stringify()
    let obj = {
        uname: '酷盖',
        age: 23,
        address: '85号行星'
    }
    localStorage.setItem('obj', JSON.stringify(obj)  
</script>

读取：JSON.parse(JSON字符串) – 将JSON字符串转换成对象。

<script>
  　// 2.读取数据 JSON.parse()
    //　console.log(typeof JSON.parse(localStorage.getItem('obj')))
    console.log(JSON.parse(localStorage.getItem('obj')))    
</script>

3.3 sessionStorage（了解）

用法跟localStorage 基本相同：

生命周期为关闭浏览器窗口；
同一浏览器可多窗口共享数据；
以键值对的形式存储使用

四、自定义属性（拓展）

传统自定义属性

// １．设置自定义属性
setAttribute('属性名', '属性值') 

// ２.　获取自定义属性
getAttribute('属性名')

// ３．删除自定义属性
removeAttribute('属性名')

data- 自定义属性（重点）

html5推出的自定义属性，在标签上一律以 data- 开头，在DOM对象上一律以dataset对象方式获取。

<body>
    <!-- data- 开头自定义属性 -->
    <div class="box" data-name="Coolguy" data-id="85" data-index="1"></div>

    <script>
        let box = document.querySelector('.box')

        // dataset 获取自定义属性
        console.log(box.dataset.name)
        console.log(box.dataset.id)
        console.log(box.dataset.index)
    </script>
</body>