前端
关注
分享
扫一扫
文章平均质量分 89
Dontla
这个作者很懒，什么都没留下…
展开
-
lodash库介绍（一个现代JavaScript实用工具库，提供模块化、性能优化和额外功能）JavaScript库（防抖、节流、函数柯里化）JS库
Lodash是一个现代JavaScript实用工具库，提供模块化、性能优化和额外功能，使JavaScript编程更加简单高效。该库包含200多个函数，涵盖数组、对象、函数、字符串等多种数据类型的处理。Lodash通过提供丰富的工具函数，极大地简化了JavaScript开发工作。合理使用Lodash可以使代码更加简洁、可读性更强，同时避免重复造轮子，提高开发效率。原创 2025-04-03 23:34:25 · 327 阅读 · 0 评论 -
函数柯里化（Currying）介绍（一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术）
函数柯里化是一种强大的编程技巧，能够提高代码的灵活性和可重用性。通过将多参数函数转化为一系列单参数函数，开发者可以更方便地处理函数的调用和组合。原创 2025-04-03 23:28:20 · 620 阅读 · 0 评论 -
Chrome调试控制台中输入+new Date()含义
方法，该方法返回自1970年1月1日午夜（UTC）以来的毫秒数。这是一个常用的技巧，用于快速获取当前时间的时间戳。创建了一个表示当前日期和时间的Date对象，而在JavaScript中，使用一元加号（的作用是将当前的日期和时间转换为时间戳（以毫秒为单位的数字）。在Chrome调试控制台中输入。）运算符可以将对象转换为数字。返回一个Date对象，而。会调用Date对象的。原创 2025-03-25 17:03:46 · 840 阅读 · 0 评论 -
html模板头、html头（meta charset、meta http-equiv、meta name、initial-scale、defer、link rel、script src）html文档头
标签用于包含文档的元数据，比如标题、字符集、样式表链接、脚本等。在HTML文件中，模板头通常是指。原创 2025-03-25 14:01:35 · 587 阅读 · 0 评论 -
flexible.js源码分析（解决移动端屏幕适配问题的轻量级JavaScript库，在不同尺寸、不同分辨率的移动设备上的页面等比例缩放）动态缩放（设计稿分成10份，每份为1 rem）自适应缩放
Flexible.js是一个用于解决移动端屏幕适配问题的轻量级JavaScript库，由手机淘宝前端团队开发。它通过动态设置HTML根元素的font-size以及viewport的scale，实现了在不同尺寸、不同分辨率的移动设备上的页面等比例缩放，为开发者提供了便捷的适配方案。Flexible.js通过动态设置根元素的font-size和viewport的scale，巧妙地解决了移动端多屏适配问题。原创 2025-03-24 17:52:42 · 909 阅读 · 0 评论 -
前端对象及其范围解释（浏览器对象、页面对象）浏览器窗口、网页内容——HTML文档、HTML元素、浏览器信息、地址栏URL信息、用户屏幕信息、标签页历史记录、浏览器存储数据
Window 对象代表整个浏览器窗口。它是所有JavaScript对象的顶层对象，也是全局环境。Document 对象专指加载到浏览器窗口中的网页内容部分。Element 对象代表文档中的具体HTML元素，如段落、图片、表单等。History 对象包含用户在当前浏览器标签页中访问过的页面历史记录。Location 对象代表当前页面的URL信息，对应浏览器的地址栏。Navigator 对象包含有关访问者浏览器的信息。Screen 对象包含有关用户屏幕的信息。存储对象用于在浏览器中保存数据。原创 2025-03-21 17:59:54 · 839 阅读 · 0 评论 -
HTML属性tabindex=“-1“含义（用于控制元素在页面上的键盘导航顺序，值越小，元素越早获得焦点；值为-1表示元素不能通过Tab键获得焦点）模态弹框、不可见元素
通常用于需要程序控制焦点的元素，比如在某些情况下需要动态聚焦的弹框或隐藏元素。来确保弹框在打开时可以通过 JavaScript 聚焦，而不影响页面的其他元素的焦点顺序。这个元素不会在用户按下 Tab 键时被聚焦，但可以通过 JavaScript 控制其焦点。属性的值可以影响元素是否可以通过键盘的 Tab 键获得焦点，以及它在焦点顺序中的位置。元素可以通过 Tab 键获得焦点，并且它在焦点顺序中遵循文档的自然顺序。元素可以通过 Tab 键获得焦点，并且它在焦点顺序中的位置由。值越小，元素越早获得焦点。原创 2025-03-20 18:03:07 · 757 阅读 · 0 评论 -
Sass介绍（CSS预处理器，为CSS提供了编程能力，是目前最流行的CSS扩展语言之一）（Syntactically Awesome Style Sheets）SaaS
创建可重用的函数进行值计算。原创 2025-03-20 14:45:56 · 803 阅读 · 0 评论 -
bootstrap介绍（前端框架）（提供超过40种可复用组件，从导航栏到轮播图，从卡片到弹窗）bootstrap框架
/ 自定义主题色// 修改组件圆角// 导入Bootstrap。原创 2025-03-20 14:17:49 · 1494 阅读 · 0 评论 -
Html label标签中的for属性（关联表单控件：将标签与特定的表单元素（如输入框、复选框等）关联起来；提高可用性；无障碍性）
当用户点击"省份名称："文本时，会自动获取输入框的焦点，使用户体验更好。：对于使用屏幕阅读器的用户，这种关联可以帮助他们更好地理解表单结构。：当用户点击标签文本时，浏览器会自动将焦点转移到关联的表单元素上。：它将标签与特定的表单元素（如输入框、复选框等）关联起来。属性的值必须与要关联的表单元素的。属性是一个重要的无障碍功能属性。原创 2025-03-16 17:37:05 · 964 阅读 · 0 评论 -
黑马node.js教程（nodejs教程）——AJAX-Day01-04.案例_地区查询——查询某个省某个城市所有地区（代码示例）
axiosTest.html效果ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ原创 2025-03-16 17:33:00 · 1068 阅读 · 0 评论 -
Axios介绍（前端开发处理网络请求首选工具，基于Promise HTTP客户端，可以在浏览器和Node.js环境使用）（Axios库）
Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。它提供了一套简单且一致的API，使得发送HTTP请求变得异常便捷。自发布以来，Axios已成为前端开发中处理网络请求的首选工具之一。Axios作为一个功能丰富、使用简便的HTTP客户端库，凭借其优秀的API设计和强大的功能扩展性，成为现代前端开发中处理网络请求的首选工具。通过合理利用配置选项、拦截器、错误处理等机制，可以构建出高效、健壮的前端应用。原创 2025-03-15 17:31:51 · 1111 阅读 · 0 评论 -
XMLHttpRequest对象（XHR对象）介绍（浏览器API对象，允许客户端脚本发送HTTP请求与服务器进行数据交换，无需刷新整个页面）（AJAX核心组件）
XMLHttpRequest (XHR) 是一个浏览器API对象，允许客户端脚本发送HTTP请求与服务器进行数据交换，而无需刷新整个页面。作为AJAX技术的核心组件，XHR于1999年首次在Internet Explorer 5中引入，后来被所有主流浏览器采纳并标准化。XMLHttpRequest作为AJAX技术的基石，虽然在现代Web开发中有了更新的Fetch API，但因其广泛的浏览器兼容性、丰富的事件处理和强大的功能特性，仍然在许多场景中发挥着不可替代的作用。原创 2025-03-15 17:02:52 · 945 阅读 · 0 评论 -
原生应用与非原生应用对比（移动应用开发领域两大主要技术路线）（原生应用Native App指专门为特定平台开发的应用程序，直接使用平台提供的SDK(软件开发工具包)和编程语言构建）
原生应用(Native App)是指专门为特定平台开发的应用程序，直接使用平台提供的SDK(软件开发工具包)和编程语言构建。iOS平台：使用Swift或Objective-C语言，基于Xcode开发环境Android平台：使用Kotlin或Java语言，基于Android Studio开发环境应用层 → 业务逻辑层 → 平台API调用层 → 操作系统。原创 2025-03-15 16:03:32 · 1042 阅读 · 0 评论 -
AJAX介绍（Asynchronous JavaScript and XML）（Web异步通信：不重新加载页面，与服务器交换数据并更新网页）XMLHttpRequest：xhr、Fetch API
AJAX技术彻底改变了Web开发模式，使网页从静态文档演变为动态应用程序。尽管经历了十多年的发展，其核心理念仍然影响着现代Web技术的设计和实现。掌握AJAX不仅是理解Web开发历史的重要一环，也是构建现代互联网应用的基础技能。原创 2025-03-15 15:39:45 · 644 阅读 · 0 评论 -
Figma介绍（基于云的协作式界面设计工具，主要用于UI/UX设计、原型制作和团队协作）
Figma 是一款基于云的协作式界面设计工具，主要用于 UI/UX 设计、原型制作和团队协作。它颠覆了传统设计工具的单机模式，以云端实时协作和跨平台兼容性为核心优势，适用于设计师、开发者、产品经理等多个角色。核心特点。原创 2025-03-14 11:38:26 · 1511 阅读 · 0 评论 -
React框架中的Hooks优先（一种开发理念和官方推荐模式，强调以函数组件（Function Components）和Hooks API作为首要开发方式）
总的来说，标志着 React 向函数式编程范式的全面倾斜，旨在简化复杂 UI 逻辑的管理，并为未来功能铺平道路。如果你是 React 新手，建议直接从 Hooks 开始学习；现有项目可以评估成本后逐步迁移。原创 2025-03-13 15:48:04 · 594 阅读 · 0 评论 -
前端轮播图carousel案例（带详细注释）
【代码】前端轮播图carousel案例（带详细注释）原创 2025-03-12 16:48:44 · 428 阅读 · 0 评论 -
Next.js介绍（React框架）
的开源前端框架，专注于简化现代 Web 应用和网站的构建过程。它由 Vercel 团队开发和维护，旨在提供开箱即用的功能，例如。如果你需要一个高性能、灵活且功能全面的 React 框架，Next.js 是一个理想的选择！，帮助开发者快速构建高性能、SEO 友好的应用程序。Next.js 是一个基于。原创 2025-03-12 15:23:07 · 696 阅读 · 0 评论 -
Web前端技术栈推荐：HTML/CSS/JavaScript + Node.js + Next.js + React + TypeScriptWeb；项目代码目录结构、生产环境目录结构
该架构方案通过严格的分层策略确保各模块的高度内聚，配合 TypeScript 的静态类型校验机制，有效提升复杂业务场景下的开发效率与系统可靠性。即便作为新手，这种技术组合也能让你从一开始就接触到业界最佳实践，建立现代Web开发的正确认知。尽管初期学习曲线稍陡峭，但基础一旦建立，后续开发效率会大幅提升。技术栈是非常现代且合理的选择，尤其是对于想要构建高性能全栈应用的新手。— 一、基础工程结构 —— 二、环境适配策略 —— 三、架构设计哲学 —— 四、演进路径 —原创 2025-03-12 15:05:34 · 1110 阅读 · 0 评论 -
Apache ECharts介绍（基于JavaScript开发的开源数据可视化库，用于创建交互式图表）
Apache ECharts 是一个强大的开源数据可视化库，基于 JavaScript 开发，适合创建交互式图表。它由 Apache 软件基金会维护，广泛应用于 Web 开发，尤其在需要展示复杂数据的场景中。对于刚接触数据可视化的小白来说，ECharts 提供了简单易用的接口，同时具备深度定制的能力。以下将详细介绍其功能、使用方法以及发展历程。过渡动画Apache ECharts 凭借丰富的图表类型、强大的交互性和优异的性能，成为数据可视化的理想选择。对于小白来说，它易于上手，通过简单配置即可生成图表；原创 2025-03-06 14:38:58 · 1254 阅读 · 0 评论 -
JavaScript web APIs第一天——04-code——06-随机抽奖案例.html
【代码】JavaScript web APIs第一天——04-code——06-随机抽奖案例.html。原创 2025-02-25 14:46:25 · 1043 阅读 · 0 评论 -
JavaScript querySelector()、querySelectorAll() CSS选择器解析（DOM元素选择）（DOM查询）
返回匹配的第一个元素返回NodeList集合参数接受标准CSS选择器语法支持在任意Element节点上调用。原创 2025-02-24 23:24:00 · 565 阅读 · 0 评论 -
JavaScript获取DOM元素语法总结（getElementsByName()、querySelector()、querySelectorAll()）
JavaScript 通过多种方法获取 DOM 元素，包括等。这些方法适合不同场景，性能和灵活性各有优劣。研究表明，是最快的，但更灵活。DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，表现为网页结构的树状对象，每个对象对应页面的一部分，如 HTML 元素。获取 DOM 元素是交互式网页开发的核心，用于修改内容、样式或行为。：按 ID 获取单个元素。：按类名获取多个元素。：按标签名获取多个元素。：按 name 属性获取多个元素。原创 2025-02-24 23:03:33 · 1171 阅读 · 0 评论 -
黑马JS教程笔记（JavaScript教程）——JS基础
<head><title>JavaScript练习</title></head><body><script></script></body>原创 2025-02-18 17:52:54 · 895 阅读 · 0 评论 -
HTML元素一览（html, head, body、h1-h6, p, div, span、ul, ol, li, dl, dt, dd、table, tr, td, th等）（HTML5元素）
提供六个级别的标题，帮助组织内容的层级结构。每个级别的标题都有其特定的样式和大小，是行内容器元素，不会打断文本流，常用于对文本片段应用样式或添加特定的标识。用于创建文本段落，会自动在段落前后添加一定的间距。是块级容器元素，会独占一行，常用于布局和内容分组。创建无序列表，每个项目前显示圆点或其他符号。包含文档的元数据，如标题和字符编码等信息。作为整个文档的根元素，包含所有其他元素。创建有序列表，自动为项目添加数字编号。定义显示在浏览器标签页上的文档标题。为图片或其他媒体内容创建容器。包含所有可见的页面内容。原创 2025-02-18 17:05:46 · 849 阅读 · 0 评论 -
为什么JavaScript数组不推荐用for in遍历？（JS数组遍历）
如果只需要遍历元素值，使用 for…of如果需要同时访问索引和元素，使用 forEach如果需要更细粒度的控制（如提前终止循环），使用传统的 for 循环如果需要转换数组元素，考虑使用 map如果需要筛选元素，使用 filter如果需要累积计算，使用 reduce这样可以让代码更加清晰、可靠且高效。原创 2025-02-18 14:50:11 · 857 阅读 · 0 评论 -
Javascript中null、NaN、undefined区别（JS空值、Javascript空值）（?.链操作符）
JavaScript中的nullundefined和NaN代表了不同类型的"空"或"无效"状态，理解它们的区别对于编写健壮的代码至关重要。原创 2025-02-17 17:03:32 · 463 阅读 · 0 评论 -
黑马JS教程笔记（JavaScript）——JS基础——Day3-46-综合案例-渲染柱形图案例上——16-综合案例-根据数据生成柱形图.html（代码和代码解释）
你可以试着输入不同数字（比如100,200,150,300），看看柱子高度的变化效果。这是最简单的动态图表实现方式，适合入门学习~这是每个网页都有的基础结构，相当于搭了一个空房子。这个.box就像画图的画板，设置了大小和边框。每个柱子其实是一个div（网页里的一个方块）/* 这里放JavaScript代码 */原创 2025-02-17 11:28:21 · 442 阅读 · 0 评论 -
JavaScript document.write()介绍（直接将内容写入HTML文档的早期方法，已逐渐被现代DOM操作方法取代）
插入到 body 中的段落原创 2025-02-14 18:29:56 · 916 阅读 · 0 评论 -
jQuery介绍（快速、简洁JavaScript库，诞生于2006年，主要目标是简化HTML文档操作、事件处理、动画和Ajax交互）
诞生于 2006 年（由 John Resig 创建），主要目标是简化 HTML 文档操作、事件处理、动画和 Ajax 交互。如果你在维护旧项目或需要快速实现简单交互，jQuery 依然实用；但对于新项目，建议探索现代框架以获得更高的开发效率和可维护性。自动处理 IE 等浏览器的差异，开发者无需为兼容性额外编码。用类似 CSS 的选择器快速选取元素，例如。，替代原生 JavaScript 冗长的。jQuery 是一个快速、简洁的。等方法，轻松实现动态效果。统一事件监听写法，例如。原创 2025-02-11 13:48:22 · 1125 阅读 · 1 评论 -
npm介绍（Node Package Manager）（JavaScript生态中最流行的包管理工具，主要用于Node.js项目的依赖管理）
npm（Node Package Manager）是 JavaScript 生态中最流行的。锁定依赖的精确版本，确保团队环境的一致性（自动生成，无需手动修改）。，主要用于 Node.js 项目的依赖管理。开始实践，逐步熟悉常用命令和文件结构。定义项目元数据、依赖、脚本等。原创 2025-02-11 11:45:14 · 435 阅读 · 0 评论 -
Chrome自定义设备（自定义分辨率）设备分辨率设备、浏览器添加并启用设备、模拟屏幕、模拟分辨率、模拟设备
添加自定义设备如果你的开发机器屏幕分辨率较小，可能需要调整缩放比例以便更好地查看页面内容。通过以上步骤，你可以在 Chrome 开发者工具中添加并启用自定义设备，从而模拟各种高分辨率屏幕。原创 2024-12-16 08:30:00 · 4077 阅读 · 0 评论 -
2. 获取自己优快云文章列表并按质量分由小到大排序（文章质量分、博客质量分、博文质量分）（阿里云API认证）
上一篇文章中，我们已经成功获取到了自己的优快云已发布博文列表：本篇文章将实现获取每篇原创文章的质量分，并由小到大排序。我们上一篇文章得到的articles.json是这样的：下面代码将读取它并逐个获取质量分：''''data': {'message': '文章质量良好','''# 读取articles.json文件# 遍历每个元素并处理# 保存处理后的结果到新的JSON文件。原创 2023-08-12 21:14:47 · 1718 阅读 · 2 评论 -
优快云博客批量查询质量分https://yma16.inscode.cc/请求超时问题（设置postman超时时间）（接口提供者设置了nginx超时时间）
两个请求可能是相互关联的，或者是为了满足不同的需求。它可以将异步操作封装成一个Promise对象，通过链式调用的方式来处理异步操作的结果。一开始我还以为是这个开源项目本身的问题，设置了请求超时时间，我还给它改了超时时间，后来发现不是的。本来是100000的，我给改成1000000了，我对js代码不熟，也不知道这个单位是毫秒还是秒。总结起来，这段代码的作用是通过axios发送HTTP请求，获取远程优快云等级的数据。查询别人的一下子就返回了，查询我自己的，1分钟还不返回，然后就显示超时了。原创 2023-08-12 16:24:18 · 729 阅读 · 0 评论 -
1. 如何爬取自己的优快云博客文章列表（获取列表）（博客列表）（手动+python代码方式）
我需要你用python帮我遍历这个文件，然后将每个article中的内容提取出来，做成一个json文件，每个文章提取为一个数组元素，数组元素中要有以下字段：article_url字段（class="blog-list-box"后面那个）、article_title字段（class="blog-list-box-top"后面那个）、article_type（class="article-type article-type-yc"后面那个）后来想到一个办法，既然不让爬，就自己手工拷贝吧，这还是能做到的。原创 2023-08-11 21:59:35 · 977 阅读 · 0 评论 -
【JavaScript】如何为html按钮button绑定键盘事件（左键、右键、组合按钮、组合键）链接href绑定键盘事件 getElementById()、addEventListener()
在上面的代码中，我们首先获取了上一页和下一页按钮的引用，然后使用addEventListener方法来监听整个文档的keydown事件。在事件处理程序中，我们检查按下的键是否是左键（keyCode为37）或右键（keyCode为39），如果是，则分别执行上一页按钮和下一页按钮的点击操作（通过调用click方法）。要为上一页和下一页按钮绑定键盘的左键和右键，可以使用JavaScript来实现。首先，需要为上一页和下一页按钮添加一个唯一的id属性，以便能够通过JavaScript选择它们。原创 2023-07-29 14:13:42 · 3316 阅读 · 0 评论 -
flask html转义字符 jinja2模板语法警告：Special characters must be escaped : [ ＞ ].(spec-char-escape)（不用改，不用转义）
需要注意的是，不同的特殊字符可能有不同的转义字符，具体使用哪个转义字符取决于你想要转义的特殊字符。这个警告可能是由于静态代码分析工具对HTML代码进行检查时发现了未经转义的特殊字符 “>”，并认为它可能导致潜在的安全问题，例如跨站脚本攻击（XSS）。在HTML中，有一些特殊字符需要进行转义，以避免被解析为HTML标签或其他特殊含义。在HTML中，特殊字符需要进行转义，以避免被解析为HTML标签或其他特殊含义。这些转义字符可以在HTML中使用，以确保特殊字符正确显示，并避免与HTML标签或其他语法冲突。原创 2023-07-23 01:46:25 · 1820 阅读 · 2 评论 -
html 文本框提示（input提示、text提示、提示文字提示、点击时提示消失）placeholder属性、value属性、js onfocus方法、onblur方法
html input文本框中在没有值的情况下，添加提示的文字，当要输入文字的时候，提示的文字消失。关于html文本框input输入框的提示文字，有两种方法可以实现。3）js 方式添加的提示文字，当光标定位到 input 输入框中时，提示文字就会消失。1）js 方法添加的提示文字不同于使用 placeholder 属性添加的效果。2）placeholder 属性添加的提示文字，只有输入内容时文字才会消失。运行结果： 当input输入框，输出文字时，提示的文字信息会消失。原创 2023-07-22 01:45:38 · 13807 阅读 · 0 评论 -
html a标签换行显示
这样，每个a标签都会被显示为一个块级元素，从而每个a标签都会独占一行。可以使用CSS的display属性来实现多个a标签每行显示一个。标签后面都会有一个换行符，从而实现每个。如果不使用CSS，可以使用。标签后面插入一个换行符。标签独占一行的效果。原创 2023-07-21 22:43:48 · 2891 阅读 · 0 评论