当前位置：首页 > news >正文

JS学习笔记day04

news 2025/7/5 11:39:22

今日内容

零、复习昨日

一、事件
二、DOM操作
三、案例

零、复习昨日

js 脚本语言,弱类型

引入方案: 3种

js的内容:

语法
dom
bom

语法

变量 var

数据类型

引用类型 - 对象,JSON

{key:value,key:value}

数组

var arr = new Array();
var arr = [1,2];
下标取值赋值
pop() shift() push() unshift()

日期

var date = new Date()

运算

没有& , |
=== 用来判断类型和值都相等才返回true

分支+循环

函数

function m1(a,b){

return a+b;

}

一、事件

1.1 事件介绍

事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等

1.2 事件绑定方式

 <style>div{width: 200px;height: 200px;background-color: burlywood;}</style>
</head>
<body><button id="dj"><div></div></button></body><script>var sum = 0;var btn = document.getElementById("dj");btn.onclick = function(){sum++;alert("点击了"+sum);}        </script>

事件要想发生,就得将事件和标签先绑定

一个完整的事件有三部分

事件源(标签)
什么事(事件)
响应(动作效果)

事件绑定,其实就是事件和标签绑定

方式1: 事件源,事件,响应在一起
方式2: 事件源,事件在一起,响应抽取函数
方式3: 事件和响应全部抽取

方式1: 事件源,事件,响应在一起

  <body><!-- 事件源(标签),事件,响应(函数) --><!-- 方式1: 事件源,事件,响应在一起 --><!-- onclick是单击事件,是html属性 --><!-- alert() 函数就是事件的响应 --><button type="button" onclick="alert('听说你点我了?')">按钮</button></body>

方式2: 事件源,事件在一起,响应抽取函数

  <body><hr /><!-- 方式2: 事件源,事件在一起,响应抽取函数 --><button type="button" onclick="dian()">按钮</button><script>// 定义函数function dian() {alert("你又点我?!");}</script></body>

方式3【重要】: 事件和响应全部抽取

    <!-- 方式3: 事件和响应全部抽取 --><button id="btn">再点一下试试</button><script>// 1) 先获得标签对象var btn = document.getElementById("btn");// 2) 给标签对象设置事件以及响应btn.onclick = function () {alert("上瘾了是不是?!");};</script>

练习：div宽高各200,背景颜色red,设计点击事件,点击是出现弹框,并有输出语句计算,点击次数

1.3 不同事件的演示

这些事件,都是html中标签的属性,都是以onxxx开头

事件名称	描述
onchange	HTML 元素内容改变
onblur	输入框失去焦点
onfocus	输入框获得焦点
onclick	用户点击（单击）HTML 元素
ondblclick	用户双击HTML元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘弹起
onkeydown	用户按下键盘按键
onkeypress	按压键盘
onload	浏览器已完成页面的加载
onsubmit	表单提交

1.3.1 鼠标事件

    <script>var box = document.getElementById("box");// 鼠标移动,只要鼠标动,就会触发函数box.onmousemove = function () {console.log("鼠标移动");};// 鼠标移入,移入进一次,触发一次box.onmouseover = function () {console.log("鼠标移入");};// 鼠标离开box.onmouseout = function () {console.log("鼠标离开");};</script>

1.3.2 键盘事件

    <script>var i = document.getElementById("i");// 事件触发后,函数有对应的事件对象// 键盘按下i.onkeydown = function (event) {// console.log("键盘按下");// event是事件对象,内部包含事件的所有信息// console.log(event);// 可以获得这次键盘事件的代号,13是回车键if (event.keyCode == 13) {console.log("提交表单");}};// 键盘弹起i.onkeyup = function () {// console.log("键盘弹起");};// 键盘按压(与按下效果一样)i.onkeypress = function () {// console.log("键盘按压");};</script>

1.3.3 表单事件【重点】

是指表单中能用上的一系列事件

onblur 失去焦点
onfocus 获得焦点
onchange 内容改变
onsubmit 表单提交

  <body><div><!-- 因为tijiao()函数,返回有了true/false所以οnsubmit="return true" 即提交表达οnsubmit="return false" 阻止表达提交--><form accept="/java2301" onsubmit="return tijiao()">用户名<input id="i1" type="text" name="username" /><br />密码<input type="password" name="password" /><br />籍贯<select id="jiguan" name="jigaun"><option>河南</option><option>河北</option><option>北京</option></select><input type="submit" value="提交" /></form><script>var i1 = document.getElementById("i1");// 绑定获得焦点事件i1.onfocus = function () {// 将来可以通过操作DOM,获得输入框的值,也可以改变样式console.log("输入框获得焦点");};// 绑定失去焦点i1.onblur = function () {console.log("输入框失去焦点");};var jiguan = document.getElementById("jiguan");// 给下拉框绑定内容改变事件jiguan.onchange = function () {// 将来配合DOM操作,可以获得改变的内容,做一些其他事情// 可以用于省市二级联动console.log("内容改变");};/*1) 表单事件是表单form的事件,所以这个事件要绑定在form上2) 函数要返回true/false3) onsubmit中也要写return*/function tijiao() {console.log("点击提交按钮");// return 返回false,认为表达不提交// 返回true.表达就会提交// 一般用来数据校验return true;}</script></div></body>

1.3.4 加载事件【重点】

浏览器加载页面,是瀑布式加载,即从上之下依次加载执行.

  <head><title>加载事件</title><script>/*解决方案,等页面加载完后,再触发函数,执行绑定事件页面加载事件是窗口对象的事件该函数onload,会在页面加载后触发函数*/window.onload = function () {var btn = document.getElementById("btn");btn.onclick = function () {alert("试试就试试!");};};</script></head><body><button id="btn">点我一下试试?!</button></body>

二、DOM操作

2.1 概述

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pq4GefEE-1678454186311)(https://qiushiju-tuchuang.oss-cn-hangzhou.aliyuncs.com/image/dom%E6%A0%91.jpg)]

有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式

JavaScript 能够改变页面中的所有 HTML 元素。

JavaScript 能够改变页面中的所有 HTML 属性。

JavaScript 能够改变页面中的所有 CSS 样式。

JavaScript 能够对页面中的所有事件做出反应。

2.2 查找元素

查找元素(标签)有很多方式

通过id查找元素
document.getElementById(“id属性值”);
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

通过标签名查找元素
方法：getElementsByTagName(“合法的元素名”);
如果找到,返回的是数组

通过class查找元素
方法：getElementsByClassName(“class属性的值”)
如果找到,返回的是数组

  <body><!-- 给标签设置id属性,id值要唯一 --><button id="btn">按钮</button><ul><li>貂蝉</li><li>西施</li><li>王昭君</li><li>杨玉环</li><li class="xd">邓紫棋</li><li class="xd">邓丽君</li><li class="xd">张曼玉</li><li class="xd">朱茵</li></ul><script>// 方式1:通过id获得标签对象(对象是唯一)var btn = document.getElementById("btn");// console.log(btn);// 方式2:通过标签名来获得// 因为有同名,返回的是所有同名标签对象,放入数组中返回var liArr = document.getElementsByTagName("li");// console.log(liArr);for (var i = 0; i < liArr.length; i++) {// console.log(liArr[i]);}// 方式3: 通过类名获得标签对象var mvArr = document.getElementsByClassName("xd");console.log(mvArr);</script></body>

2.3 元素内容的查找和设置

元素内容,是指标签开闭之间的内容.
这就是内容
这就是内容
查找和设置使用的是相同的属性

innerHTML 获得或设置标签的内容
get === value 获得提交的信息内容
set === value 设置
innerText 获得或设置标签的内容

  <body><p id="p1"><span>你好啊,JavaScript</span></p><button id="btn1">设置innerHTML</button><button id="btn2">设置innerText</button><script>var p1 = document.getElementById("p1");// 获得内容,innerHTML获得是标签和内容var innerHTML = p1.innerHTML;console.log(innerHTML);// 获得内容,innerText获得的只是文本内容var innerText = p1.innerText;console.log(innerText);var btn1 = document.getElementById("btn1");btn1.onclick = function () {// 只能获得标签内的文本以及html元素p1.innerHTML = "<span>你好啊,李焕英</span>";};var btn2 = document.getElementById("btn2");btn2.onclick = function () {// 给p标签设置内容,内容全部解析为文本p1.innerText = "<span>你好啊,李焕英</span>";};</script></body>

2.4 元素属性的查找和设置

元素属性,是指开标签内的属性,通过dom对象直接调用操作.比如

domObj.id
domObj.name
domObj.value
…

  <body><input id="i1" class="c1" type="text" value="默认值" /><button id="btn1">点击获得属性值</button><button id="btn2">点击设置属性值</button><script>var btn1 = document.getElementById("btn1");var i1 = document.getElementById("i1");btn1.onclick = function () {// 获得属性值console.log(i1.id); // 获得id属性值console.log(i1.class); // 没有获得class属性console.log(i1.type); // 获得type属性值console.log(i1.value); // 获得value属性值【重要】};btn2.onclick = function () {// 设置属性值i1.type = "password";i1.value = "123456";  // 【重要】};</script></body>

2.5 元素CSS样式的查找和设置

元素css样式的查找和设置,是指标签中style的属性值的获得和设置

获得属性值
元素对象.style.属性

设置属性值
元素对象.style.属性 = “值”

  <body><divid="box"style="width: 200px; height: 200px; background-color: red"></div><button id="btn1">获得css样式</button><button id="btn2">设置css样式</button><script>var box = document.getElementById("box");var btn1 = document.getElementById("btn1");btn1.onclick = function () {// 获得样式,主要是style的属性值var style = box.style;// console.log(style);// 获得具体样式,可以再继续调用console.log(box.style.width);console.log(box.style.height);// 有连字符的,要去掉,后面首字母变大写console.log(box.style.backgroundColor);};var btn2 = document.getElementById("btn2");btn2.onclick = function () {// 设置box样式,尺寸越来越大// 获得原来的尺寸var width = box.style.width; // 200pxvar height = box.style.height;// 获得宽度,截取数值// var newWidth = width.substring(0, width.length - 2);// 自带属性获得不带px的宽度var newWidth2 = box.clientWidth;var newHeight = box.clientHeight;// 设置尺寸box.style.width = newWidth2 + 10 + "px";box.style.height = newHeight + 10 + "px";// 只能获得,不能这样设置!// box.clientWidth = newWidth2 + 10;// box.clientHeight = newHeight + 10;};</script></body>

2.6 操作元素

如需向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

创建元素：document.createElement()

追加元素：appendChild()

创建出一个文本内容,这个内容是值开闭标签间的文本内容

document.createTextNode(“文本内容”);

删除已有的 HTML 元素,使用方法：removeChild()

  <body><button id="btn">点击时创建p标签,以及内容</button><div id="box"></div><script>var btn = document.getElementById("btn");btn.onclick = function () {// 创建元素pvar p = document.createElement("p"); // <p></p>// 创建文本内容var text = document.createTextNode("你好啊,Java"); // 你好啊,Java// 在p标签内,追加文本p.appendChild(text); // <p>你好啊,Java</p>var box = document.getElementById("box");// 把内容追加到div中box.appendChild(p);};</script></body>

2.9 删除元素

删除子节点

元素对象.removeChild(子元素);

  <body><ul id="ul"><li>刘德华</li><li>吴彦祖</li><li>彭于晏</li></ul><button id="btn">点击删除子元素</button><script>var btn = document.getElementById("btn");btn.onclick = function () {// 获得父元素var ul = document.getElementById("ul");// 获得所有li元素var liArr = document.getElementsByTagName("li");// 遍历for (var i = 0; i < liArr.length; i++) {// 通过父元素,删除子元素ul.removeChild(liArr[i]);i--; //下标回退}};</script></body>

2.10 改变HTML

改变HTML输出流：document.write() 可用于直接向 HTML 输出流写内容

<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello world,I'm JavaScript");
</script>
</body>
</html>

三、案例

练习1

输入框,点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失

事件: 获得焦点,失去焦点

要设置css样式

    <!-- 点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失 --><input id="i1" /><script>var i1 = document.getElementById("i1");i1.onfocus = function () {i1.style.height = "300px";i1.style.width = "300px";// i1.style.borderColor = "blue";i1.style.border = "30px yellow solid";i1.style.backgroundColor = "red";};i1.onblur = function () {i1.style.height = "";i1.style.width = "";i1.style.border = "";i1.style.backgroundColor = "";// 重置样式i1.style = "reset";// i1.style = "";};</script></body>

设置div,高300宽300,鼠标进入div,div背景变红,离开div背景变绿

  <divid="box"style="width: 300px; height: 300px; border: 2px red solid"></div><script>var box = document.getElementById("box");// 鼠标进入div,div背景变红,离开div背景变绿box.onmouseover = function () {box.style.backgroundColor = "red";};box.onmouseout = function () {box.style.backgroundColor = "green";};
</script>

练习: 设置输入框,输入内容,点击按钮,将内容追加到div后

  <body>请输入内容:<input id="i1" /><button id="btn">追加内容</button><div id="box"></div><script>var btn = document.getElementById("btn");btn.onclick = function () {// 获得输入框的内容var text = document.getElementById("i1").value;// 创建p标签var p = document.createElement("p");// 创建文本节点var textNode = document.createTextNode(text);// 追加内容p.appendChild(textNode);// 给div追加内容var box = document.getElementById("box");box.appendChild(p);document.getElementById("i1").value = "";};</script></body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztKOtCgG-1678454186312)(D:\前锋学习笔记\笔记\image-20230310172209152.png)]

JS学习笔记day04

今日内容零、复习昨日一、事件二、DOM操作三、案例零、复习昨日 js 脚本语言,弱类型引入方案: 3种 js的内容: 语法dombom 语法变量 var 数据类型引用类型 - 对象,JSON {key:value,key:value} 数组 var arr new Array();var arr [1,2];下标取值赋值pop() s…...

编程日记 2023/3/11 8:48:09

异步控制流程遍历篇

文章目录基础方法onlyOnce 只执行一次，第二次报错once 只执行一次，第二次无效iteratorSymbol 判断是否具有迭代器并返回迭代器arrayEach 普通数组遍历baseEach 对象类型遍历symbolEach 具有迭代器类型遍历异步遍历each异步控制流程的目的： 对…...

编程日记 2023/3/11 8:47:04

ICASSP 2023论文模型开源｜语音分离Mossformer

人类能在复杂的多人说话环境中轻易地分离干扰声音，选择性聆听感兴趣的主讲人说话。但这对机器却不容易，如何构建一个能够媲美人类听觉系统的自动化系统颇具挑战性。本文将详细解读ICASSP2023本届会议收录的单通道语音分离模型Mossformer论文&#xff0…...

编程日记 2023/3/11 8:46:00

vs2019 更改工程项目名称

本地解决方案所在的位置为：D:\Projcet 解决方案名称：hello.sln 位置：D:\Projcet\hello.sln 工程项目名称：test 位置：D:\Projcet\test (文件夹中包含头文件，源文件) 工程包含的文件： fun.h …...

编程日记 2023/3/11 8:44:56

1. 先去华为官网下载FusionCompute的镜像下载地址：https://support.huawei.com/enterprise/zh/distributed-storage/fusioncompute-pid-8576912/software/251713663?idAbsPathfixnode01%7C22658044%7C7919788%7C9856606%7C21462752%7C8576912 下载后放在D盘中&am…...

编程日记 2023/3/11 8:43:51

makefile 参数和基本使用

make 常用选项make[-f file] [options] [target]make 默认在当前目录中查找GUNmakefile、makefile 及 Makefile 文件作为make的输入文件-f 指定文件作为输入文件-v 显示版本号-n 只输出命令不执行， 一般作为测试-s 执行命令不显示命令，-w 显示执行前和执…...

编程日记 2023/3/11 8:42:49

golang 占位符还傻傻分不清？

xdm ，写 C/C 语言的时候有格式控制符，例如 %s , %d , %c , %p 等等在写 golang 的时候，也是有对应的格式控制符，也叫做占位符，写这个占位符，需要有对应的数据与之对应，不能瞎搞基本常见常用…...

编程日记 2023/3/11 8:41:46

manacher算法详解

例题求一个字符串的最长回文子串的长度 O(N2)O(N^2)O(N2)的解法很容易想，就是从每个字符位置向左右同时拓展，然后检查当前是不是回文，更新长度，可以简单写一下代码 int solve(string &ss){int ans 0;int n ss.length();s…...

编程日记 2023/3/11 8:40:40

要做一个关于DDD的内部技术分享，记录下用到的资源，学习笔记（未完）

最后更新于2023年3月10日 14:28:08 问题建模》软件分层》具体结构，是层层递进的关系。有了问题建模，才能进行具体的软件分层的讨论，再有了分层，才能讨论在domain里面应该怎么实现具体结构。 1、问题建模：Domain、Mod…...

编程日记 2023/3/11 8:39:35

KDZD互感器二次负载测试仪

一、概述电能计量综合误差过大是电能计量中普遍存在的一个关键问题。电压互感器二次回路压降引起的计量误差往往是影响电能计量综合误差的因素。所谓电压互感器二次压降引起的误差，就是指电压互感器二次端子和负载端子之间电压的幅值差相对于二次实际电压的百分数…...

编程日记 2023/3/11 8:38:31

在空投之后，Blur能否颠覆OpenSea的主导地位？

Mar. 2023, Daniel数据源： NFT Aggregators Overview & Aggregator Statistics Overview & Blur Airdrop一年前，通过聚合器进行的NFT交易量开始像滚雪球一样增长，有时甚至超过了直接通过市场平台的交易量。虽然聚合器的使用量从10月到…...

编程日记 2023/3/11 8:37:29

2023年新三板产品及服务研究报告

第一章概述全国中小企业股份转让系统（英语：National Equities Exchange and Quotations，缩写NEEQ），简称股转系统，是第三家全国性证券交易场所，因挂牌企业均为高科技企业而不同于原转让系统内…...

编程日记 2023/3/11 8:36:25

张力控制之开环模式

张力控制的相关知识也可以参看专栏的其它文章，链接如下：张力闭环控制之传感器篇（精密调节气阀应用）_RXXW_Dor的博客-CSDN博客跳舞轮对应张力调节范围，我们可以通过改变气缸的气压方式间接改变，张力跳舞轮在收放卷闭环控制上的详细应用，可以参看下面的文章链接，这里我…...

编程日记 2023/3/11 8:35:22

python的django框架从入门到熟练【保姆式教学】第二篇

在上一篇博客中，我们介绍了Django的基础知识，并创建了一个简单的Web应用程序。在本篇教程中，我们将深入探讨Django的模型层（Model），它是Django应用程序的核心组件之一。模型层 Django的模型层是一个对象…...

编程日记 2023/3/11 8:34:13

解决win10的过度保护导致文件下载不了程序不能打开运行

win7看来大概是要离我们远去了，虽然我们还能看见她的背影，但大势所趋，我们也只能慢慢的接受win10进入到我们的日常生活。但win10很多时候过度的保护却给我们带来了不便。这里列举两个最常见的问题，当然我这里也给出了解决方案。文…...

编程日记 2023/3/11 8:33:11

扬帆优配|业务量大突破，这个行业发展明显向好

近期上市的新股，大都在招股阐明书里公布了本年第一季度成绩预告。我国快递事务量本年已达200亿件国家邮政局监测数据显现，到3月8日，本年我国快递事务量已到达200.9亿件，比2019年到达200亿件提前了72天，比2022年提前…...

编程日记 2023/3/11 8:32:06

DJ1-4 计算机网络和因特网

目录一、协议层及其服务模型 ISO/OSI 七层参考模型 TCP/IP 参考模型 1. 网际协议栈（protocol stack） 2. 分层：逻辑通信 3. 协议分层与数据二、攻击威胁下的网络 1. 植入恶意软件 2. 攻击服务器和网络基础设施 3. 嗅探分组 4. 伪…...

编程日记 2023/3/11 8:31:03

Nginx根据$host及请求的URI规则重定向rewrite

项目背景： 将域名请求从默认的80端口转发到443 ssl。本项目特殊之处是一个端口监听多个域名，某些域名还有跳转到特定的地址。普通情况： server { listen 80; #默认的80端口，非…...

编程日记 2023/3/11 8:29:59

人工智能实验一：使用搜索算法实现罗马尼亚问题的求解

1.任务描述本关任务： 了解有信息搜索策略的算法思想；能够运用计算机语言实现搜索算法；应用A*搜索算法解决罗马尼亚问题； 2.相关知识 A*搜索算法介绍 A*算法常用于二维地图路径规划，算法所采用的启发式搜索可以…...

编程日记 2023/3/11 8:28:55

Spring Security基础入门

基础概念什么是认证认证：用户认证就是判断一个用户的身份身份合法的过程，用户去访问系统资源的时候系统要求验证用户的身份信息，身份合法方可继续访问，不合法则拒绝访问。常见的用户身份认证方式有：用户密码登录&am…...

编程日记 2023/3/11 8:27:51

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章传送阵>> 点我查看说明：假设每台服务器已…...

编程新知 2025/7/4 19:22:07

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2025/7/4 10:58:42

无法与IP建立连接，未能下载VSCode服务器

如题，在远程连接服务器的时候突然遇到了这个提示。查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/7/2 14:54:02

JVM垃圾回收机制全解析

Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/6/23 2:48:54

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2025/7/4 6:55:45

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r，求圆的面积。圆的面积应精确到小数点后5位。例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。输…...

编程新知 2025/7/4 9:41:01

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种低级字节码格式，可由高级语言（如 C、C、Rust&am…...

编程新知 2025/7/4 5:42:13

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用引言随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...

编程新知 2025/7/1 17:17:43

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库（如 Redisson）相比于开发者自己基于 Redis 命令（如 SETNX, EXPIRE, DEL）手动实现分布式锁，提供了巨大的便利性和健壮性。主要体现在以下几个方面： 原子性保证 (Atomicity)&#xff…...

编程新知 2025/6/20 16:41:45

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。一、负载模块基本结构一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/6/21 12:54:36

今日内容

零、 复习昨日

零、 复习昨日

一、事件

1.1 事件介绍

1.2 事件绑定方式

1.3 不同事件的演示

1.3.1 鼠标事件

1.3.2 键盘事件

1.3.3 表单事件【重点】

1.3.4 加载事件【重点】

二、DOM操作

2.1 概述

2.2 查找元素

2.3 元素内容的查找和设置

2.4 元素属性的查找和设置

2.5 元素CSS样式的查找和设置

2.6 操作元素

2.9 删除元素

2.10 改变HTML

三、案例

相关文章：

零、复习昨日

零、复习昨日