Web APIs二、DOM事件基础

已于 2023-04-21 16:31:08 修改
阅读量237 收藏 1
点赞数 1
分类专栏： 大前端 文章标签： 前端 css html
于 2023-03-13 17:12:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyou123456789/article/details/129499233
版权

零、文章目录

Web APIs二、DOM事件基础

1、事件监听

（1）事件
  • 事件是在编程时系统内发生的动作或者发生的事情
  • 比如用户在网页上单击一个按钮
（2）事件监听

  • 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件

  • 比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

  • 语法：元素对象.addEventListener('事件类型'，要执行的函数)

  • 事件监听三要素：

    • 事件源： 哪个dom元素被事件触发了，要获取dom元素
    • 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
    • 事件调用的函数： 要做什么事

  • 注意：

    • 事件类型要加引号
    • 函数是点击之后再去执行，每次点击都会执行一次

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听</title>
</head>

<body>
    <button>点击</button>
    <script>
        // 需求： 点击了按钮，弹出一个对话框
        // 1. 事件源   按钮  
        // 2. 事件类型 点击鼠标   click 字符串
        // 3. 事件处理程序 弹出对话框
        const btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            alert('你早呀~')
        })
    </script>
</body>

</html>

广告点击关闭：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>广告点击关闭</title>
    <style>
        .box {
            position: relative;
            width: 1000px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            font-size: 50px;
            line-height: 200px;
            font-weight: 700;
        }
        
        .box1 {
            position: absolute;
            right: 20px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-color: skyblue;
            text-align: center;
            line-height: 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        我是广告
        <div class="box1">X</div>
    </div>
    <script>
        // 1. 获取事件源
        const box1 = document.querySelector('.box1')
            //  关闭的是大盒子
        const box = document.querySelector('.box')
            // 2. 事件侦听
        box1.addEventListener('click', function() {
            box.style.display = 'none'
        })
    </script>
</body>

</html>

随机点名案例：

image-20230307110849454

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        h2 {
            text-align: center;
        }
        
        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }
        
        .qs {
            width: 450px;
            height: 40px;
            color: red;
        }
        
        .btns {
            text-align: center;
        }
        
        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
            // 定时器的全局变量
        let timerId = 0
            // 随机号要全局变量
        let random = 0
            // 业务1.开始按钮模块
        const qs = document.querySelector('.qs')
            // 1.1 获取开始按钮对象
        const start = document.querySelector('.start')
            // 1.2 添加点击事件
        start.addEventListener('click', function() {
            timerId = setInterval(function() {
                    // 随机数
                    random = parseInt(Math.random() * arr.length)
                        // console.log(arr[random])
                    qs.innerHTML = arr[random]
                }, 35)
                // 如果数组里面只有一个值了，还需要抽取吗？  不需要  让两个按钮禁用就可以
            if (arr.length === 1) {
                // start.disabled = true
                // end.disabled = true
                start.disabled = end.disabled = true
            }
        })

        // 2. 关闭按钮模块
        const end = document.querySelector('.end')
        end.addEventListener('click', function() {
            clearInterval(timerId)
                // 结束了，可以删除掉当前抽取的那个数组元素
            arr.splice(random, 1)
            console.log(arr)
        })
    </script>
</body>

</html>
（3）事件监听版本
  • DOM L0：事件源.on事件 = function() { }
  • DOM L2：事件源.addEventListener(事件， 事件处理函数)
  • 区别：on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
  • 发展史：
    • DOM L0 ：是 DOM 的发展的第一个版本； L：level
    • DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
    • DOM L2：使用addEventListener注册事件
    • DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听版本</title>
</head>

<body>
    <button>点击</button>
    <script>
        const btn = document.querySelector('button')

        // on 绑定的后面的覆盖前面的
        // btn.onclick = function () {
        //   alert(11)
        // }
        // btn.onclick = function () {
        //   alert(22)
        // }

        //addEventListener 绑定的都会绑上去
        btn.addEventListener('click', function() {
            alert(11)
        })
        btn.addEventListener('click', function() {
            alert(22)
        })
    </script>
</body>

</html>

2、事件类型

image-20230307111350317

（1）鼠标事件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
            // 鼠标经过
        div.addEventListener('mouseenter', function() {
                console.log(`轻轻的我来了`)
            })
            // 鼠标离开
        div.addEventListener('mouseleave', function() {
            console.log(`轻轻的我走了`)
        })
    </script>
</body>

</html>

轮播图完整版：

image-20230307111529325

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图完整版</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }
        
        .slider-wrapper {
            width: 100%;
            height: 320px;
        }
        
        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }
        
        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }
        
        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }
        
        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }
        
        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="" />
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        // 1. 初始数据
        const data = [{
                url: './images/slider01.jpg',
                title: '对人类来说会不会太超前了？',
                color: 'rgb(100, 67, 68)'
            }, {
                url: './images/slider02.jpg',
                title: '开启剑与雪的黑暗传说！',
                color: 'rgb(43, 35, 26)'
            }, {
                url: './images/slider03.jpg',
                title: '真正的jo厨出现了！',
                color: 'rgb(36, 31, 33)'
            }, {
                url: './images/slider04.jpg',
                title: '李玉刚：让世界通过B站看到东方大国文化',
                color: 'rgb(139, 98, 66)'
            }, {
                url: './images/slider05.jpg',
                title: '快来分享你的寒假日常吧~',
                color: 'rgb(67, 90, 92)'
            }, {
                url: './images/slider06.jpg',
                title: '哔哩哔哩小年YEAH',
                color: 'rgb(166, 131, 143)'
            }, {
                url: './images/slider07.jpg',
                title: '一站式解决你的电脑配置问题！！！',
                color: 'rgb(53, 29, 25)'
            }, {
                url: './images/slider08.jpg',
                title: '谁不想和小猫咪贴贴呢！',
                color: 'rgb(99, 72, 114)'
            }, ]
            // 获取元素
        const img = document.querySelector('.slider-wrapper img')
        const p = document.querySelector('.slider-footer p')
        const footer = document.querySelector('.slider-footer')
            // 1. 右按钮业务
            // 1.1 获取右侧按钮 
        const next = document.querySelector('.next')
        let i = 0 // 信号量 控制播放图片张数
            // 1.2 注册点击事件

        next.addEventListener('click', function() {
            // console.log(11)
            i++
            // 1.6判断条件  如果大于8 就复原为 0
            // if (i >= 8) {
            //   i = 0
            // }
            i = i >= data.length ? 0 : i
                // 1.3 得到对应的对象
                // console.log(data[i])
                // 调用函数
            toggle()
        })

        // 2. 左侧按钮业务
        // 2.1 获取左侧按钮 
        const prev = document.querySelector('.prev')
            // 1.2 注册点击事件
        prev.addEventListener('click', function() {
            i--
            // 判断条件  如果小于0  则爬到最后一张图片索引号是 7
            // if (i < 0) {
            //   i = 7
            // }
            i = i < 0 ? data.length - 1 : i
                // 1.3 得到对应的对象
                // console.log(data[i])
                // 调用函数
            toggle()
        })

        // 声明一个渲染的函数作为复用
        function toggle() {
            // 1.4 渲染对应的数据
            img.src = data[i].url
            p.innerHTML = data[i].title
            footer.style.backgroundColor = data[i].color
                // 1.5 更换小圆点    先移除原来的类名， 当前li再添加 这个 类名
            document.querySelector('.slider-indicator .active').classList.remove('active')
            document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
        }

        // 3. 自动播放模块
        let timerId = setInterval(function() {
            // 利用js自动调用点击事件  click()  一定加小括号调用函数
            next.click()
        }, 1000)


        // 4. 鼠标经过大盒子，停止定时器
        const slider = document.querySelector('.slider')
            // 注册事件
        slider.addEventListener('mouseenter', function() {
            // 停止定时器
            clearInterval(timerId)
        })

        // 5. 鼠标离开大盒子，开启定时器
        // 注册事件
        slider.addEventListener('mouseleave', function() {
            // 停止定时器
            if (timerId) clearInterval(timerId)
                // 开启定时器
            timerId = setInterval(function() {
                // 利用js自动调用点击事件  click()  一定加小括号调用函数
                next.click()
            }, 1000)
        })
    </script>
</body>

</html>
（2）焦点事件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点事件</title>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('focus', function() {
            console.log('有焦点触发')
        })
        input.addEventListener('blur', function() {
            console.log('失去焦点触发')
        })
    </script>
</body>

</html>

小米搜索框：

image-20230307111701003

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米搜索框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        ul {
            list-style: none;
        }
        
        .mi {
            position: relative;
            width: 223px;
            margin: 100px auto;
        }
        
        .mi input {
            width: 223px;
            height: 48px;
            padding: 0 10px;
            font-size: 14px;
            line-height: 48px;
            border: 1px solid #e0e0e0;
            outline: none;
        }
        
        .mi .search {
            border: 1px solid #ff6700;
        }
        
        .result-list {
            display: none;
            position: absolute;
            left: 0;
            top: 48px;
            width: 223px;
            border: 1px solid #ff6700;
            border-top: 0;
            background: #fff;
        }
        
        .result-list a {
            display: block;
            padding: 6px 15px;
            font-size: 12px;
            color: #424242;
            text-decoration: none;
        }
        
        .result-list a:hover {
            background-color: #eee;
        }
    </style>

</head>

<body>
    <div class="mi">
        <input type="search" placeholder="小米笔记本">
        <ul class="result-list">
            <li><a href="#">全部商品</a></li>
            <li><a href="#">小米11</a></li>
            <li><a href="#">小米10S</a></li>
            <li><a href="#">小米笔记本</a></li>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">黑鲨4</a></li>
            <li><a href="#">空调</a></li>
        </ul>
    </div>
    <script>
        // 1. 获取元素
        const input = document.querySelector('[type=search]')
        const ul = document.querySelector('.result-list')
            // console.log(input)
            // 2. 监听事件 获得焦点
        input.addEventListener('focus', function() {
                // ul显示
                ul.style.display = 'block'
                    // 添加一个带有颜色边框的类名
                input.classList.add('search')
            })
            // 3. 监听事件 失去焦点
        input.addEventListener('blur', function() {
            ul.style.display = 'none'
            input.classList.remove('search')
        })
    </script>
</body>

</html>
（3）键盘事件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
            //  键盘事件
        input.addEventListener('keydown', function() {
            console.log('键盘按下了')
        })
        input.addEventListener('keyup', function() {
            console.log('键盘谈起了')
        })
    </script>
</body>

</html>
（4）文本事件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本事件</title>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        // 用户输入文本事件  input
        input.addEventListener('input', function() {
            console.log(input.value)
        })
    </script>
</body>

</html>

3、事件对象

（1）事件对象

  • 事件对象

    • 也是个对象，这个对象里有事件触发时的相关信息

    • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

  • 使用场景

    • 可以判断用户按下哪个键，比如按下回车键可以发布新闻
    • 可以判断鼠标点击了哪个元素，从而做相应的操作
（2）如何获取
  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event、ev、e

image-20230307182358273

（3）事件对象常用属性
  • type：获取当前的事件类型
  • clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
  • key：用户按下的键盘键的值，现在不提倡使用keyCode
（4）案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
</head>

<body>
    <button>点击</button>
    <input type="text">
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function(e) {
            console.log(e)
        })

        const input = document.querySelector('input')
        input.addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                console.log('我按下了回车键')
            }
        })
    </script>
</body>

</html>

回车发布评论：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回车发布评论</title>
    <style>
        .wrapper {
            min-width: 400px;
            max-width: 800px;
            display: flex;
            justify-content: flex-end;
        }
        
        .avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            background: url(./images/avatar.jpg) no-repeat center / cover;
            margin-right: 20px;
        }
        
        .wrapper textarea {
            outline: none;
            border-color: transparent;
            resize: none;
            background: #f5f5f5;
            border-radius: 4px;
            flex: 1;
            padding: 10px;
            transition: all 0.5s;
            height: 30px;
        }
        
        .wrapper textarea:focus {
            border-color: #e4e4e4;
            background: #fff;
            height: 50px;
        }
        
        .wrapper button {
            background: #00aeec;
            color: #fff;
            border: none;
            border-radius: 4px;
            margin-left: 10px;
            width: 70px;
            cursor: pointer;
        }
        
        .wrapper .total {
            margin-right: 80px;
            color: #999;
            margin-top: 5px;
            opacity: 0;
            transition: all 0.5s;
        }
        
        .list {
            min-width: 400px;
            max-width: 800px;
            display: flex;
        }
        
        .list .item {
            width: 100%;
            display: flex;
        }
        
        .list .item .info {
            flex: 1;
            border-bottom: 1px dashed #e4e4e4;
            padding-bottom: 10px;
        }
        
        .list .item p {
            margin: 0;
        }
        
        .list .item .name {
            color: #FB7299;
            font-size: 14px;
            font-weight: bold;
        }
        
        .list .item .text {
            color: #333;
            padding: 10px 0;
        }
        
        .list .item .time {
            color: #999;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <i class="avatar"></i>
        <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
        <button>发布</button>
    </div>
    <div class="wrapper">
        <span class="total">0/200字</span>
    </div>
    <div class="list">
        <div class="item" style="display: none;">
            <i class="avatar"></i>
            <div class="info">
                <p class="name">清风徐来</p>
                <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
                <p class="time">2022-10-10 20:29:21</p>
            </div>
        </div>
    </div>
    <script>
        const tx = document.querySelector('#tx')
        const total = document.querySelector('.total')
        const item = document.querySelector('.item')
        const text = document.querySelector('.text')
            // 1. 当我们文本域获得了焦点，就让 total 显示出来
        tx.addEventListener('focus', function() {
                total.style.opacity = 1
            })
            // 2. 当我们文本域失去了焦点，就让 total 隐藏出来
        tx.addEventListener('blur', function() {
                total.style.opacity = 0
            })
            // 3. 检测用户输入
        tx.addEventListener('input', function() {
            // console.log(tx.value.length)  得到输入的长度
            total.innerHTML = `${tx.value.length}/200字`
        })

        // 4. 按下回车发布评论
        tx.addEventListener('keyup', function(e) {
            // 只有按下的是回车键，才会触发
            // console.log(e.key)
            if (e.key === 'Enter') {
                // 如果用户输入的不为空就显示和打印
                if (tx.value.trim()) {
                    // console.log(11)
                    item.style.display = 'block'
                        // console.log(tx.value)  // 用户输入的内容
                    text.innerHTML = tx.value
                }
                // 等我们按下回车，结束，清空文本域
                tx.value = ''
                    // 按下回车之后，就要把 字符统计 复原
                total.innerHTML = '0/200字'
            }

        })
    </script>
</body>

</html>

4、环境对象

  • **环境对象：**指的是函数内部特殊的变量this 。
  • 对象调用的方法，this就指向调用对象。
  • 直接调用函数，其实相当于是 window.函数，所以this指向window对象。

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环境对象</title>
</head>

<body>
    <button>点击</button>
    <script>
        // 每个函数里面都有this 环境对象  直接调用函数里面this指向的是window
        function fn() {
          console.log(this)
        }
        fn()

        //哪个对象调用就是哪个对象
        const btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            // console.log(this)  // btn 对象
            // btn.style.color = 'red'
            this.style.color = 'red'
        })
    </script>
</body>

</html>

5、回调函数

  • 如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
  • 简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

image-20230307190617575

6、综合案例

（1）tab栏切换

image-20230307190646963

image-20230307190659507

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .tab {
            width: 590px;
            height: 340px;
            margin: 20px;
            border: 1px solid #e4e4e4;
        }
        
        .tab-nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
        }
        
        .tab-nav h3 {
            font-size: 24px;
            font-weight: normal;
            margin-left: 20px;
        }
        
        .tab-nav ul {
            list-style: none;
            display: flex;
            justify-content: flex-end;
        }
        
        .tab-nav ul li {
            margin: 0 20px;
            font-size: 14px;
        }
        
        .tab-nav ul li a {
            text-decoration: none;
            border-bottom: 2px solid transparent;
            color: #333;
        }
        
        .tab-nav ul li a.active {
            border-color: #e1251b;
            color: #e1251b;
        }
        
        .tab-content {
            padding: 0 16px;
        }
        
        .tab-content .item {
            display: none;
        }
        
        .tab-content .item.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab-nav">
            <h3>每日特价</h3>
            <ul>
                <li><a class="active" href="javascript:;">精选</a></li>
                <li><a href="javascript:;">美食</a></li>
                <li><a href="javascript:;">百货</a></li>
                <li><a href="javascript:;">个护</a></li>
                <li><a href="javascript:;">预告</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="item active"><img src="./images/tab00.png" alt="" /></div>
            <div class="item"><img src="./images/tab01.png" alt="" /></div>
            <div class="item"><img src="./images/tab02.png" alt="" /></div>
            <div class="item"><img src="./images/tab03.png" alt="" /></div>
            <div class="item"><img src="./images/tab04.png" alt="" /></div>
        </div>
    </div>
    <script>
        // 1. a 模块制作 要给 5个链接绑定鼠标经过事件
        // 1.1 获取 a 元素 
        const as = document.querySelectorAll('.tab-nav a')
            // console.log(as) 
        for (let i = 0; i < as.length; i++) {
            // console.log(as[i])
            // 要给 5个链接绑定鼠标经过事件
            as[i].addEventListener('mouseenter', function() {
                // console.log('鼠标经过')
                // 排他思想  
                // 干掉别人 移除类active
                document.querySelector('.tab-nav .active').classList.remove('active')
                    // 我登基 我添加类 active  this 当前的那个 a 
                this.classList.add('active')

                // 下面5个大盒子 一一对应  .item 
                // 干掉别人
                document.querySelector('.tab-content .active').classList.remove('active')
                    // 对应序号的那个 item 显示 添加 active 类
                document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')

            })
        }
    </script>
</body>

</html>
（2）全选按钮案例

image-20230308162640926

image-20230308163230324

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选按钮案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }
        
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        .allCheck {
            width: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米手机</td>
            <td>小米</td>
            <td>￥1999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米净水器</td>
            <td>小米</td>
            <td>￥4999</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" class="ck">
            </td>
            <td>小米电视</td>
            <td>小米</td>
            <td>￥5999</td>
        </tr>
    </table>
    <script>
        // 1. 获取大复选框
        const checkAll = document.querySelector('#checkAll')
            // 2. 获取所有的小复选框
        const cks = document.querySelectorAll('.ck')
            // 3. 点击大复选框  注册事件
        checkAll.addEventListener('click', function() {
                // 得到当前大复选框的选中状态
                // console.log(checkAll.checked)  // 得到 是 true 或者是 false
                // 4. 遍历所有的小复选框 让小复选框的checked  =  大复选框的 checked
                for (let i = 0; i < cks.length; i++) {
                    cks[i].checked = this.checked
                }
            })
            // 5. 小复选框控制大复选框

        for (let i = 0; i < cks.length; i++) {
            // 5.1 给所有的小复选框添加点击事件
            cks[i].addEventListener('click', function() {
                // 判断选中的小复选框个数 是不是等于  总的小复选框个数
                // 一定要写到点击里面，因为每次要获得最新的个数
                // console.log(document.querySelectorAll('.ck:checked').length)
                // console.log(document.querySelectorAll('.ck:checked').length === cks.length)
                checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
            })
        }
    </script>
</body>

</html>
李宥小哥
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web APIs.xmind
12-05
- API（Application Programming Interface）应用程序编程==接口==（暴露出来的工具）。 - webAPI：浏览器平台对外公开的提供操作浏览器和网页的接口（BOM、DOM
Web APIs之DOM事件基础
qq_42732038的博客
05-18 523
事件是在编程时系统内发生的动作或者发生的事情比如：单击按钮。
Web APIs——DOM-事件基础
m0_52177571的博客
03-31 1148
目录 一、 事件 1.什么是事件？ 2.什么是事件监听？ 3.事件监听三要素： 事件监听 4.事件类型 鼠标事件 焦点事件 键盘事件 文本事件 二、高阶函数 1.函数表达式 2.回调函数 三、环境对象 四、编程思想 1.排他思想 一、 事件 1.什么是事件？ 事件是在编程时系统内发生的动作或者发生的事情 ，比如用户在网页上单击一个按钮 2.什么是事件监听？ 就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
Web APIs-DOM-事件基础
GTC的博客
03-09 270
Web APIs-DOM-事件基础1、事件1.1、事件监听1.2、事件监听版本（拓展）1.3、事件类型2、高阶函数2.1、函数表达式2.2、回调函数3、环境对象4、编程思想-排他思想5、资料来源：黑马程序员 1、事件 1.1、事件监听 1.2、事件监听版本（拓展） 1.3、事件类型 2、高阶函数 2.1、函数表达式 2.2、回调函数 3、环境对象 4、编程思想-排他思想 5、资料来源：黑马程序员 ...
JavaScript中 Web APIs —— DOM
weixin_61920612的博客
03-06 809
JavaScript中 Web APIs —— DOM
【Web APIs】DOM节点
m0_64538862的博客
03-24 876
1.节点操作，DOM节点，查找节点，父节点查找parentNode，子节点查找children，兄弟节点查找previousElementSibling，nextElementSibling，增加节点document.createElement()，克隆节点cloneNode()，删除节点.removeChild，时间对象Date()，时间对象实例化，时间对象方法，时间戳，重绘和回流
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
04-23
Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料
jsdom：各种Web标准JavaScript实现，用于Node.js
02-03
jsdom是许多Web标准（特别是WHATWG 和标准）的纯JavaScript实现，可与Node.js一起使用。 通常，该项目的目标是模拟Web浏览器的子集，从而足以用于测试和抓取实际的Web应用程序。 jsdom的最新版本需要Node.js v10或...
Guess-My-Number-Game:猜猜我的数字游戏
05-19
猜我的电话号码猜我的号码是一个简单的经典游戏使用了什么技术： DOM和DOM方法Web API您可以在此显示游戏实时预览注意：此应用程序是Jonas Schmedtmann javascript课程的一部分，相信我这是一个很大的课程，
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1160
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 905
Nodejs util file getpost web express child_process mogodb
综合性练习-验证码
cj13106811623的博客
05-15 847
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
VUE3注册指令的方法
weixin_44072254的博客
05-22 176
【代码】VUE3注册指令的方法。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 183
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 185
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
前端开发攻略---用Vue实现无限滚动的几种方法
nibabaoo的博客
05-22 404
用vue实现无限滚动
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 773
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
Vue 组件功能的复用
u010373106的博客
05-22 65
Vue中的混入（Mixins）是一种复用组件逻辑的技术，它允许你抽取组件中的可复用功能，并将其作为一个独立的模块与其他组件组合。混入对象可以包含数据、计算属性、方法、生命周期钩子、侦听器等组件选项。当组件使用混入时，混入对象的选项会被“混合”到该组件自身的选项中。注册，会影响所有之后创建的Vue实例。但应谨慎使用，以免污染全局命名空间。：Vue也支持全局混入，通过。
前端基础入门三大核心之HTML篇：Webpack的八种常用Loader用途及加载方式全解析
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-22 543
Webpack及其Loader体系为我们提供了无限可能，但真正的力量在于如何灵活运用它们来解决实际问题。本文仅触及冰山一角，鼓励大家深入探索，结合项目实践，不断优化配置，提升开发效率与用户体验。你的每一次尝试，都是通往前端大师之路的坚实步伐。在不断变化的Web开发领域，保持好奇心，勇于实践，你将发现更多未知的宝藏。那么，你遇到过哪些Loader使用上的挑战？有哪些独特的解决方案？欢迎在评论区分享你的故事，让我们共同进步。欢迎来到我的博客，很高兴能够在这里和您见面！
webapis学生报名系统代码步骤
11-25
设计一个webapis学生报名系统的代码步骤如下： 1. 数据库设计：首先确定需要存储的数据，例如学生的基本信息，课程信息等。根据需求设计数据库表结构，并创建相应的表。 2. 后端接口设计：根据系统需求，设计后端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李宥小哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值