• 【前端】JavaScript —— WebAPI

    JavaEE传送门

    JavaEE

    【前端】JavaScript —— JS的组成与基本语法

    【前端】JavaScript —— JS的基本语法之数组, 函数…

    目录

    WebAPI

    前面学习的 JS 分成三个大的部分

    • ECMAScript: 基础语法部分
    • DOM API: 操作页面结构
    • BOM API: 操作浏览器

    WebAPI 就包含了 DOM + BOM.

    WebAPI 概念是非常广泛的, BOM 和 DOM 只是其中的一部分, 还有一些 操作多媒体的 API, 操作画板 canvas, api …

    DOM

    文档对象模型

    • 文档: html
    • 对象: JS 中的对象

    DOM 合在一起, 就是把 HTML 页面上的每个标签, 都对应成 JS 中的一个对象, 通过这个对象就能获取/ 修改到标签的内容和属性.

    DOM API 一共有很多, 本篇文章只介绍其中的一小部分

    获取元素

    进行后续操作的前提, 需要先把页面上的某个元素, 先拿到.

    let div = document.querySelector('div');

    • 1
    • document: 浏览器提供的一个全局对象, 就表示当前的页面. DOM API 基本上都是这个 document 对象的方法.
    • querySelector 参数就是一个 CSS 选择器, 可以使用前面学过的任意一种选择器, 来选中元素

    要想看到 div 的对象形态就要使用, dir. dir 方法可以把元素以对象形态打印出来

    console.dir(div);

    • 1

    我们看下面这段代码:

    <div>hello1div>
<div>hello2div>
<div>hello3div>
<script>
    let div = document.querySelector('div');
    console.log(div);
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    • 如果选择结果不唯一, 此时标签选择器, 得到的结果只是第一个元素

    • 如果像把多个元素都获取到, 可以使用 querySelectorAll 来完成, 只不过这里的返回值, 是一个数组.

      let divs = document.querySelectorAll('div');

      • 1

    事件

    和用户操作密切相关

    • 用户在浏览器上, 点击鼠标. (左键点击鼠标, 左键双击鼠标, 右键点击鼠标). 鼠标移动, 按下某个键盘按键, 滚动窗口位置…
    • 用户针对浏览器进行的操作, 都会对浏览器产生对应的 “事件”
    • 由于事件是和用户操作相关的, 我们无法预知事件何时到来.
    • 针对这些可能的用户操作, 能做的事情就是提前做好准备工作.
    • 因此, 浏览器就会根据用户操作产生对应的事件, 再有提前准备好的用户代码针对不同的事件进行不同的处理
    <body>
    <div>hellodiv>

    <script>
        // 想让 div 处理一下鼠标点击事件
        let div = document.querySelector('div');
        div.onclick = function() {
            console.log('按下鼠标');
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    这时我们点击页面中的 hello , 控制台上就会出现 ‘按下鼠标’ 字样. 多点几次就会出现多次. (chrome 控制台会默认把相同的日志给合并成一个)

    可在设置中更改

    还有很多关于其他的事件

    div.onmousemove //鼠标移动
div.onmouseenter //鼠标进来了
div.onmouseleave //鼠标出去了
.....

    • 1
    • 2
    • 3
    • 4

    事件涉及三个核心要素:

    1. 事件源: 事件是哪个元素发出来的
    2. 事件类型: 点击, 移动, 按下键盘, 调整窗口…
    3. 事件处理程序: 通过哪个函数/ 代码来进行操作

    操作元素

    元素就是 html 标签, 就是在 JS 中先获取到对应的 html 对象之后, 再来操作其中的内容或者属性.

    获取/ 修改元素内容

    开始标签和结束标签之间的内容.

    使用 innerHTML 属性来获取/ 修改标签的元素内容.

    <body>
    <div>hellodiv>

    <script>
        //先选中div
        let div = document.querySelector('div');
		// 过去元素中的内容
        console.log(div.innerHTML);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    还可以通过给这个属性赋值, 来起到修改的作用

    <body>
    <div>hellodiv>

    <script>
        let div = document.querySelector('div');
		// 当鼠标点击 hello 的时候, 变成 Gujiu
        div.onclick = function() {
            div.innerHTML = 'Gujiu';
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    # 注意 #

    • 这里赋值, 不仅仅能够赋值文本, 还可以赋值一个 html 片段.
    • 还可以使用 innerText 来进行操作, 但是他只能得到文本, 不能得到 html 标签, 且是非标准的 (不建议使用)

    获取/ 修改元素属性

    修改的就是开始标签里面写的那些键值对.

    <body>
    <img src="hei.png" alt="" width="300px">

    <script>
        let img = document.querySelector('img');
		//获取属性
        console.log(img.src);
        console.log(img.width);
        console.log(img.alt);
		//修改属性, 此处通过修改 src 属性, 就可以影响到 html 界面上, 一个图片是如何展示的
        img.onclick = function() {
            img.src = '女.svg';
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    不只是 img 标签, 其他所有标签的属性, 都是通过类似的方式来进行操作的.

    获取/ 修改表单元素属性

    表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改

    • value: input 的值.
    • disabled: 禁用
    • checked: 复选框会使用
    • selected: 下拉框会使用
    • type: input 的类型(文本, 密码, 按钮, 文件等)

    首先, 我们先看这样一段代码

    <body>
 <input type="text">
 <button>点我提交button>

 <script>
     let input = document.querySelector('input');
     let button = document.querySelector('button');
     button.onclick = function() {
         console.log(input.innerHTML);
     }
 script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    我们通过 innerHTML 拿不到其中的内容, 因为 input 标签是一个单标签, 通过 innerHTML 获取标签内部的子标签, 是没有的.

    <body>
    <input type="text">
    <button>点我提交button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function() {
            console.log(input.value);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    案例1: 显示密码 (type)

    <body>
    <input type="password">
    <button>显示密码button>

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function() {
            if(input.type == 'password') {
                input.type = 'text';
                button.innerHTML = '隐藏密码';
            }else {
                input.type = 'password';
                button.innerHTML = '显示密码';
            }
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    案例2: 点击计数 (value)

    1. input 标签中存整数
    2. 一个按钮一点, 数字就减少1
    3. 一个按钮一点, 数字就增加1
    <body>
    <input type="text" value="0">
    <button id="minus"> - button>
    <button id="add"> + button>
    
    <script>
        let input = document.querySelector('input');
        let add = document.querySelector('#add');
        let minus = document.querySelector('#minus');
        add.onclick = function() {
            let oldValue = input.value;
            input.value = oldValue + 1;
        }
        minus.onclick = function() {
            let oldValue = input.value;
            input.value = oldValue - 1;
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    # 注意 #

    • 此处的相加, 并非是算数相加,而是字符串相加了.

    • input.value 获得的是一个字符串. 所以, 需要先把字符串转成整数

      Java 如何转整数? Integer.parselnt

      JS 里也有一个 parseInt, 是一个全局函数(不仅仅是针对字符串操作, 也能针对其他类型操作)

      let oldValue = parseInt(input.value);

      • 1

    这时再点击’ +, - ’ 就是正常的数字加减了.

    • 除此之外, 还有一个更简单的办法, 根据 JS 弱类型的特点, 字符串不能去正号, 就会进行隐式类型转换.

      let oldValue = +input.value;

      • 1

    案例3: 操作复选框 (checked)

    复选框的选择状态, 可以通过 checked 属性来进行设置

    <body>
    <h3>请选择Gujiu的老婆h3>
    <div>
        <input type="checkbox" class="wife">02
    div>
    <div>
        <input type="checkbox" class="wife">木之本樱
    div>
    <div>
        <input type="checkbox" class="wife">樱岛麻衣
    div>
    <div>
        <input type="checkbox" class="all">Gujiu全都要
    div>
    <script>
        let all = document.querySelector('.all');
        let wives = document.querySelectorAll('.wife');
        all.onclick = function() {
            // 把前三项全选
            for(let i= 0; i < wives.length; i++) {
                wives[i].checked = all.checked;
            }
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    这时我们点击 ‘Gujiu全都要’ 选项 ,就会把前三项全选

    获取/ 修改样式属性

    行内样式

    通过 style 属性, 嵌入到 html 里面的样式

    <body>
    <h3 style="font-size: 20px">Gujiu🌺h3>
    <script>
        let h3 = document.querySelector('h3');
        h3.onclick = function() {
            let oldSize = h3.style.fontSize;
            console.log(oldSize);
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    我们现在想: 每次点击, 把文字大小方法 10 个像素

    <body>
    <h3 style="font-size: 20px">Gujiu🌺h3>
    
    <script>
        let h3 = document.querySelector('h3');
        h3.onclick = function() {
            // parseInt 是从左向右进行转换, 转换过程中如果遇到了非数字的字母, 就会自动提停止转换
            let oldSize = parseInt(h3.style.fontSize);
            oldSize += 10;
            // 此时oldSize 是一个数字, 我们需要在后面加上 'px'
            h3.style.fontSize = oldSize + 'px';
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    # 注意 #

    • 咱们平时开发的时候, 行内样式其实用的不算多.

    • 行内样式, 如果东西少还好, 如果东西多, 就容易搞乱.

    • 更常用的是通过选择器的方式选中元素,再指定样式

    选择器

    其中最常用的就是类选择器, 因此就可以通过修改元素 class 属性, 实现修改样式的效果

    案例: 夜间模式

    • 开灯时: 把背景设成浅色, 文字设成深色
    • 关灯时: 把背景设置成深色, 文字设成浅色
    <body>
    <style>
        .light {
            background-color: white;
            color: black;
        }
        .dark {
            background-color: black;
            color: white;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        div {
            height: 100%;
        }
    style>

    <div class="light">
        这是一大段话, Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti explicabo laudantium quia, maiores quod facilis minima a iste amet ab praesentium tempore quisquam atque impedit fuga delectus architecto iure sapiente!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti explicabo laudantium quia, maiores quod facilis minima a iste amet ab praesentium tempore quisquam atque impedit fuga delectus architecto iure sapiente!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti explicabo laudantium quia, maiores quod facilis minima a iste amet ab praesentium tempore quisquam atque impedit fuga delectus architecto iure sapiente!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti explicabo laudantium quia, maiores quod facilis minima a iste amet ab praesentium tempore quisquam atque impedit fuga delectus architecto iure sapiente!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti explicabo laudantium quia, maiores quod facilis minima a iste amet ab praesentium tempore quisquam atque impedit fuga delectus architecto iure sapiente!
    div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            // 通过 className 属性获取到 html 元素中的 class 属性
            if (div.className == 'light') {
                div.className = 'dark';
            }else if (div.className == 'dark') {
                div.className = 'light';
            }
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    这时我们每次单机这段文字, 都会切换效果.

    操作节点

    新增节点

    分成两个步骤

    1. 创建元素节点 (createElement)

    2. 把元素节点插入到 dom 树中. (appendChild)

    <body>
    <div class="parent">
        <div>嘿嘿div>
        <div>哈哈div>
    div>

    <script>
        let div = document.querySelector('.parent');
        let childDiv = document.createElement('div');
        childDiv.innerHTML = '嘻嘻';
        div.appendChild(childDiv);
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    删除节点

    使用 removeChild 删除子节点

    oldChild = element.removeChild(child);

    • 1

    案例

    猜数字

    • 随机生成 1 - 100 间的随机数, 让玩家猜
    • 每次玩家猜一个数组, 就提示高了/ 低了/ 猜对了
    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>猜数字title>
head>
<body>
    <h3>请输入要猜的数字:h3>
    <input type="text">
    <div>
        已经猜的次数: <span id="guessCount">0span>
    div>
    <div>
        结果是: <span id="result">span>
    div>
    <button>猜button>

    <script>
        let input = document.querySelector('input');
        let guessCount = document.querySelector('#guessCount');
        let result = document.querySelector('#result');
        let button = document.querySelector('button');
        //生成随机数 (random 生成的是[0,1)之间的小数])
        let toGuess = parseInt(Math.random() * 100) + 1;
        button.onclick = function() {
            let value = parseInt(input.value);
            if(value > toGuess) {
                result.innerHTML = '猜高了';
            }else if(value < toGuess) {
                result.innerHTML = '猜低了';
            }else {
                result.innerHTML = '猜对了 ! !';
            }
            let count = parseInt(guessCount.innerHTML);
            guessCount.innerHTML = count + 1;
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    表白墙

    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>表白墙title>
    <style>
        .container {
            width: 300px;
            /* margin 外边距, 第一个数字上下外边距, 第二个数字表示水平外边距 */
            margin: 0 auto;
        }
        h3 {
            text-align: center;
        }
        p {
            color: grey;
            text-align: center;
            font-size: 13px;
        }
        .row {
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span {
            width: 80px;

        }
        .row input {
            width: 220px;  
        }
        button {
            width: 300px;
            height: 30px;
            color: white;
            background-color:orangered;
            border: none;
            border-radius: 5px;
        }
        button:active {
            background-color: orange;
        }
    style>

head>
<body>

    <div class="container">
        <h3>表白墙h3>
        <p>输入后点击提交, 会将信息显示在表格中p>
        <div class="row">
            <span>谁:span>
            <input type="text">
        div>
        <div class="row">
            <span>对谁:span>
            <input type="text">
        div>
        <div class="row">
            <span>说什么:span>
            <input type="text">
        div>
        <button class="">提交button>
    div>
    <script>
        let container = document.querySelector('.container');
        let button = document.querySelector('button');
        button.onclick = function() {
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            if(from == '' || to == '' || message == ''){
                alert('当前输入框内容为空');
                return;
            }
            console.log(from + ", " + to + ", " + message);
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + "对" + to + "说: " + message;
            container.appendChild(rowDiv);
            for(let i = 0; i < inputs.length; i++) {
                inputs[i].value = '';
            }
        }
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91

    在这里插入图片描述
    # 注意事项 #

    • 当前表白墙, 页面一旦刷新, 之前提交的数据就没有了
    • 当前提交时数据都是直接保存在页面的 “内存” 中的
    • 浏览器如果想要持久化存储有诸多限制, 浏览器要考虑安全性, 禁止 js 直接访问咱们电脑的硬盘, 浏览器为了能够让 js 持久化存储数据, 留下了一定的机制来实现
    • 更好的办法, 使用服务器来保存数据, 每次点击提交都给服务器发送个请求, 服务器来负责存储留言墙中的数据. 每次打开页面, 都让页面从服务器获取数据列表.
    • 使用服务器来保存数据, 另一个好处: 无论是哪个客户端, 都能都获取到同一份数据列表.
    🌷(( ◞•̀д•́)◞⚔◟(•̀д•́◟ ))🌷
    以上就是今天要讲的内容了，希望对大家有所帮助，如果有问题欢迎评论指出，会积极改正！！

    在这里插入图片描述
    加粗样式

    这里是Gujiu吖！！感谢你看到这里🌬
    祝今天的你也
    开心满怀，笑容常在。
  • 相关阅读:
    ChatGPT支持下的PyTorch机器学习与深度学习技术应用
    CSS 学习
    GIRAFFE学习笔记
    【LeetCode】螺旋矩阵&&旋转图像
    云开发静态网站H5跳转小程序（记录过程）以及云环境共享（同一主体）
    Linux——MySQL 的 MGR 集群和Redis的编译安装
    【Visual Leak Detector】源码编译 VLD 库
    Unity 分享 功能 用Unity Native Share Plugin 实现链接、图片、视频等文件的分享+ 安卓 Ios 都可以，代码图文详解
    unicode汉字编码转化
    CompletableFuture-CompletionStage接口源码分析和四大静态方法初讲
  • 原文地址：https://blog.csdn.net/m0_58592142/article/details/127829055