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

JavaScript学习教程，从入门到精通，jQuery 单击页面显示自定义动画、元素删除操作、随机抽奖、随机选图并放大语法知识点（37）

news 来源：原创 2025/8/22 4:52:22

jQuery 单击页面显示自定义动画、元素删除操作、随机抽奖、随机选图并放大语法知识点

1. jQuery 基础语法

1.1 引入 jQuery

在使用 jQuery 之前，需要先引入 jQuery 库。可以通过 CDN 引入，也可以下载到本地使用。

<!-- 通过 CDN 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

1.2 基本语法结构

jQuery 的基本语法结构为：

$(selector).action();

$ 符号：定义 jQuery。
selector：选择器，用于选取 HTML 元素。
action()：对选取的元素执行的操作。

1.3 文档就绪函数

确保在 DOM 完全加载后再执行 jQuery 代码。

$(document).ready(function(){// jQuery 代码
});

或使用简写：

$(function(){// jQuery 代码
});

2. 单击事件处理

2.1 `.click()` 方法

用于为元素绑定单击事件。

$("button").click(function(){alert("按钮被点击了！");
});

2.2 `.on()` 方法

更灵活的事件绑定方式，支持多个事件。

$("button").on("click", function(){alert("按钮被点击了！");
});

2.3 示例

<!DOCTYPE html>
<html>
<head><title>jQuery 单击事件示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").text("按钮被点击了！");});});</script>
</head>
<body><button>点击我</button><p>等待点击...</p>
</body>
</html>

3. 动态显示/隐藏元素

3.1 `.show()` 和 `.hide()` 方法

用于显示和隐藏选定的元素。

$("button").click(function(){$("p").toggle(); // 切换显示/隐藏
});

3.2 `.toggle()` 方法

切换元素的显示和隐藏状态。

3.3 示例

<!DOCTYPE html>
<html>
<head><title>显示/隐藏元素示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){$("#toggleBtn").click(function(){$("#toggleText").toggle();});});</script>
</head>
<body><button id="toggleBtn">切换显示/隐藏</button><p id="toggleText">这是一个可切换显示的段落。</p>
</body>
</html>

4. 自定义动画

4.1 `.animate()` 方法

用于创建自定义动画效果。

$("button").click(function(){$("div").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'}, 1000); // 持续时间为1秒
});

4.2 示例

<!DOCTYPE html>
<html>
<head><title>自定义动画示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>#animateDiv {width: 100px;height: 100px;background-color: lightblue;position: relative;}</style><script>$(document).ready(function(){$("#animateBtn").click(function(){$("#animateDiv").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'}, 1000);});});</script>
</head>
<body><button id="animateBtn">开始动画</button><div id="animateDiv"></div>
</body>
</html>

5. 元素删除操作

5.1 `.remove()` 方法

用于移除选定的元素及其子元素。

$("button").click(function(){$("p").remove();
});

5.2 `.empty()` 方法

用于移除选定元素的子元素，但保留元素本身。

$("button").click(function(){$("div").empty();
});

5.3 示例

<!DOCTYPE html>
<html>
<head><title>元素删除操作示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$(document).ready(function(){$("#removeBtn").click(function(){$("#removeParagraph").remove();});$("#emptyBtn").click(function(){$("#emptyDiv").empty();});});</script>
</head>
<body><button id="removeBtn">删除段落</button><p id="removeParagraph">这是一个将被删除的段落。</p><br><button id="emptyBtn">清空 div</button><div id="emptyDiv"><p>这是一个将被清空的 div。</p></div>
</body>
</html>

6. 随机抽奖

6.1 实现思路

获取所有参与抽奖的元素。
使用 Math.random() 生成随机数。
根据随机数选择中奖元素。
显示中奖结果。

6.2 示例

<!DOCTYPE html>
<html>
<head><title>随机抽奖示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>.participant {padding: 10px;margin: 5px;background-color: lightgreen;display: inline-block;cursor: pointer;}</style><script>$(document).ready(function(){$("#drawBtn").click(function(){var participants = $(".participant");var total = participants.length;if(total === 0){alert("没有参与者！");return;}var randomIndex = Math.floor(Math.random() * total);var winner = participants.eq(randomIndex);alert("中奖者是：" + winner.text());});});</script>
</head>
<body><h2>参与者列表</h2><div class="participant">参与者1</div><div class="participant">参与者2</div><div class="participant">参与者3</div><div class="participant">参与者4</div><div class="participant">参与者5</div><br><button id="drawBtn">开始抽奖</button>
</body>
</html>

7. 随机选图并放大

7.1 实现思路

准备一个图片库。
使用 Math.random() 随机选择一张图片。
将选中的图片显示在一个模态框中，并放大显示。

7.2 示例

<!DOCTYPE html>
<html>
<head><title>随机选图并放大示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>.thumbnail {width: 100px;height: 100px;margin: 5px;cursor: pointer;}#modal {display: none;position: fixed;z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.9);}#modalImage {margin: auto;display: block;max-width: 80%;max-height: 80%;}#closeBtn {position: absolute;top: 50px;right: 35px;color: #fff;font-size: 40px;font-weight: bold;cursor: pointer;}</style><script>$(document).ready(function(){var images = ["https://via.placeholder.com/100?text=Image1","https://via.placeholder.com/100?text=Image2","https://via.placeholder.com/100?text=Image3","https://via.placeholder.com/100?text=Image4","https://via.placeholder.com/100?text=Image5"];$(".thumbnail").click(function(){var index = $(this).index();var selectedImage = images[index];$("#modalImage").attr("src", selectedImage);$("#modal").fadeIn(200);});$("#closeBtn").click(function(){$("#modal").fadeOut(200);});// 点击模态框背景关闭$("#modal").click(function(event){if($(event.target).is("#modal")){$(this).fadeOut(200);}});});</script>
</head>
<body><h2>图片库</h2><img src="https://via.placeholder.com/100?text=Image1" class="thumbnail" alt="Image1"><img src="https://via.placeholder.com/100?text=Image2" class="thumbnail" alt="Image2"><img src="https://via.placeholder.com/100?text=Image3" class="thumbnail" alt="Image3"><img src="https://via.placeholder.com/100?text=Image4" class="thumbnail" alt="Image4"><img src="https://via.placeholder.com/100?text=Image5" class="thumbnail" alt="Image5"><div id="modal"><span id="closeBtn">&times;</span><img id="modalImage" src="" alt="Selected Image"></div>
</body>
</html>

8. 综合案例代码

以下是一个综合应用上述功能的完整示例：

<!DOCTYPE html>
<html>
<head><title>综合应用示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>.participant {padding: 10px;margin: 5px;background-color: lightgreen;display: inline-block;cursor: pointer;}#modal {display: none;position: fixed;z-index: 1;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.9);}#modalImage {margin: auto;display: block;max-width: 80%;max-height: 80%;}#closeBtn {position: absolute;top: 50px;right: 35px;color: #fff;font-size: 40px;font-weight: bold;cursor: pointer;}#animateDiv {width: 100px;height: 100px;background-color: lightblue;position: relative;margin: 20px;}</style><script>$(document).ready(function(){// 单击事件显示不同词语$("#showTextBtn").click(function(){var texts = ["你好", "欢迎", "再见", "谢谢", "加油"];var randomIndex = Math.floor(Math.random() * texts.length);$("#displayText").text(texts[randomIndex]);});// 自定义动画$("#animateBtn").click(function(){$("#animateDiv").animate({left: '250px',opacity: '0.5',height: '150px',width: '150px'}, 1000);});// 删除元素操作$("#removeBtn").click(function(){$("#removeParagraph").remove();});// 随机抽奖$("#drawBtn").click(function(){var participants = $(".participant");var total = participants.length;if(total === 0){alert("没有参与者！");return;}var randomIndex = Math.floor(Math.random() * total);var winner = participants.eq(randomIndex);alert("中奖者是：" + winner.text());});// 随机选图并放大var images = ["https://via.placeholder.com/100?text=Image1","https://via.placeholder.com/100?text=Image2","https://via.placeholder.com/100?text=Image3","https://via.placeholder.com/100?text=Image4","https://via.placeholder.com/100?text=Image5"];$(".thumbnail").click(function(){var index = $(this).index();var selectedImage = images[index];$("#modalImage").attr("src", selectedImage);$("#modal").fadeIn(200);});$("#closeBtn").click(function(){$("#modal").fadeOut(200);});// 点击模态框背景关闭$("#modal").click(function(event){if($(event.target).is("#modal")){$(this).fadeOut(200);}});});</script>
</head>
<body><h2>综合应用示例</h2><button id="showTextBtn">显示不同词语</button><p id="displayText">等待显示...</p><button id="animateBtn">开始动画</button><div id="animateDiv"></div><button id="removeBtn">删除段落</button><p id="removeParagraph">这是一个将被删除的段落。</p><h3>参与者列表</h3><div class="participant">参与者1</div><div class="participant">参与者2</div><div class="participant">参与者3</div><div class="participant">参与者4</div><div class="participant">参与者5</div><h3>图片库</h3><img src="https://via.placeholder.com/100?text=Image1" class="thumbnail" alt="Image1"><img src="https://via.placeholder.com/100?text=Image2" class="thumbnail" alt="Image2"><img src="https://via.placeholder.com/100?text=Image3" class="thumbnail" alt="Image3"><img src="https://via.placeholder.com/100?text=Image4" class="thumbnail" alt="Image4"><img src="https://via.placeholder.com/100?text=Image5" class="thumbnail" alt="Image5"><div id="modal"><span id="closeBtn">&times;</span><img id="modalImage" src="" alt="Selected Image"></div>
</body>
</html>

8.1 代码说明

显示不同词语：
- 点击“显示不同词语”按钮时，从预定义数组中随机选择一条文本显示在段落中。
自定义动画：
- 点击“开始动画”按钮时，对蓝色方块执行动画，使其向左移动、改变不透明度并增大尺寸。
删除元素操作：
- 点击“删除段落”按钮时，删除指定的段落元素。
随机抽奖：
- 点击“参与者”列表中的任意元素时，从参与者中随机选择一个中奖者并弹出提示。
随机选图并放大：
- 点击任意缩略图时，从预定义数组中随机选择一张图片并显示在模态框中。

8.2 注意事项

跨域问题：使用占位符图片（https://via.placeholder.com/）作为示例图片库。如果使用本地图片路径，请确保路径正确。
模态框背景点击关闭：通过判断点击的目标是否是模态框本身来关闭模态框。
参与者列表：参与者列表中的元素可以通过添加或删除 .participant 类的元素来动态调整。

JavaScript学习教程，从入门到精通，jQuery 单击页面显示自定义动画、元素删除操作、随机抽奖、随机选图并放大语法知识点（37）

jQuery 单击页面显示自定义动画、元素删除操作、随机抽奖、随机选图并放大语法知识点 1. jQuery 基础语法 1.1 引入 jQuery 在使用 jQuery 之前，需要先引入 jQuery 库。可以通过 CDN 引入，也可以下载到本地使用。 …...

编程日记 2025/8/22 4:52:22

5.6 react组件化开发基础

react 组件开发基础组件分类与组件使用组件传参父传子【函数数据传值实参形参对应关系】子传父插槽透传 useContext 上下文（作用域） 跨层级调用方法通过子组件的实例对象useRef 直接调用子组件的方法和数据状态管理（非常多…...

编程日记 2025/8/19 19:19:26

react-14defaultValue（仅在首次渲染时生效）和value（受 React 状态控制）

在 React 中，defaultChecked/checked 和 defaultValue/value 是用于处理表单元素初始值和受控值的属性对。区别在于表单元素是否受 React 组件状态控制。 1. defaultValue 作用：设置表单元素的初始值（仅在首次渲染时生效）。特点…...

编程日记 2025/8/19 2:42:03

HarmonyOS 5.0 低时延音视频开发

大家好，我是 V 哥。在HarmonyOS 5.0的开发中，支持低时延音视频开发，为了确保语法正确， V 哥以下代码符合HarmonyOS NEXT API 14的规范。为了方便初学者更好入门，V 哥伙同2位小伙伴花了1年时间，搞了三本鸿蒙…...

编程日记 2025/8/21 14:47:22

视频智能分析网关助力小区/住宅/街道智慧社区管理服务全面升级

一、引言随着信息技术的飞速发展，智慧社区建设已成为提升居民生活质量、优化社区管理的重要趋势。智能分析网关作为智慧社区的核心技术支撑之一，凭借其强大的数据处理和智能分析能力，在社区的安防监控、人员车辆管理、环境卫生检测等多个…...

编程日记 2025/8/22 4:50:54

ShardingJdbc-水平分表

ShardingJdbc-水平分表水平分表表结构相同表数据记录不同多张分表记录数和才是总的记录数通常根据主键ID进行分表，这里采用奇偶策略案例建立库 sharding-demo建立表 user_1、user_2 表结构相同id 为主键，bigint 类型分表规则 id 为偶数的记录存储…...

编程日记 2025/8/21 22:36:54

AI应用爆发或将进入临界点

在科技发展的长河中，总有一些时刻如惊雷般震撼世界，预示着新时代的到来。如今，AI应用似乎正站在这样一个关键节点上，一场前所未有的变革风暴或许即将席卷而来，AI应用的爆发或将进入临界点。当我们回顾科技发展的历程，不难发现每一次重大的技术突破都曾引发社会的巨大变…...

编程日记 2025/8/19 11:02:17

Javase 基础加强 —— 05 Map集合

本系列为笔者学习Javase的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaAI智能辅助编程全套视频教程，java零基础入门到大牛一套通关》，章节分布参考视频教程，为同样学习Javase系列课程的同学们提供参考。 01 概述 Ma…...

编程日记 2025/8/21 9:23:19

LINUX——例行性工作

单一执行的例行性工作仅处理一次的工作，可用于在特定时间执行工作 at命令的工作过程： at命令使用时的权限控制：通过两个文件/etc/at.allow和/etc/at.deny来控制哪些用户可以使用at命令。如果这两个文件都不存在，那么只有root用户…...

编程日记 2025/8/19 18:07:49

天线测试报告解读学习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、无源测试和有源测试二、无源测试报告1.驻波2.回损3.史密斯圆图4.效率5.增益6.天线方向图7.天线隔离度8.无源测试总结三、有源测试报告1.TRP与TIS2.测试指标…...

编程日记 2025/8/19 19:19:07

Kotlin Android开发过渡指南

为了帮助Java开发者顺利过渡到Kotlin进行Android开发，以下是一本指南的详细大纲设计，涵盖关键知识点、迁移策略和实践案例：《Kotlin for Android开发：从Java到Kotlin的平滑过渡指南》大纲第一部分：为什么选择Kotlin？ Kotlin的优势简洁性、安全性、与Java的互操作性Go…...

编程日记 2025/8/19 19:19:05

Hadoop架构再探讨

文章目录 1.Hadoop的优化与发展1.1Hadoop的局限与不足1.2针对Hadoop的改进与提升 2.HDFS2.0新特性2.1HDFS HA1.HDFS 1.0 组件及功能回顾2. HDFS 1.0 的单点故障问题3. HDFS HA（高可用）解决方案 2.2HDFS Federation1.HDFS1.0中存在的问题2.HDFS Fed…...

编程日记 2025/8/19 19:19:02

ffmpeg录音测试

ffmpeg ffmpeg 是一个强大的多媒体处理工具，可以用于录音、音频处理、视频录制等多种功能。以下是使用 ffmpeg 进行录音的详细指令和参数说明。基本录音指令以下是一个简单的 ffmpeg 录音命令，将音频录制为 WAV 格式文件： ffmpeg -f …...

编程日记 2025/8/19 19:19:00

我们在使用对象时可能需要访问它们内部的一些属性: class Student(var name: String, var age: Int) fun main() {val student Student("小明", 18)println(student.name)println(student.age) }这样看起来不太优雅,我们可以像下面这样编写: class Student(var na…...

编程日记 2025/8/21 8:07:46

【MCP Node.js SDK 全栈进阶指南】专家篇（2）：MCP多模型支持架构

引言在实际应用中，单一模型往往难以满足所有业务需求，这就需要一种灵活的架构来支持多模型集成和智能调度。Model Context Protocol (MCP) 作为连接应用与AI模型的标准协议，为多模型支持提供了理想的基础架构。本文作将深入探讨如何基于MCP构建多模型支持架构，包括多LL…...

编程日记 2025/8/21 9:22:58

使用阿里AI的API接口实现图片内容提取功能

参考链接地址：如何使用Qwen-VL模型_大模型服务平台百炼(Model Studio)-阿里云帮助中心在windows下，使用python语言测试，版本：Python 3.8.9 一. 使用QVQ模型解决图片数学难题 import os import base64 import requests# base 64 …...

编程日记 2025/8/21 20:55:06

mapbox基础，加载Fog云雾效果

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️fog 云雾 api1.3.1 ☘️配置项二、🍀…...

编程日记 2025/8/19 19:18:52

数据可视化与分析

数据可视化的目的是为了数据分析，而非仅仅是数据的图形化展示。项目介绍项目案例为电商双11美妆数据分析，分析品牌销售量、性价比等。数据集包括更新日期、ID、title、品牌名、克数容量、价格、销售数量、评论数量、店名等信息。 1、数据初步了解…...

编程日记 2025/8/20 20:21:05

git的push.default配置详解

Git的push.default配置用于定义执行git push时未指定远程和分支的默认行为。以下是各选项的详解及使用场景： 1. simple（默认值，Git ≥2.0） 行为：仅推送当前分支到与其关联的上游分支（即remote-tracked分支…...

编程日记 2025/8/19 19:18:47

高频电流探头：通信测试中的隐形守护者

在5G基站调试现场，工程师李工正手持一个火柴盒大小的装置贴近电路板，示波器屏幕上瞬间显示出精确的电流波形——这个看似普通的场景，背后折射出高频电流探头在通信测试中的关键作用。随着通信技术迈入毫米波时代，这类精密测试工具…...

编程日记 2025/8/19 19:18:45

淘宝拍立淘 API 接口探秘：如何通过图片挖掘海量商品信息

在互联网技术飞速发展的当下，传统的文字搜索商品方式已无法完全满足用户日益增长的个性化需求。基于图像识别技术的以图搜物模式应运而生，成为电商行业的新宠。淘宝拍立淘 API 接口作为这一技术的重要载体，能够帮助开发者和企业通过一张图片&…...

编程日记 2025/8/19 19:18:43

第二章：langchain文本向量化（embed）搭建与详细教程-本地服务方式（下）

文章目录前言一、本地构建模型与服务端搭建代码1、完整代码2、结果示例二、基于flask服务端构建langchain调用的向量方法代码1、完整代码2、结果示例总结前言在上篇文章介绍了langchain源码embed方法与基于api key方式构建向量模型。然而，某些情况&#xff0c…...

编程日记 2025/8/19 19:18:41

飞牛云如何开启及使用ssh:小白用户上手指南-家庭云计算专家

最近很多用户希望提供飞牛云下的可道云onlyoffice的安装服务,但是很多都是萌新小白,不知道怎么启用ssh和使用ssh客户端.这里提供简单的方法,统一答复: 重要的事情说3遍:一定不要自己发挥,全部按说明的来;一定要在内网环境用内网ip访问;不要用域名和端口号,谢谢各位萌新了!!! 一…...

编程日记 2025/8/19 19:18:38

12.模方ModelFun工具-立面修整

摘要：本文主要介绍模方ModelFun修模工具——立面修整的操作方法。点击工具栏即可找到立面修整工具，点击可打开并使用该工具，如下图： 图工具菜单栏 （1）截面绘制： 快速绘制竖直矩形&#xff1…...

编程日记 2025/8/19 19:18:36

消失的两个数字 --- 位运算

目录一：题目二：算法原理三：代码实现一：题目题目链接：面试题 17.19. 消失的两个数字 - 力扣（LeetCode） 二：算法原理只出现一次的数字III：常见位运算总结-CSDN…...

编程日记 2025/8/19 6:15:01

centos的根目录占了大量空间怎么办

问题当根目录磁盘不够时，就必须删除无用的文件了上面的，如果删除/usr 或/var是可以释放出系统盘的定位占空间大的文件经过命令，一层层查哪些是占磁盘的。 du -sh /* | sort -rh | head -n 10 最终排查，是有个系统日志占了20…...

编程日记 2025/8/19 19:18:31

Protobuf的速成之旅

注意事项:本文使用Linux下的Ubuntu C/C 一.Protobuf的安装在安装Protobuf前需要先安装protobuf的依赖库 sudo apt-get install autoconf automake libtool curl make g unzip -y Protobuf的安装链接:https://github.com/protocolbuffers/protobuf/releases 这里根据自己的环…...

编程日记 2025/8/19 19:18:29

使用 Python 监控系统资源

使用 Python 监控系统资源在开发分布式系统或性能敏感的应用时，实时监控系统资源（如 CPU、内存、磁盘、网络和 GPU 使用率）至关重要。本文介绍一个基于 Python 的 SystemMonitor 类，它以单例模式持续采集系统资源信息&#xff0…...

编程日记 2025/8/19 19:18:27

【Qt4】Qt4中实现PDF预览

方案一： 在Qt4中预览PDF文件，你可以使用多种方法，但最常见和简单的方法之一是使用第三方库。Qt本身并没有内置直接支持PDF预览的功能，但你可以通过集成如Poppler、MuPDF等库来实现这一功能。下面我将展示如何使用Poppler库在Qt4中…...

编程日记 2025/8/21 15:28:26

从试错到智能决策：Python与强化学习优化自动驾驶策略

从试错到智能决策：Python与强化学习优化自动驾驶策略一、引言：自动驾驶如何更聪明？自动驾驶技术的发展，已经从简单的感知与规则控制，迈向更加智能化的强化学习（Reinforcement Learning，RL）决策优化时代。过去，自动驾驶更多依赖传统算法（如A、Dijkstra路径规划）…...

编程日记 2025/8/19 2:42:10

【免费下载】全国范围的城市用地类型数据

该数据以路网及水系切分得到的交通小区为最小地块，并基于卫星影像、夜间灯光数据、POI数据、手机信令数据对地块进行分类。需要这份数据，请在文末查看下载方法。一、数据介绍该数据的用地类型可分为居住用地、商务办公用地、商业服务用地、工业用地…...

编程日记 2025/8/19 20:49:17

小程序问题(记录版)

1、样式不生效在h5上生效但是小程序上没反应解决办法：解除组件样式隔离 1、isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值） 2、apply-shared 表示页面 wxs…...

编程日记 2025/8/21 20:38:26

STL之stackqueue

stack的介绍（可以想象成栈） 1.stack是一种容器适配器，专门用在具有后进先出操作的上下文环境中，其删除只能从容器的一端进行元素的插入与提取操作 2.stack是作为容器适配器被实现的，容器适配器即是对特点类封装作为其…...

编程日记 2025/8/19 19:18:20

学习海康VisionMaster之间距检测

一：进一步学习了今天学习下VisionMaster中的间距检测工具：主要类似于卡尺工具，测量物体的长度或者宽度或者间距二：开始学习 1：什么是间距检测？ 间距测量模块用于检测两特征边缘之间的间距，首…...

编程日记 2025/8/19 19:18:18

【SpringBoot教程】SpringBoot自定义注解与AOP实现切面日志

🙋大家好！我是毛毛张! 🌈个人首页： 神马都会亿点点的毛毛张文章目录 1.前言2.SpringAOP实现切面日志快速入门1.1 创建SpringBoot项目1.2 依赖配置pom.xml1.3 自定义日志注解1.4 配置 AOP 切面1.5 怎么使用呢？1.6 实…...

编程日记 2025/8/19 9:15:18

C++学习之路，从0到精通的征途：stack_queue的模拟实现及deque原理介绍

目录一.容器适配器 1.什么是适配器 2.STL标准库中stack和queue的底层结构 3.deque的原理介绍 deque是如何借助其迭代器维护其假想连续的结构呢？ 头插尾插遍历 4.deque的优缺点二.stack的模拟实现三.queue的模拟实现一.容器适配器 1.什么是适配…...

编程日记 2025/8/19 19:18:16

文件上传漏洞篇：upload-labs靶场搭建

一、文件上传漏洞简述文件上传漏洞是一种常见的Web安全漏洞，当网站或应用程序允许用户上传文件（如图片、文档等）时，若未对上传的文件进行充分的安全检查，攻击者可能利用此漏洞上传恶意文件（如Web Shell、…...

编程日记 2025/8/21 22:36:49

TikTok 矩阵账号运营实操细节：打造爆款矩阵

在 TikTok 的流量版图里，打造 TikTok 矩阵账号能显著提升影响力与吸粉能力。而借助 AI 工具，更可为 TikTok 矩阵运营效率的提升赋能，让运营如虎添翼。下面就为大家详细讲讲其中的实操细节，并结合一些伪代码示例辅助理解。一、矩…...

编程日记 2025/8/19 19:18:11

Nginx安全防护与HTTPS部署实战

一.核心安全配置 1.编译安装Nginx （1）安装支持软件 Nginx的配置及运行需要pcre、zlib等软件包的支持，因此应预先安装这些软件的开发包（devel），以便提供相应的库和头文件，确保Nginx的安装顺利…...

编程日记 2025/8/19 15:22:08

【C语言】初阶数据结构相关习题（一）

🎆个人主页：夜晚中的人海今日语录：人的生命似洪水在奔流，不遇着岛屿、暗礁，难以激起美丽的浪花。——奥斯特洛夫斯基文章目录 ⭐一、判定是否互为字符重排🎉二、回文排列🚀三、字符串压缩&am…...

编程日记 2025/8/19 19:18:07

MySQL从入门到精通（一）：MySQL介绍及数据库相关概念

目录一、MySQL 介绍二、数据库相关概念 （一）数据库基础知识 （二）主流的关系型数据库管理系统三、关系型数据库与非关系型数据库 （一）定义 （二）数据模型对比 （…...

编程日记 2025/8/19 19:18:05

宁德时代区块链+数字孪生专利解析：去中心化身份认证重构产业安全底座

引言：当动力电池巨头瞄准数字孪生安全 2025年5月6日，金融界披露宁德时代未来能源（上海）研究院与母公司宁德时代新能源科技股份有限公司联合申请的一项关键专利——“身份验证方法、系统、电子设备及存储介质”。这项技术将区块链…...

编程日记 2025/8/19 20:49:15

Kotlin数据类在Android开发中的应用

在 Android 开发中，Kotlin 的数据类（Data Class）因其简洁性和自动生成的功能特性，成为了提升开发效率的利器。以下是我总结的 7 大核心妙用场景，配合代码示例助您快速掌握： 1️⃣ JSON 解析利器 → 网络请求模型与 Retrofit/Moshi 完美配合，自动生成 equals()/hashCod…...

编程日记 2025/8/19 20:49:13

程序员学商务英语之Shipment Claim 运输和索赔

Dia-3: Claim 1 索赔 1. He claimed that he would quit smoking. 他宣布他将要禁烟。 2. BYD is inferior to Tesla. 差 be worse than… 比亚迪比特斯拉差。 Tesla is superior to BYD. 特斯拉比比亚迪好。 be better than… 3. The survey report reveals/s…...

编程日记 2025/8/19 20:49:12

Kotlin密封类优化Android状态管理

Kotlin 的密封类（Sealed Class）确实是 Android 开发中管理复杂 UI 状态的利器。它通过类型安全的层次结构，让状态管理代码更加清晰简洁。让我们从实际开发场景出发，深入探讨其应用： 一、密封类核心优势受限的类继承…...

编程日记 2025/8/19 6:02:10

基于图像处理的道路监控与路面障碍检测系统设计与实现 (源码+定制+开发）图像处理计算机视觉道路监控系统视频帧分析道路安全监控城市道路管理

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/8/19 20:49:07

依赖注入详解与案例（前端篇）

依赖注入详解与案例（前端篇） 一、依赖注入核心概念与前端价值依赖注入（Dependency Injection, DI） 是一种通过外部容器管理组件/类间依赖关系的设计模式，其核心是控制反转（Inversion of Control, IoC&…...

编程日记 2025/8/20 14:22:44

Spark 的 Shuffle 机制：原理与源码详解

Apache Spark 是一个分布式数据处理框架，专为大规模数据分析设计。其核心操作之一是 Shuffle，这是一个关键但复杂的机制，用于在某些操作期间在集群中重新分配数据。理解 Shuffle 需要深入探讨其目的、机制和实现，既包括概念层面&a…...

编程日记 2025/8/19 20:49:02

IdeaVim配置指南

一、什么是 IdeaVim？ IdeaVim 是 JetBrains 系列 IDE（如 IntelliJ IDEA, WebStorm, PyCharm 等）中的一个插件，让你在 IDE 里使用 Vim 的按键习惯，大大提升效率。安装方法： 在 IDE 中打开设置(Settings) →…...

编程日记 2025/8/19 20:48:58

[监控看板]Grafana+Prometheus+Exporter监控疑难排查

采用GrafanaPrometheusExporter监控MySQL时发现经常数据不即时同步，本示例也是本地搭建采用。 Prometheus面板 1，Detected a time difference of 11h 47m 22.337s between your browser and the server. You may see unexpected time-shifted query res…...

编程日记 2025/8/22 4:06:16