- 博客(109)
- 收藏
- 关注
RSS订阅原创 BOM知识点
• history.back()方法实现返回上一页，history.forward()方法实现前进到下一页，history.go()方法可根据指定的偏移量在历史记录中导航。• document：表示当前加载的网页文档，是window对象的属性，可通过window.document访问，也可直接使用document。• window.resizeTo()和window.moveTo()方法分别用于调整窗口大小和移动窗口位置。• history：用于操作浏览器的历史记录，可实现页面的前进、后退等功能。
2025-05-18 23:56:55
264
原创 DOM知识点
• 修改节点：可以直接修改元素节点的属性、文本内容等，如element.setAttribute('class', 'new-class')修改属性，element.textContent = 'new text'修改文本内容。• 通过节点的parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling等属性来遍历DOM树，访问不同的节点。• 删除节点：使用removeChild方法从父节点中删除指定的子节点。
2025-05-18 23:56:24
385
原创 拓展运算符与数组解构赋值的区别
• 数组解构赋值：可以通过指定位置或使用剩余参数...来灵活地提取和赋值数组元素，还可以设置默认值，如[a = 1, b = 2] = []，此时a为1，b为2。• 数组解构赋值：使用方括号[]，在等号左边通过指定变量名来提取数组中的值，如[a, b, c] = arr，将数组arr的前三个元素分别赋给a、b、c。• 拓展运算符：主要用于将数组展开成一系列独立的元素，或者将多个数组合并为一个数组，以及在函数调用时将数组作为可变参数传递。• 数组解构赋值：用于从数组中提取值，并将其赋给变量。
2025-05-18 23:55:26
261
原创 拓展运算符
mergedArr就是[1, 2, 3, 4]。• 对象合并：用于合并多个对象，后面的对象属性会覆盖前面相同属性的对象。，mergedObj为{a: 1, b: 2, d: 4}。，obj2就是{a: 1, b: 2, c: 3}。例如，console.log(...[1, 2, 3])会输出1 2 3。• 它执行的是浅拷贝，对于对象和数组中的引用类型，拷贝的是引用，而不是实际的值。拓展运算符的语法是三个点（...），它可以将数组或对象展开成多个元素或属性。
2025-05-18 23:54:17
238
原创 Vivo 手机官网交互效果实现解析
垂直滚动指示器：显示当前滚动位置左侧文本导航：根据滚动位置高亮不同的配置选项右侧信息面板：展示详细的镜头配置信息，随滚动平滑切换效果预览：当用户滚动鼠标滚轮时，页面不会发生传统的滚动，而是触发自定义的交互逻辑：红色指示器会在垂直刻度线上移动，左侧文本导航会高亮对应选项，右侧信息面板会平滑切换显示内容。
2025-05-07 16:30:13
588
原创 基于 jQuery 实现复选框全选与选中项查询功能
全选与反选：通过标题栏的复选框，可以一键选中或取消选中内容区域的所有复选框。联动更新：当内容区域的复选框全部被选中时，标题栏的复选框自动勾选；若有任意一个取消选中，标题栏复选框则取消勾选。选中项查询：点击 “点击查询被勾选的复选框” 按钮，能够获取并展示当前被勾选的复选框数量和具体元素，方便后续数据处理。
2025-05-05 22:17:58
1085
原创 基于 jQuery 实现灵活可配置的输入框验证功能
多类型验证：可对用户名、电话、密码等不同字段设置独立的验证规则，如长度限制、格式匹配等。实时反馈：用户输入时实时检查，输入不符合要求时立即显示错误提示。提交前验证：在表单提交时自动校验所有字段，确保数据完整合法。适用于用户注册表单、订单填写、信息修改等各类需要输入数据校验的业务场景。
2025-05-05 22:15:30
621
原创 利用jQuery 实现多选标签下拉框，提升表单交互体验
通过 HTML、CSS 和 jQuery 的结合，我们成功实现了一个功能完备、交互友好的多选标签下拉框。这种设计不仅提升了表单的美观性和操作便捷性，还能适应多种业务场景的多选需求。开发者可以根据实际项目需要，对标签数据、样式和功能进行进一步的扩展与优化，为用户带来更好的使用体验。
2025-05-05 22:12:18
779
原创 JavaScript 实现输入框的撤销功能
在 Web 开发中，为输入框添加撤销功能可以极大地提升用户体验，方便用户快速回滚到之前的输入状态。本文将通过一段简单的 HTML、CSS 和 JavaScript 代码，详细介绍如何实现输入框的撤销功能。
2025-05-05 22:09:05
436
原创 使用 JavaScript 实现数据导出为 Excel 和 CSV 文件
通过以上代码，我们实现了在 Web 页面中点击按钮将数据导出为 Excel 和 CSV 文件的功能。在实际应用中，我们可以根据具体需求对数据格式和文件名称进行调整，以满足不同的业务场景。
2025-05-05 22:06:06
726
原创 给函数参数设置默认值的方式
直接在函数参数列表中为参数赋值默认值，这是 ES6 引入的标准语法，简洁且语义明确。当函数接受一个对象参数时，通过解构赋值为对象属性设置默认值。将默认值设置为一个函数调用，每次调用原函数时动态生成默认值。结合箭头函数和解构赋值，为参数对象的属性设置默认值。）为参数提供默认值，但这种方式会将所有假值（如。选择合适的方式可以让你的代码更简洁、更健壮！）都替换为默认值，可能导致意外结果。在函数内部检查参数是否为。，然后手动赋值默认值。
2025-04-27 17:57:03
412
原创 JavaScript 模板字符串：更优雅的字符串处理方式
模板字符串（Template Literals）是 ES6（ES2015）引入的一种新的字符串表示方式，它提供了更强大、更灵活的字符串拼接功能。与传统的字符串使用单引号（）或双引号（）不同，模板字符串使用反引号（）来包裹内容。支持多行字符串可以嵌入表达式支持标签模板（Tagged Templates）保留换行和缩进格式模板字符串是 JavaScript 中一项非常实用的特性，它让字符串处理变得更加简洁、直观和灵活。
2025-04-27 17:53:22
432
原创 JavaScript 解构赋值（下）：对象解构与高级应用
对象解构赋值是 JavaScript 中处理对象数据的强大工具，它让我们能够以简洁、直观的方式提取对象中的值。结合默认值、别名和嵌套解构，我们可以处理各种复杂的数据结构。解构赋值的高级应用场景包括函数参数解构、处理 API 响应和动态属性名解构等。合理使用这些技巧，可以让你的代码更加优雅、高效。掌握解构赋值是编写现代 JavaScript 代码的关键一步。通过模式匹配和简洁的语法，你可以减少样板代码，提高代码的可读性和维护性。希望这两篇博客能帮助你全面理解和应用 JavaScript 解构赋值！
2025-04-27 17:48:18
256
原创 JavaScript 解构赋值（上）：基础语法与数组解构
解构赋值（Destructuring Assignment）是 JavaScript 中一种强大的语法特性，允许你从数组或对象中提取值，并将它们赋值给变量。这种语法不仅让代码更简洁，还提高了可读性和维护性。解构赋值的核心思想是模式匹配，通过与源数据结构相同的模式来提取值。它支持嵌套结构、默认值和别名等特性，适用于各种场景。数组解构赋值是 JavaScript 中处理数组数据的一种高效方式。通过模式匹配，我们可以轻松提取数组中的值，并赋值给变量。这种语法不仅减少了样板代码，还使代码更加直观和易于理解。
2025-04-27 17:45:54
205
原创 闭包函数的应用与理解
闭包在带来便利的同时，也可能会导致内存泄漏。简单来说，就是一个函数内部返回另一个函数，并且内部函数可以访问外部函数作用域中的变量，即使外部函数已经执行完毕，这些变量也不会被销毁，仍然可以被内部函数访问和操作。• 数据封装和隐私保护：通过闭包可以将一些变量隐藏在外部无法直接访问的作用域中，实现类似私有变量的效果，只有通过闭包内部暴露的方法才能访问和修改这些变量。• 函数柯里化：利用闭包可以实现函数柯里化，将接受多个参数的函数转化为接受单一参数的函数序列，提高函数的复用性和灵活性。closure();
2025-04-20 23:59:19
181
原创 绝对路径与相对路径
• 示例：如果当前工作目录是C:\Users\Admin\Documents，要访问该目录下Projects文件夹中的file.txt文件，相对路径可以是Projects/file.txt。如果在C:\Users\Admin\Documents\Projects目录下，要访问上一级目录中的readme.txt文件，相对路径可以是../readme.txt，其中..表示上一级目录。在Linux系统中，/home/user/Documents/file.txt也是绝对路径，/表示根目录。
2025-04-20 23:57:58
299
原创 如何编写JavaScript插件
为了确保插件不会污染全局命名空间或与其他代码发生冲突，应将插件封装在一个立即执行函数表达式（IIFE）中4。编写 JavaScript 插件是一项重要的技能，尤其是在现代前端开发中。以下是关于如何构建一个高效、可复用的 JavaScript 插件的关键点。因此，在初始化阶段，通常会定义一组默认参数，并将其与用户的输入合并4。为了让插件更加灵活，开发者应当设计一些公开的方法让用户能够控制插件的行为4。以上便是创建一个基础但功能强大的 JavaScript 插件所需遵循的主要原则和技术要点。
2025-04-20 23:56:30
319
原创 JavaScript 定时器
函数用于在指定的延迟时间后执行一次回调函数。它接受两个参数，第一个参数是要执行的回调函数，第二个参数是延迟的毫秒数。
2025-04-13 23:23:46
414
原创 css定位
定位是前端开发中不可或缺的技能。通过合理运用不同的定位方式，可以创建出各种复杂而精美的页面布局。掌握定位的基本概念和高级应用场景，能让你在前端开发中更加得心应手。
2025-04-13 23:20:38
349
原创 实现撤销功能
HTML 骨架： 首先，代码以标准的 HTML5 文档类型声明 开头，确保浏览器以正确的模式渲染页面。 则指定了页面语言为英语，这有助于搜索引擎优化和辅助技术（如屏幕阅读器）的适配。在 标签内，设置了字符编码为 ，这是现代网页开发的标准编码方式，能正确显示各种字符。同时，通过 标签配置视口 ，让页面在不同设备（如手机、平板、电脑）上都能自适应显示，初始缩放比例设为 1.0，保证页面初次加载时的呈现效果。 引入外部资源： 为了快速使用 Tailwind CSS 框架的浏览器版本，引入了 ，Tail
2025-04-08 08:53:55
722
原创 用 HTML、CSS 和 jQuery 打造多页输入框验证功能
通过 HTML、CSS 和 jQuery 的紧密协作，这个多页输入框验证实例不仅在功能上满足了对用户输入数据的严格把控，在视觉与交互体验上也做到了精益求精，为我们打造高质量网页表单提供了优秀的范例。无论是新手入门学习前端表单验证，还是老手寻求优化表单交互的灵感，相信都能从中汲取到满满的干货，赶紧动手试试吧！，它有着白色的背景、柔和的阴影以及圆润的边角，为用户营造出舒适的输入环境。巧妙切换，实现了多页表单的无缝衔接，初始状态下仅有第一页。显示，其他页面皆隐藏，等待用户操作触发页面切换。
2025-04-07 10:22:00
980
原创 前端表单输入框验证
此示例构建了一个简单的表单，包含用户名、电话、密码、地址、行业和学校等输入框，以及一个提交按钮。用户输入数据后，点击提交按钮，系统会依据预设规则对输入内容进行验证，若所有输入都有效，会弹出提示框告知验证成功；若有输入不满足规则，会在对应输入框下方显示错误信息。通过上述代码，我们实现了一个简单而灵活的表单输入框验证系统。利用 jQuery 的强大功能，我们可以方便地选取元素、绑定事件和操作 DOM。通过合理设置验证规则和错误信息，能有效确保用户输入的数据质量。
2025-04-04 15:00:00
643
原创 数据一键导出为 Excel 文件
本示例实现了一个简单的数据导出功能，页面上有一个 “一键导出” 按钮，点击该按钮后，会将预设的 JSON 数据导出为 Excel 文件。导出的 Excel 文件包含列标题（姓名、电话、邮箱）和数据内容，文件名包含当前日期。通过上述代码，我们实现了一个简单的数据导出功能，用户点击按钮即可将 JSON 数据导出为 Excel 文件。该功能主要利用了 JavaScript 的字符串拼接、base64编码和 HTML5 的<a>标签的download属性。
2025-04-04 12:00:00
879
原创 动态医疗排班表格
通过以上步骤，我们成功使用 jQuery 实现了一个动态的医疗排班表格。该表格能够根据当前月份动态生成表头，从服务器获取数据并渲染到表格中，同时提供了固定列和操作按钮等功能。在实际项目中，可根据具体需求对代码进行优化和拓展，使其更加完善。
2025-04-04 11:30:00
915
原创 多条件搜索
此系统主要实现了从服务器获取数据，将数据渲染到页面上，并提供多条件搜索功能，让用户能够依据负责人姓名、事务所名称、事务所简称等条件筛选数据。系统采用了 HTML、CSS 和 JavaScript（结合 jQuery 库）来构建，具备良好的用户界面和交互性。通过对这个基于 jQuery 的多条件搜索数据展示系统的详细分析，我们了解了其代码结构、功能实现和优化方向。该系统通过 AJAX 请求获取数据，使用 jQuery 动态更新页面内容，并提供多条件搜索功能，为用户提供了便捷的数据浏览和筛选体验。
2025-04-04 10:45:00
1414
原创 带任务显示的日历功能
显示当前月份的日历，包括上个月的部分日期和本月的所有日期。标记当前日期，使其与其他日期区分开来。根据中存储的任务数据，在相应日期上显示任务信息，包括任务开始、进行中和结束的状态。提供切换到上一个月、下一个月和返回今日的功能。通过以上代码，我们成功实现了一个带任务显示的日历功能。该日历可以根据中的任务数据，在相应日期上显示任务信息，同时提供了月份切换和返回今日的功能。在实际应用中，我们可以进一步优化代码，例如从后端获取任务数据、添加更多的交互效果等，以提升用户体验。
2025-04-04 07:30:00
1789
原创 多选标签下拉框
提供多个标签选项供用户选择。支持多选功能，用户可同时选中多个标签。已选标签会在下拉按钮中显示，方便用户查看。可通过点击删除按钮移除已选标签。点击下拉按钮可展开或收起选项列表，点击页面其他区域可关闭下拉框。通过以上步骤，我们成功使用 jQuery 实现了一个功能完善的多选标签下拉框。该下拉框具有良好的用户交互性和可扩展性，在实际项目中可根据需求进行定制和优化。希望本文能为你在 Web 开发中实现类似功能提供有价值的参考。
2025-04-04 00:58:22
1194
原创 基于 jQuery 实现二级下拉框选择功能
我们要实现一个二级下拉框，用户点击输入框后显示父级选项列表，鼠标悬停在父级选项上时显示对应的子集选项列表，用户可以点击父级或子集选项将选项名称填写到输入框中。同时，点击页面其他区域可隐藏下拉框，并且鼠标悬停在选项上时会有变色效果。通过上述代码，我们成功实现了一个基于 jQuery 的二级下拉框选择功能。这种实现方式利用了 jQuery 的强大功能，简化了 DOM 操作和事件处理，提高了开发效率。同时，通过封装鼠标移入移出变色效果的函数，提高了代码的可维护性和复用性。
2025-04-04 00:45:25
443
原创 定时器的定义
定时器是一种常用的程序设计工具或功能模块，它允许开发者在指定的时间间隔后执行一段特定的代码或任务。定时器广泛应用于需要时间控制的任务调度、延迟操作和周期性检查等场景。
2025-03-30 22:52:40
353
原创 Cookie可以存哪些指？
需要注意的是，由于安全性和隐私保护的原因，cookie并不适合用来储存过于机密的重要资料比如明文密码之类的东西；另外现代web架构下localstorage/sessionStorage也逐渐成为替代方案之一供开发者选择根据业务场景合理安排各自优缺点加以权衡取舍才是王道。Cookie是一种小型文本文件，通常由服务器生成并发送到用户浏览器中保存。它可以用于存储一些简单但非常有用的信息，以便于后续请求时自动附带回服务器使用。
2025-03-30 22:50:44
236
原创 页面重构过程中如何保证良好的跨浏览器一致性？
不同浏览器默认渲染某些HTML元素的方式略有差异，通过引入像Normalize.css这样的工具可以帮助消除这些偏差，使得所有浏览器都从相同的起点开始渲染您的文档。综上所述，在整个开发周期内保持高度警惕意识配合科学合理的策略规划才能够真正达成理想中的“所见即所得”效果让用户无论在哪种平台上都能够获得流畅满意的浏览经历。在页面重构的过程中，为了确保网页能够在不同的浏览器中呈现一致的效果，我们需要采取一系列措施来提高跨浏览器的一致性。
2025-03-30 22:48:45
552
原创 HTML5和CSS3的一些特性
在实际工作中，我会依据最新的W3C标准规范来进行编码实践，确保兼容主流桌面端和移动端设备浏览器显示无误的基础上追求极致用户体验。通过对原始PSD文件或其他形式的设计稿深入解析拆分，合理选择合适的标记语言版本编写框架布局，利用媒体查询适应各种屏幕尺寸适配方案调整样式规则集，并且持续关注性能指标监控反馈不断优化整体效率表现。HTML5 和 CSS3 是现代网页设计的基础技术，它们引入了许多新特性和功能，极大地丰富了网页的表现力和交互能力。: 可以轻松生成线性及径向颜色过渡，减少图片使用率的同时提升渲染速度。
2025-03-30 22:47:30
564
原创 JavaScript一行代码技巧
9. 获取URL参数：const params = Object.fromEntries(new URLSearchParams(window.location.search));4. 从数组中获取随机元素：const randomElement = array[Math.floor(Math.random() * array.length)];10. 深拷贝对象：const deepCopy = JSON.parse(JSON.stringify(object));，比parseInt()更简洁。
2025-03-23 22:46:25
160
原创 JavaScript严格模式
文章主要介绍JavaScript严格模式，包括启用原因、方式以及需避开的常见陷阱，助力开发者写出更健壮代码。◦ 未声明变量：严格模式下给未声明变量赋值会报错，应始终用var、let或const声明变量。◦ 八进制语法：严格模式下010这样的八进制语法无效，需用0o前缀表示八进制，如0o10。◦ this的值：严格模式下函数内部this不会默认指向全局对象，使用时需注意其指向变化。◦ 删除变量或函数：严格模式禁止删除变量和函数，不可执行此类操作。◦ 赋值给只读属性：不能给只读属性赋值，避免此类错误操作。
2025-03-23 22:45:46
176
原创 如何修改select中的字体？
如果你需要更高级的自定义样式（如自定义下拉箭头、背景色等），可能需要使用JavaScript和HTML/CSS来模拟<select>标签的功能，或者使用第三方库（如Select2、Chosen等）。你可以直接在<select>标签内部使用style属性来设置字体大小，或者通过CSS选择器来统一设置所有<select>标签的字体大小。在使用CSS时，建议将样式规则放在<style>标签内（位于<head>部分）或外部CSS文件中，以提高代码的可维护性和可读性。2. 修改字体样式（如字体家族）
2025-03-22 14:59:36
372
原创 CSS中px和em的区别？
em 是相对单位，根据继承它的父元素的字体大小来计算实际的大小。默认情况下，1em 等于父元素的字体大小。例如，如果父元素的字体大小为 16px，那么 1em 将等于 16px。如果一个元素的字体大小为 2em，那么它将等于父元素字体大小的两倍。在上面的例子中，.parent 元素的字体大小为 16px，所以 .child 元素的高度将等于 16px。.child 元素的宽度设置为 200px，所以它将始终显示为 200 个像素宽。例如，一个宽度为 200px 的元素将始终显示为 200 个像素宽。
2025-03-22 14:58:03
192
原创 自执行函数（Self-Invoking Function）
/ 函数体console.log('这是一个自执行函数');})();在上述代码中，首先使用括号()将匿名函数包裹起来，这是因为 JavaScript 解析器需要明确这里是一个表达式。然后紧跟另一个括号()，这个括号用于调用前面定义的函数。// 函数体console.log('这也是一个自执行函数');}());这种形式同样是将匿名函数用括号包裹，不过调用函数的括号被放在了匿名函数定义括号的内部。此外，除了用括号包裹，还可以使用!!console.log('使用!运算符的自执行函数');}()
2025-03-09 23:47:49
369
原创 闭包函数是什么?
闭包是指有权访问另一个函数作用域中的变量的函数。简单来说，即使该函数执行完毕，其作用域内的变量也不会被销毁，而是会被闭包所引用，从而可以在其他地方继续使用这些变量。
2025-03-09 23:45:47
515
原创 深入理解 DOM 元素
在网页开发的世界里，DOM（Document Object Model，文档对象模型）元素宛如一座桥梁，连接着静态的 HTML 结构与动态的 JavaScript 交互逻辑。它让原本呆板的网页变得鲜活生动，能够实时响应用户的每一个操作。今天，就让我们一同深入探索 DOM 元素的奥秘。
2025-03-09 23:43:31
614
原创 JavaScript 是什么？
在当今数字化的世界里，网页与我们的生活紧密相连，而 JavaScript（简称 JS）无疑是让网页 “动” 起来、充满交互性的神奇魔法。无论你是初涉编程的新手，还是经验丰富的开发者，深入了解 JS 都能为你的技术宝库增添强大力量。
2025-03-09 23:39:11
2185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人