【学习笔记41】DOM操作的练习

news2025/2/27 17:27:03

一、回到顶部

  • 我们在浏览页面的时候，当我们浏览到一个页面的底部的时，一般都会有一个返回底部

在这里插入图片描述

（一）案例分析

1、当页面滚动的距离大于300的时候，让herder和btn展示

  • header的top设置为0的时候就能看到
  • btn的display设置为block的时候就能看到

2、当页面滚动的距离小于300的时候，让header和btn取消展示

  • header的top设置为-200px的时候就看不到
  • btn的display设置为none的时候就能看到

在这里插入图片描述

（二）HTML和css代码

        <div id="header">顶部</div>
        <button id="btn">回到顶部</button>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body{
            height: 8000px;
        }

        #header {
            width: 100%;
            height: 200px;
            background-color: pink;
            position: fixed;
            top: -200px;
            transition: top 0.5s;
        }

        #btn {
            width: 100px;
            height: 50px;
            font-size: 18px;
            background-color: aquamarine;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>

（三）JS代码

        // 0. 获取标签对象
        var oDiv = document.querySelector('div');
        var oBtn = document.querySelector('button');

        // 1. 监听页面的滚动距离 从而决定页面的header和bun是否展示
        window.onscroll = function(){
            // console.log(document.documentElement.scrollTop);

            // 当页面大于300的时候让herder和btn展示
            if( document.documentElement.scrollTop >= 300 ){
                // 此时让header和btn展示
                oDiv.style.top = 0
                oBtn.style.display = 'block';

            }else{
                // 否则不让header和btn展示
                oDiv.style.top = -200 + 'px';
                oBtn.style.display = 'none';
            }
        }

        // 3. 回到顶部：监听but按钮的点击事件，点击时，让页面滚回到 scrollTop === 0
        oBtn.addEventListener('click', function(){
            // console.log(1111);

            document.documentElement.scrollTop = 0;
        })

二、密码可视化

（一）案例分析

1、监听button的点击事件

  • oBut.addEventListener(‘click’, function(){})

2、点击的时候判断input框的type

  • 如果type==password —> 那就给他赋值text
  • 如果type == text —> 那就给他赋值password

在这里插入图片描述

（二）HTML代码

    密码: <input type="password" id="inp">
    <button id="btn">这是一个眼睛图标</button>

（三）JS代码

        // 获取标签对象
        var oPwd = document.querySelector('input');
        var oBut = document.querySelector('button');

        // 点击事件
        oBut.addEventListener('click', function () {
            /* 方法一：比较麻烦 */
            // if(oPwd.getAttribute('type') === 'password'){

            //     oPwd.setAttribute('type', 'text');
            // }else if(oPwd.getAttribute('type') === 'text'){

            //     oPwd.setAttribute('type', 'password');
            // }

            /* 方法二 */
            // console.dir(inp.type);
            if (oPwd.type === 'password') {

                oPwd.type = 'text';
            } else if (oPwd.type === 'text') {

                oPwd.type = 'password';
            }
        })

三、全选按钮

（一）案例分析

功能1：点击全选按钮的时候, 让选项1~4这几个按钮选中

  1. 点击全选按钮
  2. 判断我当前全选按钮的选中状态 ----> checked
  3. 根据全选按钮的选中状态, 决定是否让 1~4这几个按钮被选中

功能2：选项1~4全被选中的时候, 让全选按钮被选中

  1. 点击选项1~4其中一个按钮
  2. 判断当前选中1~4的选中状态是否都为选中
  3. 如果都是选中的, 将全选按钮选中

在这里插入图片描述

（二）HTML代码

    <input type="checkbox" name="" id="" class="All">全选
    <hr>
    <input type="checkbox" name="" id="" class="other">选项卡1
    <input type="checkbox" name="" id="" class="other">选项卡2
    <input type="checkbox" name="" id="" class="other">选项卡3
    <input type="checkbox" name="" id="" class="other">选项卡4

（三）JS代码

1、功能一的实现

在这里插入图片描述

代码的实现

        oIptAll.addEventListener('click', function () {
            // console.log(oIptAll.checked);

            if( oIptAll.checked === true){
                oIptOthers.forEach(function(item){
                    item.checked = true;
                })
            }else{
                oIptOthers.forEach(function(item){
                    item.checked = false;
                })
            }
        })

优化一

        oIptAll.addEventListener('click', function () {
            // console.log(oIptAll.checked);

            if( oIptAll.checked === true){
                oIptOthers.forEach(function(item){
                    item.checked = oIptAll.checked;
                })
            }else{
                oIptOthers.forEach(function(item){
                    item.checked = oIptAll.checked;
                })
            }
        })

优化二

        oIptAll.addEventListener('click', function () {
            // console.log(oIptAll.checked);

            oIptOthers.forEach(function (item) {
                item.checked = oIptAll.checked;
            })
        })

2、功能二的实现

        // oIptOther[0].addEventListener('click', function(){})
        // oIptOther[2].addEventListener('click', function(){})
        // oIptOther[3].addEventListener('click', function(){})
        // oIptOther[4].addEventListener('click', function(){})

        // oIptOther是伪数组 我们需要通过循坏获取每个值
        oIptOther.forEach(function (item1) {
            // 点击其中一个按钮时，判断其他几个的选中状态是否为true
            // 如果都是true 那么选中全选 否则不选中全选
            item1.addEventListener('click', function () {

                oIptAll.checked = oIptOther.every(function (item2) {

                    return item2.checked;
                })
            })
        })

3、最终代码

        // 获取元素
        var oIptAll = document.querySelector('.All');
        var oIptOther = [...document.querySelectorAll('.other')];

        // 功能一
        oIptAll.addEventListener('click', function () {
            console.log(oIptAll.checked);

            oIptOthers.forEach(function (item) {
                item.checked = oIptAll.checked;
            })
        })

        // 功能二
        oIptOther.forEach(function (item1) {
            // 点击其中一个按钮时，判断其他几个的选中状态是否为true
            // 如果都是true 那么选中全选 否则不选中全选
            item1.addEventListener('click', function () {

                oIptAll.checked = oIptOther.every(function (item2) {

                    return item2.checked;
                })
            })
        })

四、选项卡

（一）案例分析

1、header

点击其中一个li的时候, 给点击的li添加一个类名, 然后给其他的li取消类名

2、content

根据选中哪一个header下的 li, 展示自身下的哪一个li

在这里插入图片描述

（二）HTML和css代码

    <ul class="header">
        <li>header_1</li>
        <li class="active">header_2</li>
        <li>header_3</li>
    </ul>
    <ol class="content">
        <li>content_1</li>
        <li class="active">content_2</li>
        <li>content_3</li>
    </ol>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .header {
            width: 600px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            display: flex;
        }

        .header li {
            width: 200px;
        }

        .content {
            width: 600px;
            height: 400px;
            line-height: 400px;
            text-align: center;
        }

        .header .active {
            background-color: aquamarine;
        }

        .content li {
            display: none;
            font-size: 50px;
        }

        .content .active {
            display: block;
            background-color: orange;
        }
    </style>

（三）JS代码

        oUl.forEach(function(item1, index1){
            item1.addEventListener('click' , function(){

                oUl.forEach(function(item2, index2){
                    // 把所有的li取消类名
                    item2.classList.remove('active');
                    oOl[index2].classList.remove('active');  
                })

                // 给自己添加类名
                item1.classList.add('active');
                oOl[index1].classList.add('active');
            })

        })

五、渲染页面

（一）案例需求

  1. 接收到后端给到的数据
  2. 将数据渲染到页面

在这里插入图片描述

（二）HTML和css代码

    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

<style>
    th,td{
        width: 60px;
        height: 30pxs;
        border: 1px solid red;
        text-align: center;
    }
</style>

（三）JS代码

1、方法一

        var users = [
            { id: 1, name: 'Jack', age: 18, gender: '男', classRoom: '2XX' },
            { id: 2, name: 'Rose', age: 20, gender: '女', classRoom: '2XX' },
            { id: 3, name: 'Jerry', age: 22, gender: '男', classRoom: '2XX' },
            { id: 4, name: 'Tom', age: 24, gender: '男', classRoom: '2XX' }
        ]

        var oTbody = document.querySelector('tbody');
        var str = '';
        users.forEach(function(item){
            str += `
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.classRoom}</td>
            </tr> 
            `;
        })
        oTbody.innerHTML = str;

2、方法二

        var users = [
            { id: 1, name: 'Jack', age: 18, gender: '男', classRoom: '2XX' },
            { id: 2, name: 'Rose', age: 20, gender: '女', classRoom: '2XX' },
            { id: 3, name: 'Jerry', age: 22, gender: '男', classRoom: '2XX' },
            { id: 4, name: 'Tom', age: 24, gender: '男', classRoom: '2XX' }
        ]

        var str = users.reduce(function(prev, item){
            return prev + `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                    <td>${item.classRoom}</td>
                </tr> 
            `
        }, '')
        oTbody.innerHTML = str;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/39178.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

web网页设计期末课程大作业——海贼王大学生HTML网页制作 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

web网页设计期末课程大作业——海贼王大学生HTML网页制作 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐&#x1…
阅读更多...
HTML常用标记（超详解）

HTML常用标记（超详解）

目录 一、文本标记 二、列表标记 三、分割线标记 四、超链接标记 五、图片标记 六、多媒体标记 七、标记类型 八、meta标记 一、文本标记 1.标题标记 语法格式&#xff1a; <hn align"对齐方式">标题文本</hn> html中提供了六级标题&#xff…
阅读更多...
产业经济专题：产业结构高级化、合理化指数、工业化率、机构水平化及产业升级度

产业经济专题：产业结构高级化、合理化指数、工业化率、机构水平化及产业升级度

一、产业关联度的密度指数 1、数据来源&#xff1a;见参考文献 2、时间跨度&#xff1a;无 3、区域范围&#xff1a;无 4、指标说明&#xff1a; 附件中包括命令和案例数据 部分数据如下&#xff1a; 计算参考文献&#xff1a; Xiao J, Boschma R, Andersson M. Industr…
阅读更多...
分布式NoSQL数据库HBase实践与原理剖析（一）

分布式NoSQL数据库HBase实践与原理剖析（一）

title: HBase系列 第一章 HBase基础理论 1.1 HBase简介 Apache HBase™ is the Hadoop database, a distributed, scalable, big data store. Apache HBase™ 是Hadoop数据库&#xff0c;是一种分布式、可扩展的大数据存储。HBase 是 BigTable 的开源 java 版本。 建立在 HDF…
阅读更多...
SecXOps 核心技术能力划分

SecXOps 核心技术能力划分

核心能力 为了加快安全分析能力更全面、更深入的自动化 &#xff0c;SecXOps 的目标在于创建一个集成的用于 Security 的 XOps 实践&#xff0c;提升安全分析的场景覆盖率和运营效率。SecXOps 技术并不 015 SecXOps 技术体系 是 Ops 技术在安全领域的简单加和&#xff0c;SecXO…
阅读更多...
浏览器输入www.baidu.com的请求过程是怎么样的？ 响应的过程是怎样的呢？

浏览器输入www.baidu.com的请求过程是怎么样的？ 响应的过程是怎样的呢？

假设我们电脑的相关配置为&#xff1a; ip地址&#xff1a;192.168.31.37 子网掩码&#xff1a;255.255.255.0 网关地址&#xff1a;192.168.31.1 DNS地址&#xff1a;8.8.8.8 1. DNS 解析 我们打开一个浏览器&#xff0c;请求ww.baidu.com地址&#xff0c;这个时候找DNS 服务…
阅读更多...
梅西进球了,用Python预测世界杯冠军是 ... 网友：痛，太痛了

梅西进球了,用Python预测世界杯冠军是 ... 网友：痛，太痛了

今天凌晨&#xff0c;夺冠热门阿根廷终于赢球了&#xff0c;梅西也打进了自己本届世界杯的第一粒进球&#xff01;你熬夜看这场比赛了吗&#xff1f; 小编也用Python预测了一下本届世界杯的冠军归属&#xff0c;结果却不是阿根廷&#xff0c;来一起看看吧~ 预测结果 根据Pyt…
阅读更多...
《QEMU/KVM源码分析与应用》读书笔记4 —— 第2章 QEMU基本组件（1）

《QEMU/KVM源码分析与应用》读书笔记4 —— 第2章 QEMU基本组件（1）

2.1 QEMU事件循环机制 2.1.1 glibc事件循环机制 知识提炼&#xff1a; glib事件循环机制 QEMU程序的运行基于各类文件fd事件&#xff0c;QEMU在运行过程中会将自己感兴趣的文件fd添加到其监听列表上&#xff0c;并定义相应的处理函数。在QEMU主线程中&#xff0c;有一个循环…
阅读更多...
JS--数组类型 Array 1

JS--数组类型 Array 1

数组是一种特殊的对象&#xff0c;数组是按照顺序排列的一组值&#xff08;元素&#xff09;&#xff0c;每个位置都有一个编号&#xff0c;编号从0开始&#xff0c;编号也叫索引或者下标。数组可以存储任意数据类型。 一 、 创建数组方法 1.用[ ] <script>// 数字的…
阅读更多...
【机器学习项目实战10例】（二）：利用LightGBM实现天气变化的时间序列预测

【机器学习项目实战10例】（二）：利用LightGBM实现天气变化的时间序列预测

🌠 『精品学习专栏导航帖』 🐳最适合入门的100个深度学习实战项目🐳🐙【PyTorch深度学习项目实战100例目录】项目详解 + 数据集 + 完整源码🐙🐶【机器学习入门项目10例目录】项目详解 + 数据集 + 完整源码🐶🦜【机器学习项目实战10例目录】项目详解 + 数据集 +
阅读更多...
MyBatis-Plus快速开发

MyBatis-Plus快速开发

1. 代码生成器原理分析 观察我们之前写的代码&#xff0c;会发现其中也会有很多重复内容&#xff0c;比如&#xff1a; 那我们就想&#xff0c;如果我想做一个Order模块的开发&#xff0c;是不是只需要将内容全部更换成Order即可&#xff0c;如&#xff1a; 所以我们会发现&am…
阅读更多...
【Ctool】json 转 mysql

【Ctool】json 转 mysql

▒ 目录 ▒&#x1f6eb; 导读需求开发环境1️⃣ 编写js实现json转mysql效果图代码及注释2️⃣ 集成到ctool中src/views/tool/json.vuesrc/views/tool/library/json/index.js效果图&#x1f4d6; 参考资料&#x1f6eb; 导读 需求 获取某json格式的数据后&#xff0c;希望将它…
阅读更多...
【csdn】gitcode初体验（开发云、Pages等）（持续更新）

【csdn】gitcode初体验（开发云、Pages等）（持续更新）

▒ 目录 ▒&#x1f6eb; 导读需求开发环境1️⃣ 开发云上免密提交代码【https方式】gitcode页面直接进入开发云2️⃣ 【git方式】通过开发云主页创建项目实现免密更新git1. 通过gitcode页面获取git地址2. 创建并配置SSH公钥&#xff08;所有项目&#xff0c;公用一个公钥&…
阅读更多...
【学生网页设计作品 】关于HTML公益主题网页设计——谨防电信诈骗网

【学生网页设计作品 】关于HTML公益主题网页设计——谨防电信诈骗网

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…
阅读更多...
yocto meta-st-stm32mp conf文件夹分析

yocto meta-st-stm32mp conf文件夹分析

meta-st-stm32mp conf文件夹分析 machine conf分析 本节主要分析conf/machine下面的文件 stm32mp1.conf 包含inc文件 include conf/machine/include/st-machine-common-stm32mp.inc include conf/machine/include/st-machine-providers-stm32mp.incst-machine-providers-…
阅读更多...
骨传导耳机的危害有哪些，骨传导耳机是不是智商税?

骨传导耳机的危害有哪些，骨传导耳机是不是智商税?

关于骨传导耳机的资讯&#xff0c;在网上众说纷纭&#xff0c;那么骨传导耳机在佩戴使用时到底会不会对我们造成伤害&#xff0c;骨传导耳机到底是不是智商税呢&#xff1f;下面就给大家讲解一下骨传导耳机传播声音的方式吧。 骨传导耳机传播声音的方式是通过耳旁的骨骼传声&am…
阅读更多...
地级市高新技术企业统计情况（2000-2019）

地级市高新技术企业统计情况（2000-2019）

1、数据来源&#xff1a;国泰君安 2、时间跨度&#xff1a;2000-2019 3、区域范围&#xff1a;全国 4、指标说明&#xff1a; ① 高新技术企业定义&#xff1a;高新技术企业是指通过科学技术或者科学发明在新领域中的发展&#xff0c;或者在原有领域中革新似的运作。在界定…
阅读更多...
C语言实现扫雷游戏（分解代码，超级详细，无压力）

C语言实现扫雷游戏（分解代码，超级详细，无压力）

目录 一、扫雷游戏 1.1玩法 1.2游戏的基本功能 二、游戏的实现 2.1创建数组 2.1.1为什么设置两组行和列&#xff1f; 2.2初始化棋盘 ‘ 2.2.1函数的调用 2.2.2函数体的实现 2.3打印棋盘 2.3.1函数的调用 2.3.2函数体的实现 2.3.3运行结果 2.4设置雷的位置 2.4.1函数…
阅读更多...
HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…
阅读更多...
华为云桌面Workspace，实惠更实用！

华为云桌面Workspace，实惠更实用！

今年双十一的活动&#xff0c;在各大平台都掀起一股“剁手热潮”。而对于企业主来说&#xff0c;双十一也有各种活动&#xff0c;比如华为云推出了“实惠更实用&#xff0c;‘11’都如愿”活动&#xff0c;也令到企业采购部门蠢蠢欲动。这究竟是怎么回事呢&#xff1f; 据了解&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023