- 博客(91)
- 收藏
- 关注
RSS订阅原创 rem 响应式布局（ rem 详解）
摘要： rem是CSS中基于根元素字体大小的相对单位（1rem=根font-size值），具有全局可控性，避免em的嵌套问题。通过动态调整根字体大小（如62.5%技巧或JS计算），可实现响应式布局。适用场景包括组件尺寸、间距系统等，但字体建议用em保持层级，边框用px确保精度。开发时可借助预处理器函数简化计算，需注意兼容性（IE9+）并提供px回退。rem适合响应式项目布局，结合vw可优化视口适配，而固定元素建议使用px。
2025-08-18 20:43:51
244
原创 Less( 预处理语言)的使用方法
本文介绍了LESS变量的基础用法、HTML间接调用方式、动态操作实现方法及高级应用技巧。主要内容包括：1.定义和使用基础变量；2.通过编译后的CSS类名调用样式；3.结合CSS变量实现动态效果；4.变量插值、运算、颜色函数等高级用法；5.工作流配置建议。特别强调LESS变量需预编译为CSS，无法在浏览器中直接使用，动态修改需借助CSS变量实现。
2025-08-18 20:25:51
155
原创 Less (CSS 预处理器)
Less是一种CSS预处理器，为CSS添加编程特性如变量、嵌套、混合等，使样式代码更易维护。核心功能包括：变量定义复用值，嵌套反映层级关系，混合实现代码复用，支持运算和颜色函数处理，模块化导入管理。Less需编译为CSS使用，可通过命令行或构建工具实现。与Sass功能相似但语法更贴近CSS，适合提升大型项目的样式开发效率和组织性。
2025-08-18 20:17:18
1029
1
原创 JavaScript递归
JavaScript递归是一种函数自调用的编程技术，适用于分治类问题。核心要素包括终止条件和递归调用，常见于数学计算（阶乘、斐波那契数列）、树结构遍历等场景。相比循环，递归代码更简洁但存在栈溢出风险，可通过尾递归优化、缓存中间结果或改用循环来优化。使用时需注意终止条件、性能及调用栈限制，在树处理等场景中仍具有独特优势。合理选择递归或循环需权衡可读性与执行效率。
2025-08-15 20:25:54
286
原创 JavaScript 中 call、apply 和 bind 方法的区别与使用
JavaScript中的call、apply和bind方法都能改变函数执行时的this指向，但各有特点：call立即执行函数，接收逗号分隔的参数；apply类似但接收数组参数；bind则返回绑定this的新函数而不立即执行。call适合明确参数个数时使用，apply擅长处理数组参数，bind主要用于固定回调函数的上下文。实际开发中，call在性能上优于apply，而bind在事件处理等需要保持上下文的场景中表现突出。这三个方法共同解决了JavaScript函数上下文动态绑定的核心问题。
2025-08-15 20:05:08
340
原创 JavaScript 防抖（Debounce）与节流（Throttle）
摘要： 防抖（Debounce）和节流（Throttle）是优化高频事件（如输入、滚动等）的两种策略。防抖通过延迟执行，确保事件停止触发后（如搜索框输入完毕）才执行函数，减少无效计算；节流则强制固定间隔执行一次（如滚动事件每100ms触发一次），保证流畅性。两者核心区别：防抖侧重“最后一次触发生效”，节流侧重“均匀执行”。实际开发中需根据场景选择——防抖适用于搜索、窗口调整等，节流适用于滚动、动画等高频持续事件。代码实现分别依赖setTimeout和时间戳管理触发逻辑。
2025-08-15 19:54:37
1272
原创 css中container和media的用法和区别
CSS中的@media和@container都是响应式设计工具，但作用不同：@media基于设备特性（如视口宽度）调整全局样式，适合页面整体布局；@container则基于父容器尺寸调整子元素样式，适合组件级响应。关键区别在于作用范围（全局vs局部）和响应对象（设备vs容器）。实际开发中可结合使用：@media控制页面框架，@container优化组件细节，实现更精细的响应式设计。
2025-08-14 20:03:25
1143
原创 CSS isolation属性
CSS的isolation属性用于控制元素是否创建新的层叠上下文，主要配合混合模式(mix-blend-mode等)使用。它有两个值：auto(默认)和isolate(强制创建隔离环境)。关键作用包括：隔离混合效果仅限元素内部、避免z-index冲突、优化渲染性能。典型应用场景是图像叠加特效和多背景动画。使用时需注意浏览器兼容性，避免过度创建层叠上下文影响性能。通过isolation:isolate可以确保混合效果不"泄漏"到父容器或兄弟元素。
2025-08-14 19:47:05
526
原创 CSS aspect-ratio 属性
CSS的aspect-ratio属性简化了响应式比例布局的实现，只需一行代码即可固定元素宽高比。它支持基本语法如aspect-ratio:16/9，与width/height配合使用时可自动计算另一维度。该属性适用于图片/视频比例控制、自适应正方形创建和响应式卡片布局等场景，但需注意与现代浏览器的兼容性。使用时建议搭配object-fit防止媒体元素变形，并避免与显式尺寸冲突。示例展示了如何通过aspect-ratio实现网格图库的自适应布局，在不同屏幕尺寸下自动调整比例。
2025-08-14 19:36:32
481
原创 CSS中的 :root 伪类
CSS中的:root伪类是文档根元素的选择器，主要用于定义全局CSS变量。该伪类具有以下特点：1）作为CSS变量的理想载体，支持动态主题切换；2）变量通过var()函数调用，可设置默认值；3）结合JavaScriptJavaScript可实现实时样式更新。典型应用包括主题管理、响应式设计和减少重复代码。示例展示了如何通过:root定义变量，并配合JavaScript实现深色/浅色主题切换，具有代码简洁、无需重载页面的优势。注意浏览器兼容性和变量作用域问题，现代项目推荐使用此方案提升开发效率。
2025-08-14 19:06:19
950
原创 JavaScript getComputedStyle 和 getPropertyValue 方法详解
摘要：window.getComputedStyle()方法用于获取元素最终计算后的所有CSS属性值，返回一个实时的CSSStyleDeclaration对象，可通过getPropertyValue()获取具体属性值。该方法能读取默认样式、外部样式和内联样式的叠加结果，但返回值为标准化格式（如颜色转为rgb()）。典型应用包括检测渲染尺寸、操作伪元素样式和响应式布局判断。使用时需注意属性名需用连字符格式，频繁调用可能引发性能问题，且计算结果为只读。
2025-08-14 18:42:11
406
原创 JavaScript DOM 元素节点操作详解
本文总结了JavaScript操作DOM的主要方法，涵盖获取元素、创建和修改节点、操作属性和样式等核心内容。获取元素可通过ID、类名、标签名、CSS选择器等方式，返回HTMLCollection或NodeList。节点操作包括创建、添加、删除、替换和修改内容，推荐使用textContent防XSS攻击。属性操作支持标准属性、自定义data-*属性和通用方法。样式操作包含内联样式、类名修改和计算样式获取。
2025-08-06 20:31:33
1004
原创 Web存储技术详解：sessionStorage、localStorage与Cookie
本文对比了Cookie、localStorage和sessionStorage的核心特性：存储大小（4KB/5-10MB/5-10MB）、生命周期（可设置/永久/会话级）、作用域（全窗口/全窗口/单标签页）和安全性差异。提供了三类存储的API操作示例，包括设置、读取和删除方法。针对不同场景给出使用建议：Cookie适合身份认证，localStorage适合长期偏好设置，sessionStorage适合临时会话数据。
2025-08-05 19:42:05
462
原创 BOM Cookie操作详解
本文介绍了Cookie的基本概念、操作方法和使用场景。Cookie是浏览器用于存储会话信息、用户偏好等数据的机制，核心API包括读取、设置、更新和删除操作。文章详细说明了Cookie的作用域、安全属性（如Secure、HttpOnly）和存储限制（4KB/域名）。同时对比了Cookie与localStorage的区别：Cookie适合会话管理（自动随请求发送），而localStorage适合长期存储本地数据（5-10MB）。
2025-08-05 19:31:31
250
原创 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
406
原创 JavaScript 闭包详解：概念、用法与属性
闭包是JavaScript中函数与其词法作用域的组合，使函数能访问定义时的作用域变量。核心特性包括：1）词法作用域持久化，外部变量被引用后不会被回收；2）封装性，可创建私有变量；3）运行时动态绑定变量。主要应用场景包括数据封装、函数工厂、事件处理和模块模式。需注意内存泄漏风险、性能影响和变量共享问题。闭包通过作用域链实现，包含函数自身作用域、闭包作用域和全局作用域。其核心价值在于实现状态持久化、数据封装和动态绑定。
2025-08-02 10:19:41
771
原创 JavaScript：Ajax（异步通信技术）
Ajax（Asynchronous JavaScript and XML）是一种实现异步通信的技术，其核心特点是无需刷新页面即可更新数据。本文通过示例代码演示了XMLHttpRequest的基本工作流程：创建对象、配置请求、发送请求、监听响应并处理数据。关键点包括readyState状态码（0-4）和HTTP状态码处理（如200成功、404资源不存在等）。常见问题涉及跨域错误、网络中断和JSON解析错误。示例展示了如何高效获取JSON数据并动态更新DOM，同时强调了错误处理的重要性。
2025-08-02 09:45:19
265
原创 JavaScript 定时器
JavaScript定时器使用指南：包括setTimeout和setInterval两种类型，分别用于单次延迟和周期性执行，通过clear方法清除。核心属性包括4ms最小延迟、整数ID和特定this绑定。使用场景涵盖防抖节流、动画轮询和状态延迟处理。需注意事件循环机制、闭包内存泄漏问题，推荐使用Promise封装和精确时间补偿技巧。最佳实践建议动画用requestAnimationFrame，组件清理时清除定时器，非活动页暂停定时器以优化性能。合理选择定时器类型对构建高性能应用至关重要。
2025-07-28 20:29:32
419
原创 JavaScript 函数
JavaScript函数是执行特定任务的代码块，支持多种定义方式（函数声明、表达式、箭头函数）和高级特性。核心概念包括执行上下文（this绑定差异）、闭包（封装私有变量）和高阶函数（接收/返回函数）。参数处理支持默认值、Rest参数和解构。异步编程模式涵盖回调、Promise和async/await。最佳实践涉及性能优化（惰性函数）、内存管理及函数式编程原则（纯函数、柯里化）。调试时建议使用命名函数表达式，并通过try-catch处理错误。
2025-07-28 20:20:26
302
原创 JavaScript：字符串常用操作和转义符的总结表格
本文介绍了字符串的转义符、属性和常用方法。转义符包括\n（换行）、\r（回车）等特殊字符处理方法。字符串方法如charAt()、indexOf()等均不改变原字符串，而是返回新值。重点对比了substring()、slice()和substr()三种子串提取方法：slice支持负索引，substr正逐步淘汰。还特别说明了split()的分割用法和转义符的使用场景。建议优先使用slice方法，处理路径时注意转义符。所有字符串操作均保持原字符串不变。
2025-07-28 20:09:12
180
原创 JavaScript：数组常用操作方法的总结表格
原地修改方法（直接改变原数组）：pushunshiftpopshiftsplicereversesort非破坏性方法（不改变原数组，返回新结果）：joinconcatindexOf返回值差异返回长度，pop/shift返回被删元素splice返回被删元素的数组concat返回拼接后的新数组（不修改原数组）✅使用注意：操作数组时需明确是否需要保留原数组，非破坏性方法可避免意外修改原始数据。
2025-07-28 20:04:02
240
原创 JavaScript 字符串方法详解：前端工程师的终极指南
本文总结了JavaScript字符串操作的常用方法与最佳实践，涵盖10个核心方法：length属性用于长度检查，indexOf/lastIndexOf用于搜索，slice/substring用于提取，大小写转换(toUpperCase/toLowerCase)，trim系列处理空白，split用于分割，includes优化搜索，replace实现替换，以及padStart/padEnd进行填充。文章特别强调了Unicode安全处理、性能优化技巧（如预编译正则、数组join代替连接）以及安全编码实践。
2025-07-28 19:56:47
276
原创 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
1320
原创 Web前端：JavaScript Math选字游戏 斯特鲁普效应测试
这是一个基于斯特鲁普效应的认知测试游戏。游戏通过随机显示颜色与文字不符的词语（如用红色显示的"蓝"字），要求玩家判断文字的实际颜色而非文字含义。核心功能包括：随机生成题目（使用Math.random()获取颜色和文字索引）、判断用户选择正误、计分系统（答对+1分，答错-1分）和游戏状态控制（10分获胜，0分以下失败）。游戏采用响应式设计，包含视觉反馈效果，适合测试大脑抑制习惯性反应的能力。关键知识点涉及JavaScript随机数生成、DOM操作、事件处理以及心理学中的斯特鲁普效应。
2025-07-25 20:31:23
312
原创 Web前端：JavaScript 随机点名系统案例详解
本文介绍了一个基于HTML/CSS/JavaScript的随机点名系统实现方案。该系统具备随机选择学生、动态改变背景颜色、全屏居中显示等功能。核心实现包含：1）使用数组存储学生名单；2）通过Math.random()生成随机数和RGBA颜色；3）采用Flexbox布局实现界面居中；4）添加点击事件处理逻辑。文章详细解析了随机数生成、颜色模型应用、DOM操作等关键技术点，并提供了完整的响应式设计代码，包含动画效果和键盘支持等增强功能。该案例展示了基础Web技术的综合应用，适合作为前端开发学习参考。
2025-07-25 20:04:01
722
原创 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
395
原创 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
661
原创 Web前端：JavaScript indexOf()方法
JavaScript中的indexOf()方法是一个用于查找元素位置的实用工具，适用于字符串和数组。其主要功能是返回目标元素首次出现的索引（从0开始计数），若未找到则返回-1。使用时需注意：区分大小写、仅返回第一个匹配项、支持指定起始搜索位置。常见应用场景包括检查元素是否存在、获取位置进行后续操作以及数组去重。要避免将返回值直接作为布尔值判断，建议显式检查是否不等于-1。对于数组查找，该方法采用严格类型比较（===）。该方法是编程中实现快速定位的基础工具。
2025-07-24 20:05:05
902
原创 Web前端：JavaScript findIndex⽅法
JavaScript数组的findIndex方法用于查找第一个满足条件的元素索引。它接收一个回调函数作为测试条件，返回首个使回调返回true的元素的索引，若无则返回-1。与find（返回元素）、indexOf（值匹配）不同，findIndex支持复杂条件查找且高效。典型应用场景包括查找特定属性的对象位置，比手动循环更简洁。使用时需注意检查返回的-1值表示未找到。
2025-07-24 19:54:10
820
原创 Web前端：JavaScript find（）函数内判断
JavaScript数组的find()方法用于查找第一个符合条件的元素，找到则返回该元素，否则返回undefined。语法为array.find(callback)，支持当前元素、索引和原数组三个参数。其特点包括：匹配到第一个结果立即停止遍历、不改变原数组、支持箭头函数简化代码。与filter()返回所有匹配项不同，find()只返回首个结果；与indexOf()相比，find()能直接查找对象属性。典型应用场景包括通过ID查找用户对象或快速检索首个符合条件的元素。
2025-07-24 19:38:49
342
原创 Web前端：JavaScript some()迭代方法
JavaScript数组的some()方法用于检查数组中是否存在满足指定条件的元素。该方法会对每个元素执行回调函数，一旦找到符合条件的元素就立即返回true并停止遍历，否则返回false。语法为array.some(callback)，其中回调函数接收当前元素、索引和原数组三个参数。与filter()、every()等方法相比，some()在只需要判断存在性时性能更优。典型应用场景包括表单验证、权限检查等。关键特点包括：不修改原数组、遇到匹配立即终止、对空数组返回false。
2025-07-24 19:29:33
464
原创 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
407
原创 Web前端开发：JavaScript reduce() 方法
reduce是JavaScript数组方法，用于将数组元素"缩减"为单个值，如求和、拼接字符串或构建新数据结构。其语法为array.reduce(callback, initialValue)，其中callback接收累积值(acc)、当前值(cur)等参数，必须返回新的acc值。典型应用包括：计算总和（数字数组）、连接字符串（对象数组）、统计频率（计数对象）和数组扁平化。
2025-07-24 19:09:32
951
原创 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
449
原创 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
199
原创 Web前端：CSS背景相关属性的用法
CSS背景属性详解：从基础到高级应用 本文系统介绍了CSS背景属性的核心用法和高级技巧。基础部分涵盖背景颜色（支持十六进制、RGB和透明度）、背景图片（包括渐变和多背景叠加）、重复方式、定位和尺寸控制等属性。高级特性涉及背景定位基准、绘制区域和复合写法。文章还提供了实用技巧，如多背景层叠加、渐变创意背景和背景动画实现，并针对常见问题给出了解决方案，如Retina屏幕优化和背景色溢出处理。这些属性组合使用可以创建丰富的视觉效果，是Web开发必备技能。
2025-07-10 19:24:00
234
原创 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
1058
原创 Web前端开发： :has功能性伪类选择器
摘要： :has()是CSS3新增的功能性伪类选择器，解决了CSS长期无法根据子元素反向选择父元素的痛点。它允许开发者通过后代/兄弟元素的存在或状态来选择目标元素，支持复杂嵌套条件和链式调用。典型应用包括表单验证反馈、动态样式联动等。目前主流浏览器（Chrome 105+、Safari 15.4+、Firefox 121+）均已支持。需注意性能优化和伪元素限制，其优先级由内部选择器决定。该特性显著提升了CSS的选择能力，减少了对JavaScript的依赖，是Web开发的重要进步。（148字）
2025-07-08 19:40:59
348
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人