- 博客(439)
- 资源 (8)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 【JS】BOM 详解（工作必备）
- BOM（Browser Object Model）：浏览器对象模型- 其实就是操作浏览器的一些能力- 我们可以操作哪些内容1. 获取一些浏览器相关信息（窗口大小）2. 操作浏览器的滚动条3. 浏览器的信息（浏览器的版本）4. 让浏览器出现一个弹出框（alert、confirm、prompt）- BOM的核心就是window对象- window是浏览器内置的一个对象，里面包含着操作浏览器的方法
2023-04-15 12:40:40
6017
原创 【CSS】选择器汇总
文章目录一、选择器权重二、基础选择器2.1、通配符（*）2.2、标签选择器（h1）2.3、 id选择器（#）2.4、class选择器（.）三、层级选择器3.1、群组选择器（E,F）3.1、包含选择器（E F）3.1、子元素选择器（E>F）3.1、相邻兄弟选择器（E+F）3.1、 通用选择器（E~F）三、 属性选择器3.1、 [attribute]选择器3.2、 [attribute=value]选择器3.3、 [attribute~=value]选择器3.4、 [attribute|=value]选择
2022-04-02 16:22:25
2256
原创 【JS】 字符串方法汇总（工作常用）
字符串常用方法charAt()charAt()：返回指定索引位置的字符，由传入方法的整数参数指定。let str = "hello world";console.log(str.charAt(7)); //oconsole.log(str.charAt(70)); //""charCodeAt()chatCodeAt()：返回指定索引位置的unicode编码，由传入方法的整数参数指定。let str = "hello world";console.log(str.charCo
2021-04-10 17:06:54
4678
1
原创 【JS】DOM 文档操作大全（必备收藏）
DOM（Document Object Model）：文档对象模型，其实就是操作HTML中的标签的一些能力。本文枚举了DOM各种操作，如：获取 一个元素、移除一个元素、创建一个元素、向页面里面添加一个元素、给元素绑定一些事件、获取元素属性、给元素添加一些css样式。。。等各种操作
2021-01-22 20:58:51
5484
原创 【Antd】基于 Upload 组件，导入Json文件并转换为Json数据
基于 Antd Upload 组件，导入Json文件并转换为Json数据
2025-12-08 15:53:29
213
原创 【@ebay/nice-modal-react】管理React弹窗（Modal）状态
@ebay/nice-modal-react 是一个专门用于管理React弹窗（Modal）状态的工具库。它的核心目标不是提供现成的UI组件，而是帮你更优雅地管理和控制应用中各种弹窗的显示、隐藏和状态传递
2025-12-03 17:06:17
414
原创 【HTML】iframe 标签 allow 权限汇总（例如添加复制粘贴权限）
本文介绍了HTML iframe标签的allow属性及其常见用法。allow属性用于控制iframe中内容的权限，包括剪贴板访问、全屏、支付、摄像头/麦克风等设备权限。文章列举了主要权限值及其应用场景，并展示了三种使用方式：基本用法（直接设置权限）、精细控制来源（指定允许的域名）以及组合多个策略。通过合理配置allow属性，可以在保证安全性的前提下为iframe内容授予必要的功能权限。
2025-11-25 10:27:20
489
原创 【Antd】Form表单中将Switch组件的 true/false 值转换为 1/0
Antd Form表单中将Switch组件的 true/false 值转换为 1/0
2025-11-18 12:03:38
211
原创 【JS】区分移动端和PC端方法
摘要：本文介绍了一种简单实用的移动端检测方法，通过检查用户代理字符串和触摸支持来判断设备类型。代码示例展示了一个isMobile()函数，可检测Android、iOS、BlackBerry等常见移动设备，并考虑了触摸屏支持作为辅助判断。该方法适用于大多数场景，同时建议需要精确检测时可使用Modernizr等专业库。调用示例展示了如何根据检测结果输出当前设备类型。
2025-09-29 15:05:34
195
原创 【JS】使用a标签下载文件方法
本文介绍了四种前端文件下载方法：1）同源文件直接使用<a>标签加download属性；2）跨域文件若服务器设置Content-Disposition也可用此法；3）支持CORS的跨域文件可通过fetch转为Blob URL下载；4）否则需服务器代理。具体实现包括：静态<a>标签使用、动态创建下载链接、以及通过fetch接口获取文件数据并转换为Blob对象下载的完整代码示例。文中特别提供了处理POST请求下载的fetch示例，并强调跨域场景下的不同处理方案。
2025-09-28 18:03:45
1313
原创 【Nginx】基本概述
Nginx是一款高性能开源Web服务器，采用事件驱动和异步非阻塞架构，通过Master-Worker进程模型高效处理高并发连接。其核心功能包括静态内容处理、反向代理、负载均衡（支持多种分配策略）和HTTP缓存，能有效提升网站性能与安全性。典型应用场景涵盖Web服务器托管、负载均衡搭建、反向代理部署、CDN边缘节点以及微服务API网关等，适用于需要高性能、高并发的网络服务环境。
2025-08-22 11:43:31
440
原创 【JS】复制文本到剪切板
本文介绍了一个通用的复制文本到剪贴板的函数实现。该函数首先尝试使用现代浏览器的navigator.clipboardAPI，若不可用则降级使用document.execCommand方法作为备用方案。函数处理了无权限访问剪贴板的情况，会提示用户授权。使用示例展示了如何配合Ant Design的message组件显示操作结果。该方案兼容性好，适合在各类Web项目中使用。
2025-08-14 16:10:57
285
原创 【JS】ResizeObserver（用于监听元素尺寸变化的接口）
本文介绍了ResizeObserver API的基础用法和框架示例。ResizeObserver用于监听元素尺寸变化，通过创建实例并指定观察元素实现。核心包括observe()开始观察、unobserve()停止观察单个元素、disconnect()停止所有观察。回调函数接收的ResizeObserverEntry对象包含元素尺寸信息，如contentRect和borderBoxSize等属性。文章提供了原生JavaScript实现代码，并展示了React和Vue框架中的使用示例，均包含组件卸载时的清理操作
2025-07-23 10:07:12
497
原创 【JS】事件类型（可addEventListener监听）
本文介绍了JavaScript中常用的浏览器事件类型，涵盖7大类：1)窗口/视图事件（resize、scroll等）；2)鼠标事件（click、mouseover等）；3)键盘事件（keydown、keyup）；4)焦点事件（focus、blur）；5)表单事件（change、submit）；6)移动端触摸事件；7)其他重要事件（hashchange、storage等）。文中提供了事件监听代码示例和详细的事件功能说明表格，适合开发者快速查阅各类浏览器事件的应用场景。这些事件处理是前端交互开发的基础知识。
2025-07-22 18:26:42
414
原创 【JS】获取元素宽高（例如div）
本文介绍了在React中获取元素高度的几种方法：offsetHeight（含边框）、clientHeight（不含边框）和scrollHeight（含滚动内容）。通过useRef绑定DOM元素，在useEffect中获取初始高度并监听窗口变化更新高度值。示例代码展示了如何创建一个响应式的高度测量组件，包含resize事件处理和高度显示功能。纯JS版本也可用getElementById替代useRef实现相同效果。
2025-07-22 18:14:40
286
原创 【JS】解析数字精度丢失问题及解决方案
摘要：本文介绍了处理大数字数据的两种方法：1) 最佳实践是让后端以字符串形式返回大数字，避免精度丢失；2) 若后端无法修改，前端可通过JSON.parse的reviver函数将指定字段(如snapshotId)转换为字符串。示例展示了React组件中如何实现这一转换，包括API请求、状态管理和大数字处理逻辑。该方法适用于需要处理后端返回的大数字值(如长ID)而不损失精度的场景。
2025-07-07 17:32:08
291
原创 【Git】git cherry-pick（将某个分支的 commit 改动复制到当前分支）
git cherry-pick命令解析 将某个分支的 commit 改动复制到当前分支
2025-03-25 11:34:43
960
原创 【Moment.js】计算两个时间的时间差，并将结果转换为 天、时、分、秒 格式
Moment.js 计算两个时间的时间差，并将结果转换为 天、时、分、秒 格式
2025-03-25 11:02:22
647
原创 【CSS】设置滚动条样式
:-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll;的元素的滚动条样式，如果没有设置 overflow:scroll;，元素的滚动条将不会显示。在CSS中，可以使用 ::-webkit-scrollbar 和相关伪元素来为滚动条设置样式，但请注意这些伪元素是非标准的，主要用于WebKit内核浏览器（如Chrome、Safari）。对于Firefox等其他浏览器，可以使用标准的CSS滚动条样式属性。
2025-01-08 14:48:35
1640
原创 【Antd】使用Upload组件基于fetch上传文件并添加额外参数
【代码】【Antd】使用Upload组件基于fetch上传文件并添加额外参数。
2024-12-16 18:13:50
561
原创 【CSS】设置文本超出N行省略
这种方法主要是针对Webkit浏览器，因此可能在一些非Chrome浏览器中不适用。例如：设置文本超出两行显示省略号。
2024-11-25 15:31:27
808
CSDN 写博客时无法上传 gif 图片怎么办？
2021-05-12
TA创建的收藏夹 TA关注的收藏夹
TA关注的人