JavaScript进阶：WebAPIs重点知识整理2

是小蟹呀^

已于 2024-01-23 17:15:28 修改

阅读量515

点赞数 15

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

于 2024-01-23 17:14:40 首次发布

本文链接：https://blog.csdn.net/m0_61495539/article/details/135773834

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

之前我们都是直接使用 document.querySelector('选择器'); 来直接获取元素节点的，下面将介绍通过节点与节点之间的关系，来对指定的节点进行操作。毕竟“打虎亲兄弟，上阵父子兵”.

1 对节点的相关操作

1.1 查找节点

1.1.1 查找节点的父节点

        const baby = document.querySelector('.baby')
        console.log(baby)
        console.log(baby.parentNode)  // 获取 dad
        console.log(baby.parentNode.parentNode)  // 获取 yeye
        console.log("--------------------")

1.1.2 查找节点的子节点

返回一个伪数组, 选择的是亲儿子，最近一级的

        const dad = document.querySelector('.dad')
        console.log(dad.children)  // 返回一个伪数组, 选择的是亲儿子，最近一级的
        console.log('-------------------')

1.1.3 查找节点的兄弟节点

        console.log(baby.previousElementSibling)  // 返回的是上一个节点
        console.log(baby.nextElementSibling)  // 返回的是下一个节点
        console.log("--------------------")

1.2 新增节点（先创建，后追加）

        //1. appendChild  插入到父元素的最后面
        const li = document.createElement('li')  // 创建节点li
        li.innerHTML = '我是新增的li'
        document.body.appendChild(li)  // 追加节点li

        //2. insertBefore  插入到指定的元素的前面
        const lipre = document.createElement('li')  // 创建节点li
        lipre.innerHTML = '我是新增的lipre'
        document.body.insertBefore(lipre, li)  // 追加节点lipre

1.3 克隆节点

        const ul = document.querySelector('ul')
        // 克隆
        const li1 = ul.children[0].cloneNode(true)  // 参数为true，表示深拷贝，拷贝的是里面的内容，如果为false,为浅拷贝，则只拷贝标签本身，不拷贝内容。
        // 追加
        ul.appendChild(li1)

1.4 删除节点

ul.removeChild(ul.children[1])  // 删除第2个子节点

2 M 端（移动端）事件

3 JS清空表单的方法

可以用于当用户提交表单后，自动清空表单内容 reset()

4 swiper 插件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper/swiper.min.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">

    <style>
        .box {
            position: relative;
            margin: 100px auto;
            width: 800px;
            height: 400px;
            background-color: skyblue;
            /* z-index:1; */
        }

        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    
    <script src="./swiper/swiper.min.js"></script>
    <script src="./swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",  // 显示的小圆点
            },

            // 自动播放
            // autoplay:true,//等同于以下设置
            autoplay: {
                delay: 1000,
                stopOnLastSlide: false,
                disableOnInteraction: false,   // 触摸之后是否继续播放
            },

            // 键盘控制
            keyboard: {
                enabled: true,
                onlyInViewport: true,
            },

            parallax : true, // 切换更有层次感
        });
    </script>
</body>
</html>

5 延时函数

    <script>
        // 语法：
            // setTimeout(回调函数, 等待的毫秒数)

        let timer = setTimeout(function(){
            console.log('setTimeout')
        },2000)

        // 清除延时函数：
        // clearTimeout(延时函数的ID)
        clearTimeout(timer)

    </script>

6 JS的执行机制

6.1 首先看一道面试题

        // 面试题：
        // 代码1：
        console.log(111)
        setTimeout(function() {
            console.log(222)
        },1000)

        console.log(333)   // 111 333 222


        console.log("-------------------")


        // 代码2：
        console.log(111)
        setTimeout(function() {
            console.log(222)
        },0)

        console.log(333)  // 111 333 222

代码2中已经将延时器的时间定为0了，为什么输出的结果和代码1一样呢？？？

解答：

1. js语言的一大特点是单线程的，也就是说同一时间只做一个任务

2. 任务又分为同步任务和异步任务

3. JS的执行机制是先执行同步任务，遇到异步任务，就将异步任务放入任务队列中，一旦执行栈中的同步任务执行完后，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

4. 其实对于在异步任务进入任务队列前，还是有一步操作的，那就是异步任务将被提交给对应的异步进程处理，也就是浏览器进行处理，在处理中，是多线程的，多个任务同时进行，先结束的就先进入任务队列进行排队，等待系统读取。

5.上述的过程就成为事件循环

7 location 对象

        // 1. location的href属性
        const btn = document.querySelector('button')
        const div = document.querySelector('div')
        const p = document.querySelector('p')

        btn.addEventListener('click', function(e) {
            window.location.href = 'https://www.baidu.com'
        })
        
        // // 声明倒计时变量
        let i = 5
        let timer =  setInterval(function() {
            i--
            if (i === 0) {
                clearInterval(timer)
                window.location.href = 'https://www.baidu.com'
            }
            p.innerHTML = `<span>${i}</span>秒后自动跳转`
        }, 1000)

        setTimeout(function() {
            window.location.href = 'https://www.baidu.com'
        }, 3000)
        // 3秒后跳转到百度




        // 2. location的search属性: 获取地址中携带的参数，符号 ? 后面的部分
        console.log(window.location.search)




        // 3. location的hash属性: 获取地址中携带的参数，符号 # 后面的部分
        console.log(window.location.hash)  // 为后期的vue路由铺垫，经常用于不刷新页面，显示不同的页面

        

        // 4. location的reload方法: 刷新页面
        // location.reload()  传入参数true表示强制刷新
        const reloadBtn = document.querySelector('.reload')

        reloadBtn.addEventListener("click", function() {
            location.reload()
            // location.reload(true)   表示强制刷新
        })

    </script>

8 navigator 对象

        // navigator对象获取浏览器的相关信息
        // 常见的属性和方法
        // ->通过userAgent检测浏览器的版本及平台

        // 检测 userAgent (浏览器信息)
        (function () {
            const userAgent = navigator.userAgent

            // 验证是否为Android或者iPhone
            const isAndroid = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
            const isIPhone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
            const isIpad = userAgent.match(/(iPad).*OS\s([\d_]+)/)

            if (isAndroid || isIPhone || isIpad) {
                window.location.href = "http://m.itcast.cn" // 跳转到移动端页面
            }
        })();
    </script>

9 history 对象

<body>
    <button class="btn1">前进</button>
    <button class="btn2">后退</button>
    <a href="http://www.baidu.com">百度</a>

    <script>
        const btn1 = document.querySelector('.btn1')
        const btn2 = document.querySelector('.btn2')

        btn1.addEventListener('click', function (){
            // history.forward()   // 前进
            history.go(1)  // 前进
            // history.go(-1)  // 后退
            // history.go(0)  // 刷新
            // history.go(2)  // 前进两步
            // history.go(-2)  // 后退两步
        })

        btn2.addEventListener('click', function(){
            history.back()  // 后退
        })
    </script>
</body>

是小蟹呀^

关注

15
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript进阶：WebAPIs重点知识整理2

JavaScript进阶：WebAPIs重点知识整理2：1 对节点的相关操作；2 M 端（移动端）事件；3 JS清空表单的方法；4 swiper 插件的使用；5 延时函数；6 JS的执行机制；7 location 对象；8 navigator 对象；9 history 对象
复制链接

扫一扫