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

JS（JavaScript）入门指南（DOM、事件处理、BOM、数据校验）

news 2025/11/6 0:12:15

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

玉阶生白露，夜久侵罗袜。
却下水晶帘，玲珑望秋月。
——《玉阶怨》

文章目录

  • 一、DOM操作
    • 1. DOM介绍
    • 2. 查询操作
      • 2.1 查询方法
      • 2.2 查询示例
        • 2.2.1 根据id获取dom
          • 2.2.1.1 示例
          • 2.2.1.2 结果
        • 2.2.2 根据tag获取dom
          • 2.2.2.1 示例
          • 2.2.2.2 结果
        • 2.2.3 根据css样式获取dom
          • 2.2.3.1 示例
          • 2.2.3.2 结果
        • 2.2.4 根据已有节点获取其他节点dom
          • 2.2.4.1 示例
          • 2.2.4.2 结果
      • 2.3 查询示例代码汇总
    • 3. 访问和修改操作
      • 3.1 访问和修改属性
        • 3.1.1 语法
        • 3.1.2 示例代码
        • 3.1.3 浏览器输出
      • 3.2 访问和修改内容
        • 3.2.1 语法
        • 3.1.2 示例代码
        • 3.1.3 浏览器输出
      • 3.3 访问和修改css
        • 3.3.1 语法
        • 3.3.2 示例代码
        • 3.3.3 浏览器输出
    • 4. 添加替换操作
      • 4.1 示例代码
      • 4.2 效果展示
        • 4.2.1 添加
        • 4.2.2 指定位置添加
        • 4.2.3 替换
    • 5. 删除操作
      • 5.1 示例代码
      • 5.2 效果演示
        • 5.2.1 remove方法删除
        • 5.2.2 removeChild方法删除
    • 6. 趣味案例
      • 6.1 效果图
      • 6.2 搜索引擎的参数获取
        • 6.2.1 百度的参数获取
        • 6.2.2 搜狗的参数获取
        • 6.2.3 360的参数获取
      • 6.3 示例代码
      • 6.4 效果演示
  • 二、事件处理
    • 1. 事件简介
      • 1.1 事件的定义
      • 1.2 事件源
      • 1.3 事件对象
      • 1.4 事件监听
    • 2. 事件的绑定
      • 2.1 静态绑定
      • 2.2 动态绑定
      • 2.3 注意事项
    • 3. 常用事件
      • 3.1 鼠标事件
        • 3.1.1 事件列举
        • 3.1.2 示例代码
        • 3.1.2 页面展示
      • 3.2 键盘事件
        • 3.2.1 事件列举
        • 3.2.2 示例代码
        • 3.2.3 页面效果
      • 3.3 表单事件
        • 3.3.1 事件列举
        • 3.3.2 示例代码
        • 3.3.3 页面效果
    • 4. 事件操作
      • 4.1 事件冒泡
        • 4.1.1 定义
        • 4.1.2 特点
        • 4.1.3 语法
        • 4.1.4 示例代码
        • 4.1.5 页面效果
      • 4.2 事件默认行为
        • 4.2.1 定义
        • 4.2.2 语法
        • 4.2.3 示例代码
        • 4.2.4 页面效果
    • 5. 下拉列表
      • 5.1 Select
        • 5.1.1 属性
        • 5.1.2 方法
        • 5.1.3 事件
      • 5.2 Option
        • 5.2.1 属性
        • 5.2.2 构造函数
    • 6. 事件处理趣味实例
      • 6.1 创建表格
        • 6.1.1 示例代码
        • 6.1.2 页面效果
      • 6.2 创建表单
        • 6.2.1 示例代码
        • 6.2.2 页面效果
      • 6.3 添加样式
        • 6.3.1 示例代码
        • 6.3.2 页面效果
      • 6.4 表格中的事件绑定
        • 6.4.1 示例代码
        • 6.4.2 页面效果
      • 6.5 表单中的事件绑定
        • 6.5.1 示例代码
        • 6.5.2 页面效果
      • 6.6 复选框功能实现
        • 6.6.1 示例代码
        • 6.6.2 页面效果
      • 6.7 示例代码下载
  • 三、BOM操作
  • 四、数据校验
  • 五、示例代码下载

JS（JavaScript）入门指南
JS（JavaScript）学习专栏

一、DOM操作

1. DOM介绍

DOM全称为dom document object model 文档对象模型

  • dom树
    浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树

html文档和dom树是一一对应的
dom树被改变时，与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时，可以使用dom进行操作
dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档

2. 查询操作

查询就是获取dom对象

2.1 查询方法

查询的方法和含义如下表

方法或属性含义
document.getElementById(“id”)根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName(“name”)根据name属性查询，并返回所有匹配的节点集合
document.getElementsByTagName(“tagName”)根据标签名来查询，返回所有匹配的节点集合
documnet.querySelector(“selector”)根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“selector”)根据css选择器来查询，返回所有匹配的节点集合
parentNode属性查询当前节点的父节点
previous Sibing属性查询当前节点的上一个节点
nextSibing属性查询当前节点的下一个节点
firstChild属性查询当前节点的第一个子节点
lastChild属性查询当前节点的最后一个子节点

2.2 查询示例

示例代码共分为以下几种：根据id获取dom对象、根据标签tag获取dom对象、根据css样式获取dom对象、根据已有节点获取其他节点dom对象

2.2.1 根据id获取dom

根据id获取dom对象方法：document.getElementById(“id”)

2.2.1.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据id获取dom对象");//根据id获取dom对象，返回单个值var objDiv = document.getElementById("d1");//获取对象的类型console.log(typeof objDiv);//打印对象console.log(objDiv);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><div id="d1" class="c">hello!</div></body>
</html>
2.2.1.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.2.2 根据tag获取dom

根据标签tag获取dom对象，示例如下

2.2.2.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据name获取dom对象");//根据name获取dom对象，返回数组var objDivs = document.getElementsByName("hobby");//获取对象的类型console.log(typeof objDivs);//打印对象console.log(objDivs);//遍历数组对象for(var index in objDivs){console.log(objDivs[index])}}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()">hobbies:<input type="checkbox" value="eat" name="hobby">吃饭<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="kingplay" name="hobby">打王者name:       <input type="text" name="username"></body>
</html>
2.2.2.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述
浏览器控制台输出如下
在这里插入图片描述

2.2.3 根据css样式获取dom

通过css样式style获取dom对象

2.2.3.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据css选择器获取单个dom对象");//根据css选择器获取单个dom对象var objCss = document.querySelector("#d1");console.log(objCss);//根据css选择器，使用标签获取对象，只会取第一个input标签的对象var objCss2 = document.querySelector("input");console.log(objCss2);//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象var objCss3 = document.querySelector(".c");console.log(objCss3);//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss4 = document.querySelector("p.c");console.log(objCss4);//根据css选择器获取多个dom对象//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss5 = document.querySelectorAll(".c");console.log(objCss5);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><div id="d1" class="c">hello!</div><div id="d2" class="c">world!</div><p class="c">test</p></body>
</html>
2.2.3.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.2.4 根据已有节点获取其他节点dom

根据已有节点获取其他节点的dom对象，示例如下

2.2.4.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);//根据已有节点获取其他节点var objId = document.getElementById("id-du");//获取li标签的父类标签的对象console.log(objId.parentNode);//获取指定标签的上一个同级标签console.log(objId.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling);//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值//如果有text类型的值，则需要取两次才能取到//获取指定标签的上一个同级标签console.log(objId.previousSibling.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling.nextSibling);//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容console.log(objId.parentNode.firstChild);//获取当前节点下子节点的最后一个节点console.log(objId.parentNode.lastChild);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><ul>a<li id="id-li">李白</li><li id="id-du">杜甫</li><li>王维</li><li>杜牧</li>b</ul></body>
</html>
2.2.4.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.3 查询示例代码汇总

以上方法的示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-查询</title><script>function query(){console.log(12345);console.log("根据id获取dom对象");//根据id获取dom对象，返回单个值var objDiv = document.getElementById("d1");//获取对象的类型console.log(typeof objDiv);//打印对象console.log(objDiv);console.log("根据name获取dom对象");//根据name获取dom对象，返回数组var objDivs = document.getElementsByName("hobby");//获取对象的类型console.log(typeof objDivs);//打印对象console.log(objDivs);//遍历数组对象for(var index in objDivs){console.log(objDivs[index])}console.log("根据tag获取dom对象");//根据tag标签名获取dom对象var objIput = document.getElementsByTagName("input");for(var index in objIput){console.log(objIput[index]);}console.log("根据css选择器获取单个dom对象");//根据css选择器获取单个dom对象var objCss = document.querySelector("#d1");console.log(objCss);//根据css选择器，使用标签获取对象，只会取第一个input标签的对象var objCss2 = document.querySelector("input");console.log(objCss2);//根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象var objCss3 = document.querySelector(".c");console.log(objCss3);//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss4 = document.querySelector("p.c");console.log(objCss4);//根据css选择器获取多个dom对象//根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象var objCss5 = document.querySelectorAll(".c");console.log(objCss5);//根据已有节点获取其他节点var objId = document.getElementById("id-du");//获取li标签的父类标签的对象console.log(objId.parentNode);//获取指定标签的上一个同级标签console.log(objId.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling);//注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值//如果有text类型的值，则需要取两次才能取到//获取指定标签的上一个同级标签console.log(objId.previousSibling.previousSibling);//获取指定标签的下一个同级标签console.log(objId.nextSibling.nextSibling);//获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容console.log(objId.parentNode.firstChild);//获取当前节点下子节点的最后一个节点console.log(objId.parentNode.lastChild);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><div id="d1" class="c">hello!</div><div id="d2" class="c">world!</div><p class="c">test</p>hobbies:<input type="checkbox" value="eat" name="hobby">吃饭<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="kingplay" name="hobby">打王者name:       <input type="text" name="username"><ul>a<li id="id-li">李白</li><li id="id-du">杜甫</li><li>王维</li><li>杜牧</li>b</ul></body>
</html>

使用浏览器打开，点击获取页面中的元素
在这里插入图片描述

控制台输出如下
在这里插入图片描述

3. 访问和修改操作

访问和修改操作包括：访问和修改属性、访问和修改内容、访问和修改样式

3.1 访问和修改属性

即获取或者设置dom对象的属性
dom对象的属性和html标签的属性几乎是一样的，一般情况下dom对象都会存在一个与对应html标签同名的属性

3.1.1 语法

访问用法如下

dom对象.属性

修改用法如下

dom对象.属性=值
3.1.2 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-访问和修改</title><script>// 1 访问属性function getProperty(){let obj = document.getElementById("baidu");//获取超链接的href属性值console.log(obj.href);//获取超链接的target属性值console.log(obj.target);//获取指定对象的内容let objs = document.getElementById("username");console.log(objs.value);//获取指定对象的是否选中值，这里的checked返回的是false或ture，选中为truelet obj3 = document.getElementById("male");console.log(obj3.checked);//设置属性值//将超链接百度的地址修改为别的，设置后刷新页面，点访问属性然后再点链接即可跳转到新的网址obj.href = "https://blog.csdn.net/mo_sss";//将跳转规则修改为当前页面跳转obj.target = "_self";//修改性别单选值的默认选项，将男性该位默认obj3.checked = "true";}</script></head>
<body><!-- 1 访问属性 --><br><br><br><!-- 定义按钮，绑定事件，点击后触发事件，执行函数 --><input type="button" value="访问属性" onclick="getProperty()"><br><!-- <hr> --><br><a href="https://www.baidu.com" target="_blank" id="baidu">baidu</a><br><br><br>username: <input type="text" name="username" id="username">sex: <input type="radio" name="sex" value="male" id="male">男<input type="radio" name="sex" value="female" id="female" checked>女<br><br><br></body>
</html>
3.1.3 浏览器输出

使用浏览器打开，点以下访问属性，可以看到默认勾选的女已经换成了男
在这里插入图片描述
控制台输出如下，可以看到dom对象的参数输出
在这里插入图片描述

3.2 访问和修改内容

即获取或设置标签中的内容
两种方式：使用innerHTML、使用innerText

3.2.1 语法

访问用法如下，将内容解析为HTML

dom对象.innerHTML

或，将内容作为纯文本

dom对象.innerText

修改值用法如下

dom对象.innerHTML = "内容"

或

dom对象.innerText = "内容"
3.1.2 示例代码

相关示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-访问和修改</title><script>// 2 访问内容function getContent(){var obj = document.getElementById("d11");//获取指定标签的内容//获取标签内的所有内容，包括标签、空格和换行符等console.log(obj.innerHTML);//只获取标签内的文本内容console.log(obj.innerText);//设置内容//设置标签内的内容，使用innerTEXT只能设置文本内容obj.innerText = "同居长干里，两小无嫌猜。";console.log(obj.innerText);//设置标签内的内容，使用innerHTML可设置标签等特殊内容obj.innerHTML = "<h2>朝如青丝暮成雪</h2>";console.log(obj.innerHTML);}</script></head>
<body><!-- 2 访问内容 --><br><hr><!-- 定义按钮，绑定事件，点击后触发事件，执行函数 --><input type="button" value="访问内容" onclick="getContent()"><br><br><br><div id="d11">高堂明镜悲白发</div></body>
</html>
3.1.3 浏览器输出

使用浏览器打开，
在这里插入图片描述

点一下访问内容，内容修改为
在这里插入图片描述

控制台输出如下
在这里插入图片描述

3.3 访问和修改css

即获取或设置css样式
两种方式：使用style属性、使用className属性

3.3.1 语法

访问css用法如下
使用style属性用法

dom对象.style.样式属性

使用className属性用法

dom对象.className

注意：
如果css属性中又短横线-，需要去掉短横线，然后将其后的单词首字母改成大写
对象标签中的class，需要使用className访问

修改css用法如下
使用style属性用法

dom对象.style.样式属性 = "值"

使用className属性用法

dom对象.className = "值"
3.3.2 示例代码

相关示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM操作-访问和修改</title><script>// 3 访问CSSfunction getStyle(){var obj = document.getElementById("d22");//获取CSS样式的宽度console.log(obj.style.width);//获取CSS样式的字体大小，这里需要注意，样式的键带短杠的需要将短杠去掉将短杠后的首字母大写console.log(obj.style.fontSize);//获取CSS样式的字体console.log(obj.style.fontFamily);//获取CSS样式的左上角的半角像素console.log(obj.style.borderTopLeftRadius);//设置CSS样式的值obj.style.background = "lightgreen";// console.log(obj.style.borderTopLeftRadius);//另一种访问CSS的方式，className方式，需要配合CSS样式标签<style>var obj2 = document.getElementById("d33");//获取标签的class值console.log(obj2.className);//设置样式标签中class属性的值，设置后，调用该函数后样式即可被修改，这里需要注意，对象没有标签中的class，需要使用className访问obj2.className = "c11";//获取CSS样式的宽度console.log(obj2.style.width);}</script><style>/* 原始的样式 */.ccc{background: brown;font-size: 30px;}/* 修改后的样式 在函数中调用修改样式 */.c11{width: 150px;height: 20px;background: red;font-size: 10px;}</style>
</head>
<body><!-- 3 访问css --><br><hr><!-- 定义按钮，绑定事件，点击后触发事件，执行函数 --><input type="button" value="访问CSS" onclick="getStyle()"><br><br><br><div id="d22" style="width: 1000px; height: 40px; background: lightblue; font-size: 30px; font-family: 'Courier New', Courier

相关文章：

JS（JavaScript）入门指南（DOM、事件处理、BOM、数据校验）

天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 玉阶生白露，夜久侵罗袜。 却下水晶帘，玲珑望秋月。 ——《玉阶怨》 文章目录 一、DOM操作1. D…...

编程日记 2024/6/27 7:36:03

江协科技51单片机学习- p16 矩阵键盘

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…...

编程日记 2024/6/27 7:34:01

grpc学习golang版（ 四、多服务示例）

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 文章目录 一、前言二、定义proto文件三、编写server服务端四、编写Client客户端五、测试六、示例代码 一、前言 多服务&#xff0c;即一个rpc提供多个服务给外界调用…...

编程日记 2024/6/27 7:33:00

Linux安装jdk17

我们进入到cd /usr/lib/下然后创建一个jdk17的文件夹 mkdir jdk17 进入到jdk17目录下 下载jdk17包 上传到Linux 解压jar包 tar -zxvf jdk-17_linux-x64_bin.tar.gz压解完毕后 配置环境变量 vim/etc/profilei 修改 esc 退出 :wq保存 export JAVA_HOME/usr/lib/jdk17/jdk-1…...

编程日记 2024/6/27 7:31:58

Java家教系统小程序APP公众号h5源码

让学习更高效&#xff0c;更便捷 &#x1f31f; 引言&#xff1a;家教新选择&#xff0c;小程序来助力 在快节奏的现代生活中&#xff0c;家长们越来越注重孩子的教育问题。然而&#xff0c;如何为孩子找到一位合适的家教老师&#xff0c;成为了许多家长头疼的问题。现在&…...

编程日记 2024/6/27 7:30:57

PHP入门

一、环境搭建 无脑&#xff1a; 小皮面板(phpstudy) - 让天下没有难配的服务器环境&#xff01;phpStudy官网2019正式推出phpStudy V8.0版本PHP集成环境&#xff0c;支持Windows与Linux系统&#xff0c;支持WEB面板操作管理&#xff0c;一键网站开发环境搭建配置&#xff0c;…...

编程日记 2024/6/27 7:29:55

docker ce的使用介绍

docker docker17.03以后 docker ce&#xff0c;社区免费版&#xff0c;vscode的docker插件使用的该版本&#xff08;默认windows只支持windows容器&#xff0c;linux支持linux容器&#xff09;docker ee&#xff0c;企业版本 docker17.03以前 docker toolbox&#xff0c;基于…...

编程日记 2024/6/27 7:24:50

SpringCloud Alibaba Sentinel 流量控制之流控模式实践总结

官网文档&#xff1a;https://sentinelguard.io/zh-cn/docs/flow-control.html wiki地址&#xff1a;https://github.com/alibaba/Sentinel/wiki/%E6%B5%81%E9%87%8F%E6%8E%A7%E5%88%B6 本文版本&#xff1a;spring-cloud-starter-alibaba&#xff1a;2.2.0.RELEASE 如下图所…...

编程日记 2024/6/27 7:23:49

【高考志愿】电子科学与技术

高考志愿选择电子科学与技术专业&#xff0c;无疑是向着科技创新的前沿迈出坚定步伐的明智之选。这一专业以其深厚的理论基础、前沿的技术应用和广泛的就业前景&#xff0c;吸引了众多有志于投身科技领域的学子。 首先&#xff0c;电子科学与技术专业所涵盖的内容丰富而深入。它…...

编程日记 2024/6/27 7:22:48

2024.06.26【读书笔记】|医疗科技创新流程（前言）【AI增强版】

目录 《BIODESIGN》第二版前言详细总结前言概述新增重要内容价值导向 (Value Orientation)全球视角 (Global Perspectives)更好的教学和学习方法 (Better Ways to Teach and Learn)全新视频集合 (New Videos)扩展的“实地”案例研究 (Expanded “From the Field” Case Studies…...

编程日记 2024/6/27 7:20:46

kubernetes Job yaml文件解析

一、yaml文件示例 apiVersion: batch/v1 kind: Job metadata:name: test-jobnamespace: mtactor spec:completions: 3parallelism: 1backoffLimit: 5activeDeadlineSeconds: 100template:spec:containers:- name: test-jobimage: centoscommand: ["echo","test…...

编程日记 2024/6/27 7:19:45

php goto解密脚本源码

php goto解密脚本源码 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/89426171 更多资源下载&#xff1a;关注我。...

编程日记 2024/6/27 7:17:43

2023: 芒种集•序言

2023: 芒种集•序言 2023: 芒种集•序言 从西南旅游回来&#xff0c;一直忙着整理游记“2024&#xff1a;追寻红色足迹”&#xff0c;之后又应初建平索要刘桂蓉遗作“我们一起走过”&#xff0c;于是把“别了&#xff0c;老屋”和诗作“二月”一并合编&#xff0c;把我写的悼念…...

编程日记 2024/6/27 7:15:41

Camera定制修改

需求&#xff1a; Android13 MtkCamera右上角的前后摄切换点击范围小导致经常点击无反应&#xff0c;需增大view宽度 跟踪代码可找到对应资源文件&#xff1a;vendor\mediatek\proprietary\packages\apps\Camera2\feature\setting\cameraswitcher\res\ 根据vendor\mediatek\…...

编程日记 2024/6/27 7:13:38

LeetCode 算法：验证二叉搜索树 c++

原题链接&#x1f517;&#xff1a;验证二叉搜索树 难度&#xff1a;中等⭐️⭐️ 题目 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左 子树 只包含 小于 当前节点的数。节点的右子树只包含 大于…...

编程日记 2024/6/27 7:11:36

SpringBoot优点达项目实战：获取系统配置接口（三）

SpringBoot优点达项目实战&#xff1a;获取系统配置接口&#xff08;二&#xff09; 文章目录 SpringBoot优点达项目实战&#xff1a;获取系统配置接口&#xff08;二&#xff09;1、查看接口2、查看数据库3、代码实现1、创建实体类SysConfig2、创建返回数据的vo3、创建control…...

编程日记 2024/6/27 7:10:35

【C语言】字符/字符串+内存函数

目录 Ⅰ、字符函数和字符串函数 1 .strlen 2.strcpy 3.strcat 4.strcmp 5.strncpy 6.strncat 7.strncmp 8.strstr 9.strtok 10.strerror 11.字符函数 12. 字符转换函数 Ⅱ、内存函数 1 .memcpy 2.memmove 3.memcmp Ⅰ、字符函数和字符串函数 1 .strlen 函数原型&#xff1a;…...

编程日记 2024/6/27 7:07:32

上下文管理器在Python中的妙用

更多Python学习内容&#xff1a;ipengtao.com Python上下文管理器是一个非常强大的工具&#xff0c;它能够帮助开发者在特定代码块前后自动执行特定的操作&#xff0c;常用于资源管理&#xff0c;如文件操作、数据库连接和锁定等。本文将详细介绍Python上下文管理器的概念、使用…...

编程日记 2024/6/27 7:06:31

【PWN · TcachebinAttack | UAF】[2024CISCN · 华中赛区] note

一道简单的tcache劫持 一、题目 二、思路 存在UAF&#xff0c;libc版本2.31&#xff0c;经典菜单题 1.通过unsorted-bin-attack来leak-libc 2.通过uaf打tcache-bin-attack劫持__free_hook实现getshell 三、EXP from pwn import * context(archamd64,log_leveldebug)ioproce…...

编程日记 2024/6/27 7:02:26

Java数据脱敏

数据脱敏 敏感数据在存储过程中为是否为明文, 分为两种 落地脱敏: 存储的都是明文, 返回之前做脱敏处理不落地脱敏: 存储前就脱敏, 使用时解密, 即用户数据进入系统, 脱敏存储到数据库中, 查询时反向解密 落地脱敏 这里指的是数据库中存储的是明文数据, 返回给前端的时候脱…...

编程日记 2024/6/27 6:59:23

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/11/5 11:29:08

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/11/5 22:32:32

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/11/5 19:28:37

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/11/1 16:04:43

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/11/3 23:52:34

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/11/4 18:34:34

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/10/30 5:11:46

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/11/2 3:43:40