HTML+JavaScript-06

节点操作

目前对于节点操作还是有些困惑,只是了解简单的案例

具体操作可以看菜鸟教程:https://www.runoob.com/js/js-htmldom-elements.html

案例-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>
</head>

<body>
    <strong>div上的一个元素节点</strong>
    <div>
        <span>span属于div的子元素节点</span>
    </div>
    <p>这个p标签属于div的兄弟元素节点</p>
    <ul>
        <li>li标签</li>
        <li>li标签</li>
        <li>li标签</li>
    </ul>

    <ul>
        <div>
            <span class="max">hello world</span>
        </div>
    </ul>
    <ol>
        <li>lililiil</li>
    </ol>

    <script>
        //获取元素
        const span = document.querySelector("span");
        console.dir(span);
        //节点操作之获取父元素节点
        const a = span.parentNode;
        console.log(a);

        //获取ul
        const ul = document.querySelector("ul");
        console.log(ul);
        // const b = ul.children;
        // 获取子元素节点
        const b = ul.childNodes;
        console.log(b);
        // 获取第一个子元素节点
        console.log(ul.childNodes[0]);
        // 获取最后一个子元素节点
        console.log(ul.childNodes[ul.children.length - 1]);

        const div = document.querySelector("div");
        //节点操作之获取兄弟节点和上一个节点
        console.log(div.nextSibling);//获取下一个节点
        console.log(div.nextElementSibling);//下一个元素节点

        console.log(div.previousSibling);//上一个节点
        console.log(div.previousElementSibling);//上一个元素节点

        const span1 = document.querySelector(".max");
        console.dir(span1);
        console.log(span1.parentNode.parentNode.nextElementSibling.children[0]);
    </script>
</body>

</html>

案例-2-节点的添加

<!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>
    <ul>
        <li>甲柒</li>
    </ul>
    <script>
        //创建一个li标签
        //语法格式
        //createElement("要创建的元素")
        const li = document.createElement("li");
        li.innerHTML = "孙行者";

        // 将创建的li标签添加到指定位置
        // 获取ul给ul添加子节点
        const ul = document.querySelector("ul");
        // ul.appendChild(li);//在末尾添加子元素

        // insertBefore("要添加的元素","要添加到那个元素的前面")
        // ul.insertBefore(li,ul.children[0]);

        console.dir(li);
        ul.innerHTML += li.outerHTML;

    </script>
</body>

</html>

下面是关于节点的示例,节点操作还是挺常见的,但是总感觉以后会用的不多。

示例

案例-062

代码

<!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>
        button {
            position: relative;
            left: 1100px;
            top: 28px;
        }
    </style>
</head>

<body>
    <button>发送</button>
    <table align="center" border="1px" width="380px">
        <thead>
            <th>全选/全不选<input type="checkbox" name="" id="" class="qx" onclick="qx(this)"></th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品颜色</th>
            <th>操作</th>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        //创建发送请求的对象
        document.querySelector("button").onclick = function () {
            const xhr = new XMLHttpRequest();
            //设置请求路径
            xhr.open("GET", "test.json");
            xhr.send();
            // 监听响应状态,若状态发生改变触发函数
            xhr.onreadystatechange = function () {
                console.dir(xhr);
                //响应状态200 发送成功
                if (xhr.readyState == 4 && xhr.status == 200) {
                    XR(xhr.responseText);
                }
            }
        }
        function XR(A) {
            let str = "";
            const a = JSON.parse(A);
            for (let i = 0; i < a.length; i++) {
                str += "<tr>";
                str += "<td><input type = checkbox class='dx' οnclick='dx()'></td>";
                str += `<td>${a[i].name}</td>`;
                str += `<td>${a[i].price}</td>`;
                str += `<td>${a[i].color}</td>`;
                str += "<td><a href='#' οnclick='shan(this)'>删除</a></td>";
                str += "</tr>";
            }
            document.querySelector("tbody").innerHTML = str;
        }
        // 定义表格的body
        const body = document.querySelector("tbody");
        //删除1行
        function shan(A) {
            body.removeChild(A.parentNode.parentNode);
        }
        //全选全不选
        function qx(A) {
            //获取全选按钮
            const dx = document.querySelectorAll(".dx");
            for (let i = 0; i < dx.length; i++) {
                dx[i].checked = A.checked;
            }
        }
        //下方选中上方自动选中
        function dx() {
            const qx = document.querySelector(".qx");
            const dxs = document.querySelectorAll(".dx");
            let flag = true;
            //判断是否都选中,如果都选中不修改flag的值,如果有一个没有选中,修改flag的值
            for (let i = 0; i < dxs.length; i++) {
                //判断是否被选中 没有选中flag的值变为 false
                if (dxs[i].checked == false) {
                    flag = false;
                    break;
                }
            }
            qx.checked = flag;
        }
    </script>
</body>

</html>

键盘事件

常用键盘事件

松开的时候触发

onkeyup

按下的时候触发

onkeydown

按下的时候触发

onkeypress

keydownkeypress对比

keydownkeypress
效果对比所有按键触发都有效功能键触发无效(tab/shift/ctrl等按键)
ASCII对比大写时,ASCII值相同小写时ASCII值与keydown不同,大写时相同
相同长按会一直触发,大写时ASCII值相同

示例代码

//添加事件
//松开时触发
document.addEventListener("keyup", function () {
    console.log("触发了keyup事件");
})
//按下时触发 所有键有效 长按会一直触发
document.addEventListener("keydown", () => {
    console.log("触发了keydown事件");
})
//按下时触发 功能键无效 长按会一直触发
document.addEventListener("keypress", () => {
    console.log("触发了keypress事件");
})

//对比 keydown 与 keypress
document.addEventListener("keydown", (k) => {
    console.log("keydown" + k.keyCode);
})
document.addEventListener("keypress", (k) => {
    console.log("keypress" + k.keyCode);
})

鼠标事件

鼠标点击

click

当鼠标在元素上移动时触发

mousemove

当鼠标移除元素时触发

mouseout

示例

案例-063

代码

<!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>
        .div1 {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            font-size: 24px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="div1">

    </div>
</body>

</html>
<script>
    // 鼠标左键的点击事件
    const div1 = document.querySelector(".div1");
    div1.addEventListener("click", () => {
        console.log("触发click事件");
    })
    // pageX 鼠标的x轴 mousemove鼠标移动
    div1.addEventListener("mousemove", (m) => {
        div1.innerHTML = `当前坐标:(${m.pageX}${m.pageY})`;
    })
    // mouseout 鼠标移除
    div1.addEventListener("mouseout", () => {
        div1.innerHTML = `别干出去啊~~~`;
    })
</script>

其他事件

获得焦点

focus

失去焦点

blur

用户输入表单

input

示例

案例-064

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送评论</title>
    <style>
        .max {
            width: 400px;
            height: 600px;
            border: 1px solid red;
            border-radius: 10px;
            margin: 0 auto;
        }

        .div1 {
            width: 400px;
            height: 200px;
            line-height: 200px;
            border: 1px solid skyblue;
            text-align: center;
            border-radius: 10px;
        }

        .inp {
            border-color: aquamarine;
            outline: 0px solid orange;
            height: 40px;
            transition: all 1s;
        }

        .div2 {
            width: 400px;
            height: 400px;
            border: 1px solid orange;
            border-radius: 10px;

        }
    </style>
</head>

<body>
    <div class="max">
        <div class="div1">
            <input type="text" class="inp">
            <input type="button" value="发送" class="button">
        </div>
        <div class="div2">
            0/100字
        </div>
    </div>
</body>

</html>

<script>
    const inp = document.querySelector(".inp");
    const button = document.querySelector(".button");
    const div2 = document.querySelector(".div2");
    inp.addEventListener("focus", () => {
        inp.style.height = "60px";
        inp.style.border = "1px solid orange";
        inp.style.outline = "1px solid orange";

    })
    inp.addEventListener("input", (m) => {
        div2.innerHTML = `${inp.value.length}/100字`;
    })
    button.addEventListener("click", () => {
        if (inp.value != '') {
            div2.innerHTML = `${inp.value}`;
            inp.value = '';
        } else {
            alert("请输入评论~~~");
        }
    })
    document.addEventListener("keyup", (k) => {
        if (k.keyCode == 13) {
            if (inp.value != '') {
                div2.innerHTML = `${inp.value}`;
                inp.value = '';
            } else {
                alert("请输入评论~~~");
            }
        }
    })
</script>

补充

`${变量}`//``是反引号,在键盘左上角用英文输出
`${inp.value}`// 是 JavaScript 中的模板字面量(template literals)表达式。
这种语法允许你插入变量值到字符串中,使用 `${}` 括起变量或表达式。
在这里,`${inp.value}` 用于将输入框(`input`)的值插入字符串中,以显示输入框的当前值。

综合案例的美化

示例

案例-065

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送评论</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: 'Arial', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        .max {
            width: 400px;
            height: 600px;
            border: 1px solid #ddd;
            border-radius: 10px;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .div1 {
            width: 100%;
            height: 200px;
            border-bottom: 1px solid #ddd;
            border-radius: 10px 10px 0 0;
            background-color: #3498db;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .inp {
            border: none;
            outline: none;
            height: 40px;
            width: 80%;
            border-radius: 5px;
            padding: 5px;
            margin-bottom: 10px;
            transition: all 1s;
            outline: #3498db;
            border: 1px solid #3498db;
        }

        .button {
            background-color: #2ecc71;
            color: #fff;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
        }

        .button:hover {
            background-color: #27ae60;
        }

        .div2 {
            width: 100%;
            height: 400px;
            border-radius: 0 0 10px 10px;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
            color: #333;
        }
    </style>
</head>

<body>
    <div class="max">
        <div class="div1">
            <input type="text" class="inp" placeholder="请输入你的评论">
            <input type="button" value="发送" class="button">
        </div>
        <div class="div2">
            0/100字
        </div>
    </div>
</body>

</html>

<script>
    const inp = document.querySelector(".inp");
    const button = document.querySelector(".button");
    const div2 = document.querySelector(".div2");

    inp.addEventListener("focus", () => {
        inp.style.height = "60px";
        inp.style.border = "1px solid #3498db";
        inp.style.outline = "1px solid #3498db";
    });

    inp.addEventListener("input", () => {
        div2.innerHTML = `${inp.value.length}/100字`;
    });

    button.addEventListener("click", () => {
        if (inp.value !== '') {
            div2.innerHTML = `${inp.value}`;
            inp.value = '';
        } else {
            alert("请输入评论~~~");
        }
    });

    document.addEventListener("keyup", (k) => {
        if (k.keyCode == 13) {
            if (inp.value !== '') {
                div2.innerHTML = `${inp.value}`;
                inp.value = '';
            } else {
                alert("请输入评论~~~");
            }
        }
    });
</script>

附录-ASCII码一览表

二进制十进制十六进制字符/缩写解释
00000000000NUL (NULL)空字符
00000001101SOH (Start Of Headling)标题开始
00000010202STX (Start Of Text)正文开始
00000011303ETX (End Of Text)正文结束
00000100404EOT (End Of Transmission)传输结束
00000101505ENQ (Enquiry)请求
00000110606ACK (Acknowledge)回应/响应/收到通知
00000111707BEL (Bell)响铃
00001000808BS (Backspace)退格
00001001909HT (Horizontal Tab)水平制表符
00001010100ALF/NL(Line Feed/New Line)换行键
00001011110BVT (Vertical Tab)垂直制表符
00001100120CFF/NP (Form Feed/New Page)换页键
00001101130DCR (Carriage Return)回车键
00001110140ESO (Shift Out)不用切换
00001111150FSI (Shift In)启用切换
000100001610DLE (Data Link Escape)数据链路转义
000100011711DC1/XON (Device Control 1/Transmission On)设备控制1/传输开始
000100101812DC2 (Device Control 2)设备控制2
000100111913DC3/XOFF (Device Control 3/Transmission Off)设备控制3/传输中断
000101002014DC4 (Device Control 4)设备控制4
000101012115NAK (Negative Acknowledge)无响应/非正常响应/拒绝接收
000101102216SYN (Synchronous Idle)同步空闲
000101112317ETB (End of Transmission Block)传输块结束/块传输终止
000110002418CAN (Cancel)取消
000110012519EM (End of Medium)已到介质末端/介质存储已满/介质中断
00011010261ASUB (Substitute)替补/替换
00011011271BESC (Escape)逃离/取消
00011100281CFS (File Separator)文件分割符
00011101291DGS (Group Separator)组分隔符/分组符
00011110301ERS (Record Separator)记录分离符
00011111311FUS (Unit Separator)单元分隔符
001000003220(Space)空格
001000013321!
001000103422"
001000113523#
001001003624$
001001013725%
001001103826&
001001113927
001010004028(
001010014129)
00101010422A*
00101011432B+
00101100442C,
00101101452D-
00101110462E.
00101111472F/
0011000048300
0011000149311
0011001050322
0011001151333
0011010052344
0011010153355
0011011054366
0011011155377
0011100056388
0011100157399
00111010583A:
00111011593B;
00111100603C<
00111101613D=
00111110623E>
00111111633F?
010000006440@
010000016541A
010000106642B
010000116743C
010001006844D
010001016945E
010001107046F
010001117147G
010010007248H
010010017349I
01001010744AJ
01001011754BK
01001100764CL
01001101774DM
01001110784EN
01001111794FO
010100008050P
010100018151Q
010100108252R
010100118353S
010101008454T
010101018555U
010101108656V
010101118757W
010110008858X
010110018959Y
01011010905AZ
01011011915B[
01011100925C\
01011101935D]
01011110945E^
01011111955F_
011000009660`
011000019761a
011000109862b
011000119963c
0110010010064d
0110010110165e
0110011010266f
0110011110367g
0110100010468h
0110100110569i
011010101066Aj
011010111076Bk
011011001086Cl
011011011096Dm
011011101106En
011011111116Fo
0111000011270p
0111000111371q
0111001011472r
0111001111573s
0111010011674t
0111010111775u
0111011011876v
0111011111977w
0111100012078x
0111100112179y
011110101227Az
011110111237B{
011111001247C|
011111011257D}
011111101267E~
011111111277FDEL (Delete)删除

对控制字符的解释

ASCII 编码中第 0~31 个字符(开头的 32 个字符)以及第 127 个字符(最后一个字符)都是不可见的(无法显示),但是它们都具有一些特殊功能,所以称为控制字符( Control Character)或者功能码(Function Code)。

这 33 个控制字符大都与通信、数据存储以及老式设备有关,有些在现代电脑中的含义已经改变了。

参考:https://c.biancheng.net/c/ascii/

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

考研高数(共轭根式)

1.定义 共轭根式&#xff1a;是指两个不等于零的根式A、B&#xff0c;若它们的积AB不含根式&#xff0c;则称A、B互为共轭根式。 共轭根式的一个显著特点是通过相乘能把根号去掉&#xff0c;这是很有帮助的 2.常用的共轭根式 3.例题 1&#xff09;求极限 2&#xff09;证明…

【超详细教程】2024最新Pytorch安装教程(同时讲解安装CPU和GPU版本)

目录 一、前言 二、pytorch简介 三、安装准备工作 3.1、下载Anaconda 四、判断是否有NVIDIA显卡 五、安装pytorch-CPU版本 六、安装pytorch-GPU版本 6.1、查看CUDA显卡驱动版本 6.2、安装CUDA 6.3、安装CuDNN&#xff08;加速器&#xff09; 6.4、安装pytorch-GPU 七…

从一个小故事讲解观察者模式~

定义对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 什么是观察者模式&#xff1f; 观察者模式在我们的日常生活中极其常见。 先来看看观察者模式的定义&#xff1a; 观察者模式定义了对象之间…

SV-7041T 多媒体教学广播IP网络有源音箱

SV-7041T是深圳锐科达电子有限公司的一款2.0声道壁挂式网络有源音箱&#xff0c;具有10/100M以太网接口&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;可达到功率30W。同时它可以外接一个30W的无源副音箱&#xff0c;用在面积较大的场所。5寸进口全频低音喇…

OCP NVME SSD规范解读-8.SMART日志要求-3

SMART-11&#xff1a;这个属性记录的是用户数据区的NAND块最大擦写次数和最小擦写次数。其中&#xff0c;字节地址95:92表示最小用户数据擦写计数&#xff0c;而字节地址91:88表示最大用户数据擦写计数。这两个数值反映了闪存芯片在使用过程中的磨损程度&#xff0c;是评估SSD剩…

springboot集成 mysql快速入门demo

一、mysql环境搭建 采用docker-compose搭建&#xff0c;配置如下&#xff1a; docker-compose.yml version: 3 services:mysql:image: registry.cn-hangzhou.aliyuncs.com/zhengqing/mysql:5.7 # 原镜像mysql:5.7container_name: mysql_3306 …

Github 2024-01-30 开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-01-30统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目4TypeScript项目2Jupyter Notebook项目2HTML项目1Rust项目1C项目1 稳定扩散Web UI 创建周期&…

使用企业微信一年要花费多少钱?

从今天开始&#xff0c;大力将为大家呈现一个新的话题——“企微问答”&#xff0c;大家有什么问题可以回复我们的公众号&#xff0c;如果你是严肃认真的提问&#xff0c;我们会严肃认真的给你一个答案。今日问题 &#xff1a;用企业微信一年要花多少钱 使用企业微信要花多少钱…

element-ui中的el-date-picker 页面至字显示不全的原因及解决

显示不全原因&#xff1a;.el-range-separator的宽度为5%,相对于外层的父元素不够 解决方案&#xff1a;加宽度 <style> .el-range-separator{width: 20px !important; } </style>解决图如下

基于单片机的烟草干燥温度控制系统设计

摘 要&#xff1a;烟草干燥研究一直备受国内外烟草工作者的重视&#xff0c;在烟草干燥的方法中热风管处理法是利用热空气对流使烟草达到干燥的效果&#xff0c;这样可以控制烟草干燥时的温度&#xff0c;使烟草能够更好更快地干燥&#xff0c;因此温度的检测和控制是很重要的。…

【开源】基于Qt5的ROS1/ROS2人机交互软件(支持地图编辑/多点导航)

本项目基于Qt5开发&#xff0c;基于CMake进行构建&#xff0c;可以实现一套代码同时在ROS1/ROS2系统中使用(本项目已接入CI,保证多ROS版本/系统版本可用性) 项目地址&#xff1a; https://github.com/chengyangkj/Ros_Qt5_Gui_App 软件在编译时会自动识别环境变量中的ROS1/ROS…

Log4j2-13-log4j2 asyncLogger 低延迟日志的异步日志记录器

log4j2 的 async logger Log4j2 是一个 Java 日志框架&#xff0c;它提供了灵活的配置和高性能的日志记录功能。其中&#xff0c;async logger 是 Log4j2 中的一个特性&#xff0c;它允许在日志记录时使用异步方式&#xff0c;以提高性能。 1. 异步日志简介 在传统的同步日志…

linux 下gdal库(python)

之前在windows下安装gdal&#xff0c;先要下安装包再安装。这次在linux上安装&#xff0c;试了一下pip install gdal&#xff0c;不可以。想着linux应该一样&#xff0c;结果一搜网上教程一堆&#xff0c;乱七八糟的。 搞了一个小时 最后发现一句话就可以&#xff01;&#xf…

路由备份聚合排错

目录 实验拓扑图 实验要求 实验排错 故障一 故障现象 故障分析 故障解决 故障二 故障现象 故障分析 故障解决 故障三 故障现象 故障分析 故障解决 故障四 故障现象 故障分析 故障解决 故障五 故障现象 故障分析 故障解决 实验拓扑图 实验要求 按照图示配…

我国个体工商户达1.24亿户,支撑近3亿人就业

官媒报道截至2023年底&#xff0c;全国登记在册个体工商户1.24亿户&#xff0c;占经营主体总量的67.4%&#xff0c;支撑近3亿人就业。 什么概念&#xff1f;我帮大家理解一下&#xff0c;2024年了&#xff0c;现在中国5个人里面就有一个人不用上班&#xff0c;而是自己当起了老…

【Cookie反爬虫】某采购网站动态Cookie加点选验证码校验分析与实战

文章目录 1. 写在前面2. 请求分析3. JS反混淆4. 深度分析 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋…

鸿蒙ArkUI封装的单选组件

Radio是单选框组件&#xff0c;通常用于提供相应的用户交互选择项&#xff0c;同一组的Radio中只有一个可以被选中。 ArkUI创建一个单选框&#xff0c;其中value是单选框的名称&#xff0c;group是单选框的所属群组名称。checked属性可以设置单选框的状态&#xff0c;状态分别为…

python+uiautomator2+adb

uiautomator2 基于google uiautomator的安卓UI自动化框架&#xff0c;支持python编写测试脚本对设备进行自动化控制。原理是在设备上运行http服务器&#xff0c;将http接口封装成python库 uiautomator只能使用java语言&#xff0c;每次都要上传到设备上运行&#xff0c;uiauto…

Java中缓存介绍

一、什么是缓存 1、Cache是高速缓冲存储器 一种特殊的存储器子系统&#xff0c;其中复制了频繁使用的数据以利于快速访问 2、凡是位于速度相差较大的两种硬件/软件之间的&#xff0c;用于协调两者数据传输速度差异的结构&#xff0c;均可称之为 Cache 二、缓存的分类 1、基于…

nodejs下载介绍

前言 在我们开发项目的时候使用的是这种对应的前后端分离的形式&#xff0c;各个开发人员各司其职来完成整个项目的构建 但是实际开发的话前端也是分成了很多部分比如下图 那么我们就用到了对应的快捷生成一个前端项目的工具&#xff0c;nodejs携带的脚手架 下载步骤 大家可…