- 博客(80)
- 收藏
- 关注
RSS订阅原创 JavaScript DOM 元素节点操作详解
本文总结了JavaScript操作DOM的主要方法，涵盖获取元素、创建和修改节点、操作属性和样式等核心内容。获取元素可通过ID、类名、标签名、CSS选择器等方式，返回HTMLCollection或NodeList。节点操作包括创建、添加、删除、替换和修改内容，推荐使用textContent防XSS攻击。属性操作支持标准属性、自定义data-*属性和通用方法。样式操作包含内联样式、类名修改和计算样式获取。
2025-08-06 20:31:33
834
原创 Web存储技术详解：sessionStorage、localStorage与Cookie
本文对比了Cookie、localStorage和sessionStorage的核心特性：存储大小（4KB/5-10MB/5-10MB）、生命周期（可设置/永久/会话级）、作用域（全窗口/全窗口/单标签页）和安全性差异。提供了三类存储的API操作示例，包括设置、读取和删除方法。针对不同场景给出使用建议：Cookie适合身份认证，localStorage适合长期偏好设置，sessionStorage适合临时会话数据。
2025-08-05 19:42:05
446
原创 BOM Cookie操作详解
本文介绍了Cookie的基本概念、操作方法和使用场景。Cookie是浏览器用于存储会话信息、用户偏好等数据的机制，核心API包括读取、设置、更新和删除操作。文章详细说明了Cookie的作用域、安全属性（如Secure、HttpOnly）和存储限制（4KB/域名）。同时对比了Cookie与localStorage的区别：Cookie适合会话管理（自动随请求发送），而localStorage适合长期存储本地数据（5-10MB）。
2025-08-05 19:31:31
248
原创 BOM History对象详解与可视化实现
摘要：History对象是BOM的核心组件，支持单页面应用(SPA)的无刷新导航。主要API包括：history.length获取历史记录数，history.state读取状态对象，back()/forward()控制导航，go()跳转指定位置。pushState()添加新历史记录，replaceState()修改当前记录，两者区别在于是否增加history.length。使用时需注意同源策略，需配合popstate事件处理导航，并手动更新页面内容。关键应用场景包括SPA路由、状态管理和用户行为跟踪。
2025-08-05 19:20:57
383
原创 JavaScript 闭包详解：概念、用法与属性
闭包是JavaScript中函数与其词法作用域的组合，使函数能访问定义时的作用域变量。核心特性包括：1）词法作用域持久化，外部变量被引用后不会被回收；2）封装性，可创建私有变量；3）运行时动态绑定变量。主要应用场景包括数据封装、函数工厂、事件处理和模块模式。需注意内存泄漏风险、性能影响和变量共享问题。闭包通过作用域链实现，包含函数自身作用域、闭包作用域和全局作用域。其核心价值在于实现状态持久化、数据封装和动态绑定。
2025-08-02 10:19:41
770
原创 JavaScript：Ajax（异步通信技术）
Ajax（Asynchronous JavaScript and XML）是一种实现异步通信的技术，其核心特点是无需刷新页面即可更新数据。本文通过示例代码演示了XMLHttpRequest的基本工作流程：创建对象、配置请求、发送请求、监听响应并处理数据。关键点包括readyState状态码（0-4）和HTTP状态码处理（如200成功、404资源不存在等）。常见问题涉及跨域错误、网络中断和JSON解析错误。示例展示了如何高效获取JSON数据并动态更新DOM，同时强调了错误处理的重要性。
2025-08-02 09:45:19
252
原创 JavaScript 定时器
JavaScript定时器使用指南：包括setTimeout和setInterval两种类型，分别用于单次延迟和周期性执行，通过clear方法清除。核心属性包括4ms最小延迟、整数ID和特定this绑定。使用场景涵盖防抖节流、动画轮询和状态延迟处理。需注意事件循环机制、闭包内存泄漏问题，推荐使用Promise封装和精确时间补偿技巧。最佳实践建议动画用requestAnimationFrame，组件清理时清除定时器，非活动页暂停定时器以优化性能。合理选择定时器类型对构建高性能应用至关重要。
2025-07-28 20:29:32
344
原创 JavaScript 函数
JavaScript函数是执行特定任务的代码块，支持多种定义方式（函数声明、表达式、箭头函数）和高级特性。核心概念包括执行上下文（this绑定差异）、闭包（封装私有变量）和高阶函数（接收/返回函数）。参数处理支持默认值、Rest参数和解构。异步编程模式涵盖回调、Promise和async/await。最佳实践涉及性能优化（惰性函数）、内存管理及函数式编程原则（纯函数、柯里化）。调试时建议使用命名函数表达式，并通过try-catch处理错误。
2025-07-28 20:20:26
297
原创 JavaScript：字符串常用操作和转义符的总结表格
本文介绍了字符串的转义符、属性和常用方法。转义符包括\n（换行）、\r（回车）等特殊字符处理方法。字符串方法如charAt()、indexOf()等均不改变原字符串，而是返回新值。重点对比了substring()、slice()和substr()三种子串提取方法：slice支持负索引，substr正逐步淘汰。还特别说明了split()的分割用法和转义符的使用场景。建议优先使用slice方法，处理路径时注意转义符。所有字符串操作均保持原字符串不变。
2025-07-28 20:09:12
174
原创 JavaScript：数组常用操作方法的总结表格
原地修改方法（直接改变原数组）：pushunshiftpopshiftsplicereversesort非破坏性方法（不改变原数组，返回新结果）：joinconcatindexOf返回值差异返回长度，pop/shift返回被删元素splice返回被删元素的数组concat返回拼接后的新数组（不修改原数组）✅使用注意：操作数组时需明确是否需要保留原数组，非破坏性方法可避免意外修改原始数据。
2025-07-28 20:04:02
236
原创 JavaScript 字符串方法详解：前端工程师的终极指南
本文总结了JavaScript字符串操作的常用方法与最佳实践，涵盖10个核心方法：length属性用于长度检查，indexOf/lastIndexOf用于搜索，slice/substring用于提取，大小写转换(toUpperCase/toLowerCase)，trim系列处理空白，split用于分割，includes优化搜索，replace实现替换，以及padStart/padEnd进行填充。文章特别强调了Unicode安全处理、性能优化技巧（如预编译正则、数组join代替连接）以及安全编码实践。
2025-07-28 19:56:47
272
原创 JavaScript:10个数组方法/属性
本文深度解析JavaScript数组的10个核心方法，涵盖length属性、增删方法(push/pop/shift/unshift)、遍历方法(forEach/map/filter)和查找方法(find/includes)。文章详细阐述各方法的技术原理、性能特点和使用场景：length属性可用于数组截断和预分配；push/pop适合栈操作；shift/unshift慎用于大数据量；forEach/map/filter实现数据转换与筛选；find/includes用于高效查找。
2025-07-28 19:38:22
1312
原创 Web前端：JavaScript Math选字游戏 斯特鲁普效应测试
这是一个基于斯特鲁普效应的认知测试游戏。游戏通过随机显示颜色与文字不符的词语（如用红色显示的"蓝"字），要求玩家判断文字的实际颜色而非文字含义。核心功能包括：随机生成题目（使用Math.random()获取颜色和文字索引）、判断用户选择正误、计分系统（答对+1分，答错-1分）和游戏状态控制（10分获胜，0分以下失败）。游戏采用响应式设计，包含视觉反馈效果，适合测试大脑抑制习惯性反应的能力。关键知识点涉及JavaScript随机数生成、DOM操作、事件处理以及心理学中的斯特鲁普效应。
2025-07-25 20:31:23
304
原创 Web前端：JavaScript 随机点名系统案例详解
本文介绍了一个基于HTML/CSS/JavaScript的随机点名系统实现方案。该系统具备随机选择学生、动态改变背景颜色、全屏居中显示等功能。核心实现包含：1）使用数组存储学生名单；2）通过Math.random()生成随机数和RGBA颜色；3）采用Flexbox布局实现界面居中；4）添加点击事件处理逻辑。文章详细解析了随机数生成、颜色模型应用、DOM操作等关键技术点，并提供了完整的响应式设计代码，包含动画效果和键盘支持等增强功能。该案例展示了基础Web技术的综合应用，适合作为前端开发学习参考。
2025-07-25 20:04:01
720
原创 Web前端：JavaScript Math对象应用 随机背景颜色生成器
本文介绍了一个利用JavaScript Math对象生成随机背景颜色的网页应用案例。通过Math.random()和Math.floor()方法，程序能生成0-255的RGB值和0-1的透明度值，动态改变网页背景色。案例包含完整的HTML结构、CSS样式及JavaScript实现，具有按钮点击和键盘空格键触发功能，并添加了颜色预览、信息面板等交互元素，展示了Math对象在网页开发中的实际应用、DOM操作和事件处理等核心技术。该案例特别适合初学者理解随机数生成、CSS颜色模型和动态网页效果实现。
2025-07-25 19:41:33
389
原创 Web前端：JavaScript Math内置对象
JavaScript中的Math对象是一个内置对象，提供数学相关的常量和函数。它不能实例化，所有属性和方法都直接通过Math调用。Math对象包含常用数学常量（如π、e）和各种数学方法，包括取整（ceil/floor/round）、幂运算（pow/sqrt）、三角函数（sin/cos）、对数运算（log/log10）和随机数生成（random）等。ES6新增了trunc、cbrt等方法。Math对象广泛用于数值计算、随机数生成和几何运算等场景，但需注意JavaScript的浮点数精度问题。
2025-07-25 19:18:37
657
原创 Web前端：JavaScript indexOf()方法
JavaScript中的indexOf()方法是一个用于查找元素位置的实用工具，适用于字符串和数组。其主要功能是返回目标元素首次出现的索引（从0开始计数），若未找到则返回-1。使用时需注意：区分大小写、仅返回第一个匹配项、支持指定起始搜索位置。常见应用场景包括检查元素是否存在、获取位置进行后续操作以及数组去重。要避免将返回值直接作为布尔值判断，建议显式检查是否不等于-1。对于数组查找，该方法采用严格类型比较（===）。该方法是编程中实现快速定位的基础工具。
2025-07-24 20:05:05
864
原创 Web前端：JavaScript findIndex⽅法
JavaScript数组的findIndex方法用于查找第一个满足条件的元素索引。它接收一个回调函数作为测试条件，返回首个使回调返回true的元素的索引，若无则返回-1。与find（返回元素）、indexOf（值匹配）不同，findIndex支持复杂条件查找且高效。典型应用场景包括查找特定属性的对象位置，比手动循环更简洁。使用时需注意检查返回的-1值表示未找到。
2025-07-24 19:54:10
782
原创 Web前端：JavaScript find（）函数内判断
JavaScript数组的find()方法用于查找第一个符合条件的元素，找到则返回该元素，否则返回undefined。语法为array.find(callback)，支持当前元素、索引和原数组三个参数。其特点包括：匹配到第一个结果立即停止遍历、不改变原数组、支持箭头函数简化代码。与filter()返回所有匹配项不同，find()只返回首个结果；与indexOf()相比，find()能直接查找对象属性。典型应用场景包括通过ID查找用户对象或快速检索首个符合条件的元素。
2025-07-24 19:38:49
332
原创 Web前端：JavaScript some()迭代方法
JavaScript数组的some()方法用于检查数组中是否存在满足指定条件的元素。该方法会对每个元素执行回调函数，一旦找到符合条件的元素就立即返回true并停止遍历，否则返回false。语法为array.some(callback)，其中回调函数接收当前元素、索引和原数组三个参数。与filter()、every()等方法相比，some()在只需要判断存在性时性能更优。典型应用场景包括表单验证、权限检查等。关键特点包括：不修改原数组、遇到匹配立即终止、对空数组返回false。
2025-07-24 19:29:33
451
原创 Web前端：JavaScript every()迭代方法
JavaScript数组的every()方法详解 every()是JavaScript数组的高阶函数，用于检测所有元素是否满足指定条件。其核心特性包括：1）返回布尔值（全满足为true，否则false）；2）短路运算（遇false立即停止）；3）不改变原数组；4）空数组默认返回true。语法为array.every(callback(element[, index[, array]])[, thisArg])。典型应用包括表单验证、权限校验和数据一致性检查。
2025-07-24 19:21:13
395
原创 Web前端开发：JavaScript reduce() 方法
reduce是JavaScript数组方法，用于将数组元素"缩减"为单个值，如求和、拼接字符串或构建新数据结构。其语法为array.reduce(callback, initialValue)，其中callback接收累积值(acc)、当前值(cur)等参数，必须返回新的acc值。典型应用包括：计算总和（数字数组）、连接字符串（对象数组）、统计频率（计数对象）和数组扁平化。
2025-07-24 19:09:32
941
原创 Web前端开发：JavaScript遍历方法详解与对比
本文对比了JavaScript中常用的6种循环方法。传统for循环最基础灵活，支持索引操作；for...of适合遍历可迭代对象的值；for...in用于对象属性遍历；forEach是数组专用方法；map和filter分别用于数组转换与筛选。关键区别在于返回值、中断能力和适用数据类型。实践建议：数组遍历根据需求选择方法（for/forEach/for...of/map/filter），对象遍历用for...in并过滤原型属性，避免用for...in遍历数组。
2025-07-23 22:50:58
444
原创 Web前端：JavaScript鼠标事件
本文介绍了6种常见鼠标事件及其用法：1）onclick（单击触发，用于按钮操作）；2）ondblclick（双击触发，注意与单击事件冲突）；3）onmouseover（移入触发，会冒泡）；4）onmouseout（移出触发，会冒泡）；5）onmouseenter（移入触发，不冒泡）；6）onmouseleave（移出触发，不冒泡）。重点区分了onmouseover/out（会冒泡）与onmouseenter/leave（不冒泡）的特性差异，并提供了典型应用场景和代码示例。
2025-07-17 18:35:20
176
原创 Web前端：CSS背景相关属性的用法
CSS背景属性详解：从基础到高级应用 本文系统介绍了CSS背景属性的核心用法和高级技巧。基础部分涵盖背景颜色（支持十六进制、RGB和透明度）、背景图片（包括渐变和多背景叠加）、重复方式、定位和尺寸控制等属性。高级特性涉及背景定位基准、绘制区域和复合写法。文章还提供了实用技巧，如多背景层叠加、渐变创意背景和背景动画实现，并针对常见问题给出了解决方案，如Retina屏幕优化和背景色溢出处理。这些属性组合使用可以创建丰富的视觉效果，是Web开发必备技能。
2025-07-10 19:24:00
233
原创 Web前端：table标签的用法与属性
本文介绍了HTML表格的基础结构与专业应用技巧。主要内容包括：1）表格基本标签（table/tr/td/th）及结构化元素（thead/tbody/tfoot）；2）单元格合并方法（colspan/rowspan）；3）现代CSS替代传统表格属性的方案（如border-collapse）；4）响应式设计、可访问性优化等专业实践；5）常见误区与替代方案。文章强调应使用语义化标签、CSS控制样式，并兼顾可访问性需求，避免传统表格布局的弊端。适用于需要展示结构化数据的网页开发场景。
2025-07-10 19:10:23
1041
原创 Web前端开发： :has功能性伪类选择器
摘要： :has()是CSS3新增的功能性伪类选择器，解决了CSS长期无法根据子元素反向选择父元素的痛点。它允许开发者通过后代/兄弟元素的存在或状态来选择目标元素，支持复杂嵌套条件和链式调用。典型应用包括表单验证反馈、动态样式联动等。目前主流浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）均已支持。需注意性能优化和伪元素限制，其优先级由内部选择器决定。该特性显著提升了CSS的选择能力，减少了对JavaScript的依赖，是Web开发的重要进步。（148字）
2025-07-08 19:40:59
337
原创 Web前端开发： :where(伪类函数选择器)
CSS :where() 伪类函数选择器是 CSS Selectors Level 4 规范引入的新特性，具有以下特点：1. 零优先级特性：不会增加选择器的优先级权重，使样式更容易被覆盖；2. 简化代码：减少重复选择器写法；3. 容错机制：忽略无效选择器而不影响整体规则；4. 嵌套支持：允许多层嵌套使用。主要应用场景包括：降低选择器特异性、避免样式冲突、与 :is() 选择器结合使用等。与 :is() 选择器的主要区别在于优先级处理方式。该选择器在现代浏览器中（Chrome 88+、Firefox 78+、
2025-07-08 19:27:55
402
原创 Web前端： :is(通用选择器)
CSS :is() 伪类选择器深度解析 摘要：CSS的:is()选择器是一种功能强大的伪类选择器，它能简化复杂的选择器编写。该选择器接受一个选择器列表作为参数，匹配列表中任意选择器选中的元素。主要特性包括：1) 简化选择器列表，减少代码冗余；2) 具有容错机制，忽略无效选择器而不影响整个规则；3) 采用参数列表中最高的优先级值；4) 支持嵌套使用。与传统方法相比，:is()能显著提高代码可读性和维护性，现代浏览器对该选择器支持良好。实际应用中，它可用于统一设置标题样式、优化优先级处理等场景，是提升CSS开发
2025-07-08 19:15:41
401
原创 Web前端：not（否定伪类选择器）
CSS中的:not()伪类选择器用于排除特定元素，语法为selector:not(selector-to-exclude)。它支持简单选择器（类、ID、属性等），CSS4允许复杂参数但需注意兼容性。典型应用包括：排除特定类别的p元素、过滤多个条件的div元素、筛选不含特定属性的链接。优先级由基础选择器和排除选择器共同决定。注意事项包括不支持嵌套伪元素和CSS3的简单选择器限制。合理使用:not()可以简化代码，避免样式覆盖，提升CSS的灵活性和精确性。（149字）
2025-07-08 19:03:53
484
原创 Web前端：全选框的使用
这段代码实现了一个交互式全选功能，包含以下核心功能： HTML结构分为全选按钮和三个选项复选框 JavaScript逻辑实现了： 全选/取消全选功能 自动检测选项选择状态（全选、部分选、全不选） 使用indeterminate属性显示"-"中间状态 事件监听机制确保状态实时同步： 点击全选按钮时自动勾选所有选项 选择单个选项时自动计算全选按钮状态 采用DOMContentLoaded确保脚本在页面加载完成后执行
2025-07-04 17:00:07
287
原创 鸿蒙应用开发：Slider（滑动选择器）
本文详细介绍了HarmonyOS元服务开发中的Slider组件使用方法。该组件提供滑块交互功能，适用于音量控制、亮度调节等场景。文章涵盖三大核心内容：1) 组件属性配置，包括最小值/最大值设置、步长控制、颜色定制等12个参数；2) 事件处理说明，包含拖动结束(bindchange)和拖动过程(bindchanging)两个关键事件；3) 完整代码示例，展示了多种场景下的Slider实现方式，包括基本用法、样式定制和动态参数配置。通过JS逻辑层代码，还演示了如何响应滑块操作并实时更新界面状态
2025-06-27 14:54:59
355
原创 鸿蒙应用开发：Web组件
@ohos.web.webview组件提供了网页显示和Web控制能力，从API 8开始支持。组件支持Phone、PC、Tablet等设备，访问在线网页需网络权限。主要功能包括：加载在线/本地网页（通过$rawfile或resource协议）、隐私模式、同步渲染模式及共享渲染进程。使用时需注意：不支持转场动画，同一页面的多个Web组件需绑定不同WebviewController。示例代码展示了各种使用场景，包括基本网页加载、隐私模式设置、同步渲染和进程共享。本地资源加载时，resource协议可正确处理
2025-06-24 16:10:51
806
原创 Web前端开发：JavaScript中的eval()函数
eval() 是 JavaScript 的“屠龙刀”——威力巨大但极易伤及自身。作为专业开发者，我们的第一原则是：优先寻找替代方案。
2025-06-08 15:20:54
544
原创 HTML前端开发：JavaScript 常用事件详解
JavaScript常见事件总结：包含点击(onclick)、悬停(onmouseover/enter)、移出(onmouseout/leave)和键盘(onkeydown)等核心交互事件的使用方法。
2025-06-08 15:12:46
757
原创 HTML前端开发：JavaScript 获取元素方法详解
本文总结了JavaScript中获取DOM元素的两种核心方法。传统getElementBy系列包括getElementById()、getElementsByClassName()等，返回动态集合；现代querySelector系列支持CSS选择器，返回静态集合。
2025-06-08 15:02:09
564
原创 HTML前端开发：JavaScript的条分支语句if，Switch
if你的万能瑞士军刀，处理各种条件判断（真假、范围、组合逻辑），灵活但处理多个精确匹配时可能稍显冗长。switch处理单个变量匹配多个精确值时的利器，结构清晰，可读性好，但要注意break和严格相等比较。
2025-06-08 14:49:01
1346
原创 Web前端开发：JavaScript的使用
在HTML中，<script>标签用于嵌入JavaScript代码，代码必须位于<script>与</script>之间。JavaScript可以通过document.getElementById方法获取DOM元素，并使用innerHTML属性修改其内容。脚本可以放置在<head>或<body>部分，甚至外部文件中。外部脚本通过<script>标签的src属性引入，具有代码分离、易于维护和加速页面加载的优势。外部脚本可以引用完整URL或相对路径，且不能包含<script>标签。
2025-05-23 15:59:44
872
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人