HTML+JavaScript-06

于 2024-01-28 15:35:32 发布
阅读量1.3k 收藏 25
点赞数 24
分类专栏： JavaWeb 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59621600/article/details/135896116
版权

节点操作

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

具体操作可以看菜鸟教程：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

keydown与keypress对比

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/

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

甲柒

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

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

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

打赏作者

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

抵扣说明：

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

余额充值