Web APIs基础知识

最新推荐文章于 2024-09-24 21:17:34 发布
最新推荐文章于 2024-09-24 21:17:34 发布
阅读量924 收藏 1
点赞数
分类专栏： 网页开发 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44631615/article/details/124458672
版权

文章目录

Web API 基本认知

在这里插入图片描述
在这里插入图片描述

DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用：开发网页内容特效和实现用户交互

DOM树

在这里插入图片描述
在这里插入图片描述

DOM对象（重要）

在这里插入图片描述
在这里插入图片描述

获取DOM对象

在这里插入图片描述
在这里插入图片描述

选择匹配的第一个元素

在这里插入图片描述
在这里插入图片描述

选择匹配的多个元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

其他获取DOM元素方法（了解）

在这里插入图片描述
在这里插入图片描述

设置/修改DOM元素内容

在这里插入图片描述

document.write()

在这里插入图片描述

元素innerText 属性

在这里插入图片描述
在这里插入图片描述

元素.innerHTML 属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

小案例——随机抽取的名字显示到指定的标签内部

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    抽中的选手：<div></div>

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

        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        let random = getRandom(0, arr.length - 1)
        
        box.innerHTML = arr[random]

        arr.splice(random, 1)
        
    </script>
</body>
</html>

css

div {
    display: inline-block;
    width: 150px;
    height: 30px;
    border: 1px solid orangered;
    vertical-align: middle;
    text-align: center;
    line-height: 30px;
}

设置/修改DOM元素属性

设置/修改元素常用属性

在这里插入图片描述

设置/修改元素样式属性

在这里插入图片描述

通过 style 属性操作CSS

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

操作类名(className) 操作CSS

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

通过 classList 操作类控制CSS

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

设置/修改 表单元素 属性

在这里插入图片描述
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示，如果为true 代表添加了该属性，如果是false 代表移除了该属性
比如： disabled、checked、selected
在这里插入图片描述

定时器-间歇函数

在这里插入图片描述

开启定时器

在这里插入图片描述
在这里插入图片描述

关闭定时器

在这里插入图片描述
注意：

  1. 函数名字不需要加括号
  2. 定时器返回的是一个id数字

在这里插入图片描述

小案例——页面刷新，图片随机更换

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    <img src="" alt="">

    <script>
        let pic = document.querySelector('img')
        
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        let num = getRandom(1, 6)
        pic.src = `./img/${num}.jpg`
        
    </script>
</body>
</html>

css

img {
    display: block;
    height: 300px;
    background-position: center center;
    margin: 0 auto;
}

阅读用户协议倒计时效果小案例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>

    <script>
        let btn = document.querySelector('.btn')
        let i = 6
        let timer = setInterval(function(){
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                clearInterval(timer)
                btn.disabled = false
                btn.innerHTML = `我同意该协议`
            }
        }, 1000)

    </script>
</body>
</html>

QQ音乐焦点图切换案例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    <div class="img-box">
        <img class="pic" src="./img/1.jpg" alt="">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>

    <script>
        let data = [
            {
                imgSrc: './img/1.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: './img/2.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: './img/3.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: './img/4.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: './img/5.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: './img/6.jpg',
                title: 'Rihood新歌发布，5月10号正式推出'
            },
            {
                imgSrc: './img/7.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: './img/8.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: './img/9.jpg',
                title: '我用整颗心来等你'
            },
        ]    

        let pic = document.querySelector('.pic')
        let text = document.querySelector('.text')
        let i = 1
        setInterval(function(){
            pic.src = data[i].imgSrc
            text.innerHTML = data[i].title
            i++
            if (i > data.length - 1) {
                i = 0
            }
        }, 3000)
    </script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 560px;
    background-color: #251D3A;
}

.img-box {
    position: relative;
    top: 0;
    left: 0;
    height: 400px;
}

.img-box img {
    display: block;
    height: 360px;
    margin: 0 auto;
}

.img-box .tip {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-family: STKaiti;
    font-weight: 600;
}

事件监听

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

淘宝点击关闭二维码小案例

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    <div class="erweima">
        <img src="./img/code.png" alt="">
        <i class="close_btn">X</i>
    </div>

    <script>
        let close_btn = document.querySelector('.close_btn')
        let code = document.querySelector('.erweima')

        close_btn.addEventListener('click', function() {
            code.style.display = 'none'
        })
    </script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}

.erweima {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 100px auto;
    border: 1px solid #ccc;
}

.erweima i {
    position: absolute;
    left: -11px;
    top: 0;
    width: 8px;
    height: 10px;
    border: 1px solid #ccc;
    border-right: 0;
    font-size: 12px;
    line-height: 10px;
    color: #ccc;
    font-style: normal;
    cursor: pointer;
}

随机点名小案例

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    <div>开始点名</div>
    <button>点名</button>
    <script>
        let box = document.querySelector('div')
        let btn = document.querySelector('button')

        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        btn.addEventListener('click', function() {
            let random = getRandom(0, arr.length - 1)
            box.innerHTML = arr[random]
            arr.splice(random, 1)
            if (arr.length === 0) {
                btn.disabled = true
                btn.innerHTML = '点名结束'
            }
        })
    </script>
</body>
</html>

css

div {
    width: 200px;
    height: 40px;
    border: 1px solid pink;
    text-align: center;
    line-height: 40px;
}

button { 
    width:100px;
    height: 50px;
    background-color: blanchedalmond;
}

随机点名案例

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</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>
        let arr = ['为什么天空是蔚蓝色的', '为什么我国北方的春天和秋天特别短', '我国北方春天的风沙为什么特别大', '夏天为什么常常有雷阵雨', '人眼有几百万像素', '镜子是什么颜色的', '我们为什么要睡觉']
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        let start = document.querySelector('.start')
        let end = document.querySelector('.end')
        let qs = document.querySelector('.qs')

        let timer = 0
        let random = 0
        start.addEventListener('click', function() {
            timer = setInterval(function() {
                random = getRandom(0, arr.length - 1)
                qs.innerHTML = arr[random]
            }, 60)
            if(arr.length === 1) {
                start.disabled = end.disabled = true
            }
        })

        end.addEventListener('click', function() {
            clearInterval(timer)
            arr.splice(random, 1)
        })
    </script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}

h2 {
    text-align: center;
}

.box {
    display: flex;
    width: 600px;
    margin: 50px auto;
    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;
}

事件监听版本

在这里插入图片描述

事件类型

在这里插入图片描述

小米搜索框案例

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</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>
        let search = document.querySelector('input[type=search]')
        let list = document.querySelector('.result-list')
        search.addEventListener('focus', function() {
            search.classList.add('search')
            list.style.display = 'block'
        })

        search.addEventListener('blur', function() {
            search.classList.remove('search')
            list.style.display = 'none'
        })
    </script>
</body>
</html>

css

* {
    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;
}

或者用mouseenter和mouseleave搭配使用

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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</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>
        let search = document.querySelector('input[type=search]')
        let list = document.querySelector('.result-list')
        search.addEventListener('mouseenter', function() {
            search.classList.add('search')
            list.style.display = 'block'
        })

        search.addEventListener('mouseleave', function() {
            search.classList.remove('search')
            list.style.display = 'none'
        })
    </script>
</body>
</html>

css

* {
    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;
    transition: all .6s;
}

.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;
}

微博输入案例

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    <div class="w">
        <div class="controls">
          <img src="./img/tip.png" alt="">
          <br>
          <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
          <div>
                <span class="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
          </div>
        </div>
        <div class="contentList">
          <ul>
    
          </ul>
        </div>
      </div>

    <script>
        let area = document.querySelector('#area')
        let useCount = document.querySelector('.useCount')

        area.addEventListener('input', function() {
            useCount.innerHTML = area.value.length
        })

    </script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

.w {
    width: 900px;
    margin: 0 auto;
}

.controls textarea {
    width: 878px;
    height: 100px;
    /* resize 属性规定是否可由用户调整元素的尺寸。
    none	用户无法调整元素的尺寸。
    */
    resize: none;
    border-radius: 10px;
    outline:none;
    padding-left: 20px;
    padding-top:10px;
    font-size: 18px;
    font-family: 'Console';
}

.controls {
    overflow: hidden;
}

.controls div {
    float: right;
}

.controls div span {
    color:#666;
    vertical-align: middle;
}

.controls div .useCount {
    color:red;
}

.controls div button {
    width: 100px;
    outline: none;
    border:none;
    background: rgb(0, 132, 255);
    height: 30px;
    cursor: pointer;
    color:#fff;
    font: bold 14px '宋体';
    transition: all .5s;
}

.controls div button:hover {
    background: rgb(0, 225, 255);
}

.controls div button:disabled {
    background: rgba(0, 225, 255,0.5);
}

.contentList {
    margin-top:50px;
}

.contentList li {
    padding: 20px 0;
    border-bottom: 1px dashed #ccc;
}

.contentList li .info {
    position: relative;
}

.contentList li .info span {
    position: absolute;
    top:15px;
    left:100px;
    font:bold 16px '宋体';
}

.contentList li .info p {
    position: absolute;
    top:40px;
    left: 100px;
    color:#aaa;
    font-size: 12px;
}

.contentList img {
    width: 80px;
    border-radius: 50%;
}

.contentList li .content {
    padding-left: 100px;
    color: #666;
    word-break: break-all;
}

全选文本框案例

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
    <table>
        <tr>
          <th class="allCheck">
            <input type="checkbox" name="" id="checkAll"> 
            <span class="text">全选</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>
        let checkAll = document.querySelector('#checkAll')
        let cks = document.querySelectorAll('.ck')
        let text = document.querySelector('.text')

        checkAll.addEventListener('click', function() {
            for(let i = 0; i < cks.length; i++) {
                cks[i].checked = checkAll.checked
            }
            if (checkAll.checked) {
              text.innerHTML = '取消'
            }
            else {
              text.innerHTML = '全选'
            }
        })
        
        for (let i = 0; i < cks.length; i++) {
          cks[i].addEventListener('click', function () {
            for (let j = 0; j < cks.length; j++) {
              if (cks[j].checked === false) {
                checkAll.checked = false
                text.innerHTML = '全选'
                return
              }
            }
            checkAll.checked = true
            text.innerHTML = '取消'
          })
        }
    </script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #c0c0c0;
    width: 500px;
    margin: 100px auto;
    text-align: center;
}

table th {
    background-color: #09c;
    font: bold 20px "微软雅黑";
    color: #fff;
    height: 24px;
    padding: 8px;
    border: 1px solid #c0c0c0;
}

td {
    border: 1px solid #c0c0c0;
    color: #404060;
    padding: 10px;
}

.allCheck {
    width: 80px;
}

购物车加减操作

在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
  <div>
    <input type="text" id="total" value="1" readonly>
    <input type="button" value="+" id="add">
    <input type="button" value="-" id="reduce" disabled>
  </div>
    <script>
        let total = document.querySelector('#total')
        let add = document.querySelector('#add')
        let reduce = document.querySelector('#reduce')

        add.addEventListener('click', function() {
          total.value++
          reduce.disabled = false
        })

        reduce.addEventListener('click', function () {
          total.value--
          if (total.value <= 1) {
            reduce.disabled = true  
          }
        })
    </script>
</body>
</html>

css

div {
    width: 80px;
}

input[type=text] {
    width: 50px;
    height: 44px;
    outline: none;
    border: 1px solid #ccc;
    border-right: 0;
    text-align: center;
    border-right: 0;
}

input[type=button] {
    height: 24px;
    width: 22px;
    cursor: pointer;
}

input {
    float: left;
    border: 1px solid #ccc;
}

高阶函数

高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。
【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

函数表达式

在这里插入图片描述

回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数

简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
在这里插入图片描述
在这里插入图片描述

环境对象（this）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

排他思想小案例

在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
  <button>No.1</button><button class="orangered">No.2</button><button>No.3</button><button>No.4</button><button>No.5</button><button>No.6</button>
    <script>
        let btns = document.querySelectorAll('button')

        for (let i = 0; i < btns.length; i++) {
          btns[i].addEventListener('click', function () {
          //   for (let j = 0; j < btns.length; j++) {
          //     btns[j].classList.remove('orangered')
          // }
          document.querySelector('.orangered').classList.remove('orangered')
          this.classList.add('orangered')
          })
        }
    </script>
</body>
</html>

css

button {
    margin: 10px;
}

.orangered {
    background-color: orangered;
}

Tab栏切换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
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>Document</title>
    <link rel="stylesheet" href="./practice6.css">
</head>
<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active">国际大牌
        <span>◆</span>
      </li>
      <li class="tab-item">国妆名牌
        <span>◆</span>
      </li>
      <li class="tab-item">清洁用品
        <span>◆</span>
      </li>
      <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
      <div class="main active">
        <!-- 
          1、#：当点击链接时，页面会跳到网页头部
          2、###：页面不会跳到头部，显示当前的位置
        -->
        <a href="###"><img src="./img/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="./img/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="./img/qingjieyongpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="./img/nanshijingpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>
    <script>
        let lis = document.querySelectorAll('.tab .tab-item')
        let divs = document.querySelectorAll('.products .main')

        for (let i = 0; i < lis.length; i++) {
          lis[i].addEventListener('click', function () {
            document.querySelector('.tab .active').classList.remove('active')
            this.classList.add('active')
            document.querySelector('.products .active').classList.remove('active')
            divs[i].classList.add('active')
          })
        }


    </script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

.wrapper {
    width: 1000px;
    height: 600px;
    margin: 0 auto;
    margin-top: 100px;
}

.tab {
    border: 1px solid #ddd;
    border-bottom: 0;
    height: 36px;
    width: 322px;
}

.tab li {
    position: relative;
    float: left;
    width: 80px;
    height: 34px;
    padding: 0 5px 0;
    line-height: 33px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-top: 3px solid #fff;
}

.tab span {
    position: absolute;
    right: 0;
    top: 7px;
    background: #ddd;
    width: 1px;
    height: 21px;
    overflow: hidden;
}

.products {
    width: 1002px;
    border: 1px solid #ddd;
    height: 475px;
    box-sizing: border-box;
}

.products .main {
    float: left;
    display: none;
}

.products .main.active {
    display: block;
}

.tab li.active {
    border-color: red;
    border-bottom: 0;
}

之后我会持续更新，如果喜欢我的文章，请记得一键三连哦，点赞关注收藏，你的每一个赞每一份关注每一次收藏都将是我前进路上的无限动力 ！！！↖(▔▽▔)↗感谢支持！

源代码•宸
关注
专栏目录
WebAPIs-基础知识
qq_31087241的博客
05-12 1580
###WebAPIs Web APIs 是W3C组织的标准 Web APIs 是JavaScript所独有的部分 Web APIs 主要提供页面交互功能 JS的应用 API (Application Programming Interfact) 应用程序编程接口 : 一些预定义的函数，提供应用程序和开发人员基于某软件或硬件得意访问一组例程的能力 Web API : 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) DOM （Document Object Model) : W3C组织推
Web APIs阶段知识点
唯爱赞多的博客
06-19 124
Web APIs是w3c组织的标准 我们主要学习DOM和BOM 是JS独有的部分 主要学习页面交互功能 需要使用JS基础的课程内容做基础 API 和Web API API Web API–DOM和BOM DOM文档对象模型 获取元素 getElementById getElementsByTagName H5新增：getElementsByClassName querySelector 里面的选择器要加符合 querySelectorAll console.dir（）打印返回的.
Web前端系列技术之Web APIs基础（从基础开始）①
小柴爱程序的博客
09-14 634
所以今天主要要介绍的内容就是：一、Web APIs基本认知、二、获取DOM对象、三、设置/修改DOM元素内容、四、设置/修改DOM元素属性、五、定时器-间歇函数
Web Apis
gako15587481707的博客
05-30 142
介绍 知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。 严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。 .
Web APIs -DOM事件基础
闲杂人
09-10 1237
掌握事件绑定处理和事件对象，完成常见网页交互。 - 事件监听 - 事件类型 - 事件对象 - 拓展知识 - 综合案例
Web_APIs
low666的博客
10-26 749
Web_APIs
Web APIs基础-DOM相关概念
ADwblj的博客
11-21 101
Web APIs基础-DOM相关概念
Web APIs Web APIs第六天
谢谢你们的关注
09-05 308
Web APIs Web APIs第六天
Web前端系列技术之Web APIs基础（从基础开始）⑥
小柴爱程序的博客
09-25 702
所以今天主要要介绍的内容就是：一、BOM对象、二、SWIPER插件、三、本地存储、四、中秋节项目优化
designing-great-web-apis.pdf
04-04
- **版权信息**：文档提到了版权信息，表明“Designing Great Web APIs”以及封面和相关商标均为O’Reilly Media Inc.所拥有。出版方与作者尽管尽力确保信息的准确无误，但不承担因信息错误或遗漏造成的损失责任。 ...
livecoding-web-apis
03-16
【标题】"livecoding-web-apis" 涉及的核心知识点是Web APIs，这是一个关键的Web开发技术，它允许JavaScript与浏览器之外的资源和服务进行交互。Web APIs是Web应用程序能够利用浏览器提供的各种功能和数据的接口，如...
7天精通Web APIs-正则&阶段案例（理论+实战）（第六天）
05-13
在本课程"7天精通Web APIs-正则&阶段案例（理论+实战）（第六天）"中，我们将深入探讨正则表达式及其在Web APIs中的应用。正则表达式，简称正则或regex，是一种强大的文本处理工具，用于模式匹配、搜索、替换等操作...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 556
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
webview2加载本地页面
qq_25160759的博客
09-23 565
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 379
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
前端入门：HTML+CSS
mingangel的博客
09-21 769
之前的文章我已经讲过HTML，这篇文章我将讲解HTML和CSS的案例。
DC00015基于java web校园网上购物系统
最新发布
黄昏下的黎明的博客
09-24 580
DC00015【含配套文档】基于java web校园网上购物系统。
精通RESTful Web APIs设计
这本书获得了多位业界专家的高度评价，对于API设计的基础知识有深入的探讨，并特别关注了超媒体在REST架构中的应用。" RESTful Web APIs 是一种设计Web服务的标准方法，它基于Representational State Transfer...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值