web api学习总结(1)元素 事件 节点 定时器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
排他思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color {
            color: pink;
        }
    </style>
</head>
<body>
    <button>你来点我</button>
    <button>你来点我</button>
    <button>你来点我</button>
    <button>你来点我</button>
    <button>你来点我</button>
    <button>你来点我</button>
    <button>你来点我</button>
    <button>你来点我</button>
    <button>你来点我</button>
    <script>
        // 1. 获取需要的元素
        let btnArr = document.getElementsByTagName('button');
        // 2. 遍历数组,设置点击事件
        for(let i = 0;i < btnArr.length;i++) {
            btnArr[i].onclick = function () {
                // 2.5 当点击之后,应该先将所有的按钮恢复原状
                // 排他思想
                for(let j = 0;j < btnArr.length;j++) {
                    btnArr[j].removeAttribute('class');
                    btnArr[j].innerText = '你来点我';
                }
                // 3. 当点击之后,给按钮设置一个类名
                this.setAttribute('class','color');
                this.innerText = '按钮变色'
            }
        }
    </script>
</body>
</html>

设置索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>我是学生</button>
    <button>我是学生</button>
    <button>我是学生</button>
    <button>我是学生</button>
    <button>我是学生</button>
    <button>我是学生</button>
    <button>我是学生</button>
    <button>我是学生</button>
    <script>
        // 给每个按钮设置编号----索引
        let btnArr = document.getElementsByTagName('button');
        // 遍历按钮数组,给每个按钮设置索引属性
        for (let i = 0; i < btnArr.length; i++) {
            btnArr[i].setAttribute('index', i);
            // 利用set方法设置自定义属性,是可以在行内显示
            btnArr[i].onclick = function () {
                console.log('我是第' + this.getAttribute('index') + '个按钮');
            }
        }
    </script>
</body>
</html>

节点

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>兽人永不为奴</div>
    <div>除非包吃包住</div>
    <!-- 下着有些伤心的雨 -->
    <div class="box" id="nav" name="test">
        熊猫人
        <!-- 我就是我,一样的憨憨 -->
        <div>1111111</div>
        <div>12222</div>
        <p>获得父元素</p>
    </div>
    <!-- 下着有些伤心的雨 -->
    <div>兽人永不为奴</div>
    <div>除非包吃包住</div>
    <script>
        let box = document.getElementById('nav');
        let p = document.querySelector('P');
        box.style.color = 'red';
        console.log('-------元素节点----');
        console.log(box.nodeType);//类型:1
        console.log(box.nodeName);//名称:大写的标签名
        console.log(box.nodeValue);//值:null


        console.log('-------属性节点----');
        console.log(box.attributes[0].nodeType);//类型 2
        console.log(box.attributes[0].nodeName);//名称 属性名
        console.log(box.attributes[0].nodeValue);//值  属性值

        console.log('-------文本节点----');
        console.log(box.childNodes[0].nodeType);//类型 3
        console.log(box.childNodes[0].nodeName);//名称 #text
        console.log(box.childNodes[0].nodeValue);//值 文本内容

        console.log('-------注释节点-----');
        console.log(box.childNodes[1].nodeType);//类型 8
        console.log(box.childNodes[1].nodeName);//名称 #comment
        console.log(box.childNodes[1].nodeValue);//值  注释内容
        // console.log(pbox.childNodes[2].nodeType);//类型 3
        console.log('---------子节点------');
        console.log(box.childNodes[3]);
        console.log(box.childNodes[3].nodeType);
        console.log(box.childNodes[3].nodeName);
        console.log(box.childNodes[3].nodeValue);
        console.log('--------子元素节点----');
        console.log(box.children);
        console.log('-----子元素节点的长度---');
        console.log(box.children.length);
        console.log(box.childElementCount);
        console.log('--------');
        console.log(box.children[0].nodeType);
        console.log(box.children[0].nodeName);
        console.log(box.children[0].nodeValue);

        console.log(box.children[1].nodeType);
        console.log(box.children[1].nodeName);
        console.log(box.children[1].nodeValue);
        console.log('--------------下一个节点/元素节点');
        console.log(box.nextSibling);
        console.log(box.nextElementSibling);
        console.log('--------------上一个节点/元素节点');
        console.log(box.previousSibling);
        console.log(box.previousElementSibling);
        console.log('--------------获得第一个节点/元素节点');
        console.log(box.firstChild);
        console.log(box.firstElementChild);
        console.log('-------------获得最后一个节点/元素节点');
        console.log(box.lastChild);
        console.log(box.lastElementChild);
        console.log('-------------获得父元素');
        console.log(p.parentNode);//推荐使用
        console.log(p.parentElement);
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

1 引言 4 1.1 课程设计目标 4 1.2 编程工具(编程环境)介绍 4 1.3 实施时间及主要实施步骤 4 2 需求分析 5 3 系统总体设计 6 4 数据库设计 6 5 主要功能模块的设计与实现 10 5.1 功能模块1详细设计(综合查询员工信息)..........................................................10 5.1.1 详细设计.......................................................................................................10 5.1.2 算法流程........................................................................................................15 5.1.3 界面设计及测试结果.....................................................................................15 6 调试分析 15 7 用户手册 16 8 测试结果 17 8.1 员工信息的添加...................................................................................................17 8.2 员工信息的修改...................................................................................................17 8.3 员工信息的删除...................................................................................................18 8.4 员工信息的综合查询...........................................................................................18 8.5 员工信息按性别统计的结果................................................................................19 8.6 员工信息按状态统计的结果...............................................................................19 8.7 员工信息按职称统计的结果................................................................................20 9 结论 20 10 参考文献 20
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值