Vue百日学习计划Day16-18天详细计划-Gemini版

重要提示：

  • 番茄时钟： 每个番茄钟为25分钟学习，之后休息5分钟。每完成4个番茄钟，进行一次15-30分钟的长休息。
  • 动手实践： DOM 操作和事件处理的理解高度依赖于实际编码。请务必在浏览器中创建 HTML 页面，并配合 JavaScript 代码进行实验。
  • 开发者工具： 熟练使用浏览器的开发者工具 (特别是 Elements 和 Console 面板) 对学习 DOM 操作至关重要。
  • 资源利用：
    • MDN Web Docs (Web API - Document Object Model): https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
    • MDN Web Docs (事件): https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events
  • 当前日期： 2025年5月16日 (用于知晓信息时效性，DOM 和事件核心概念相对稳定)

学习目标 Day 16-18：DOM 操作与事件

  • Day 16：DOM 基础与节点查找、属性操作
    • 理解什么是 DOM (文档对象模型) 及其树形结构。
    • 掌握常用的 DOM 节点查找方法。
    • 学习如何读取和修改元素的属性和内容。
  • Day 17：DOM 节点操作与事件监听基础
    • 掌握创建、添加、插入和删除 DOM 节点的方法。
    • 理解事件和事件监听器的概念。
    • 学习使用 addEventListener 来处理用户交互。
  • Day 18：事件流 (冒泡与捕获) 与事件委托
    • 深入理解事件冒泡和事件捕获阶段。
    • 掌握事件委托的概念、优势及其实现方式。
    • 能够应用事件委托优化性能和简化代码。

每日学习计划 (3小时/天)

Day 16: DOM 基础与节点查找、属性操作

  • 第1个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： DOM 简介与树形结构。
    • 内容： 阅读 MDN 关于 DOM 的介绍。理解 DOM 是 HTML/XML 文档的编程接口，它将文档解析为一个由节点和对象组成的结构 (通常称为 DOM 树)。认识常见的节点类型 (Document, Element, Text, Attribute)。
    • 实践： 随便打开一个网页，使用浏览器开发者工具的 “Elements” 面板查看其 DOM 树结构，尝试对应 HTML 标签和 DOM 节点。
  • 第2个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 查找 DOM 节点 (一): document.getElementById(), document.getElementsByTagName().
    • 内容： 学习通过元素 ID 获取单个元素节点。学习通过标签名获取 HTMLCollection (动态集合)。
    • 实践： 创建一个简单的 HTML 页面，包含不同 ID 和标签的元素。使用 JavaScript 获取这些元素并在控制台打印出来。观察 getElementsByTagName 返回的结果。
  • 第3个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 查找 DOM 节点 (二): document.getElementsByClassName(), document.querySelector().
    • 内容： 学习通过类名获取 HTMLCollection。学习 querySelector 使用 CSS 选择器语法获取匹配的第一个元素节点。
    • 实践： 在 HTML 页面中添加带 class 的元素，练习使用 getElementsByClassName 和 querySelector (尝试不同的 CSS 选择器，如类选择器、后代选择器)。
  • 第4个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 查找 DOM 节点 (三): document.querySelectorAll().
    • 内容： 学习 querySelectorAll 使用 CSS 选择器语法获取所有匹配的元素节点，返回一个静态的 NodeList。
    • 实践： 使用 querySelectorAll 获取多个元素，并尝试遍历 NodeList。对比其与 HTMLCollection 的区别 (例如，动态性)。
    • (长休息: 15-30分钟)
  • 第5个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 读取和修改元素属性 (Attribute vs Property)。
    • 内容： 学习使用 getAttribute(), setAttribute(), removeAttribute()。理解 HTML 属性 (attributes) 和 DOM 对象属性 (properties) 之间的区别与联系 (例如 id, class vs className, value)。
    • 实践： 获取并修改 HTML 元素的标准属性 (如 id, class, src, href) 和自定义属性 (data-*)。
  • 第6个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 读取和修改元素内容与样式。
    • 内容： 学习 innerHTML, textContent, innerText 的区别和用法。学习通过 element.style 对象修改内联样式，以及通过 element.classList (add, remove, toggle, contains) 操作类名来改变样式。
    • 实践： 获取一个元素的 HTML 内容和纯文本内容并进行修改。尝试动态改变一个元素的背景颜色、字体大小，以及通过添加/删除 CSS 类来改变其外观。

Day 17: DOM 节点操作与事件监听基础

  • 第1个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 创建 DOM 节点: document.createElement(), document.createTextNode().
    • 内容： 学习如何使用 JavaScript 动态创建新的元素节点和文本节点。
    • 实践： 创建一个新的 <p> 元素和一个文本节点，并尝试将文本节点的内容设置好。
  • 第2个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 添加 DOM 节点: appendChild(), insertBefore().
    • 内容： 学习如何将创建的节点添加到 DOM 树中。appendChild 将节点添加到指定父元素的子节点列表末尾。insertBefore 将节点插入到指定父元素的某个已有子节点之前。
    • 实践： 将上一个番茄钟创建的 <p> 元素和文本节点组合并添加到 HTML 页面的某个现有元素 (如 <body> 或某个 <div>) 内部。
  • 第3个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 删除和替换 DOM 节点: removeChild(), replaceChild().
    • 内容： 学习如何从 DOM 中移除一个子节点。学习如何用一个新的节点替换一个已有的子节点。
    • 实践： 选中页面上的某个元素，然后将其从 DOM 中删除。创建一个新元素，并用它替换页面上的另一个现有元素。
  • 第4个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 事件简介与事件监听器。
    • 内容： 理解什么是事件 (如点击、鼠标悬停、键盘按下等)。了解事件监听器 (event listener) 或事件处理器 (event handler) 的概念。
    • 实践： 阅读 MDN 关于事件的介绍，思考网页中常见的用户交互行为。
    • (长休息: 15-30分钟)
  • 第5个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 使用 addEventListener() 添加事件监听。
    • 内容： 学习 element.addEventListener(type, listener, useCapture) 的语法。第一个参数是事件类型 (如 'click', 'mouseover')，第二个参数是事件触发时执行的回调函数，第三个参数通常默认为 false (事件冒泡阶段处理)。
    • 实践： 为页面上的一个按钮添加一个点击事件监听器，当按钮被点击时，在控制台输出一条消息或改变页面上某个元素的文本。
  • 第6个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 事件对象 (Event Object)。
    • 内容： 理解当事件发生时，会创建一个事件对象并作为参数传递给事件处理函数。了解事件对象常用的属性 (如 event.target, event.currentTarget, event.type, event.preventDefault(), event.stopPropagation()).
    • 实践： 在事件处理函数中打印事件对象，查看其包含的信息。尝试使用 event.target 来确定具体是哪个元素触发了事件。为一个链接添加点击事件，并使用 event.preventDefault() 来阻止其默认的跳转行为。

Day 18: 事件流 (冒泡与捕获) 与事件委托

  • 第1个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 事件流 (Event Flow) - 事件冒泡 (Bubbling)。
    • 内容： 理解事件冒泡的概念：当一个元素上的事件被触发时，同样的事件会依次在它的所有祖先元素上被触发，从内到外。
    • 实践： 创建嵌套的 <div> 元素，为内部和外部的 <div> 都添加相同的点击事件监听器。点击内部 <div>，观察事件处理函数的执行顺序。
  • 第2个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 事件流 (Event Flow) - 事件捕获 (Capturing)。
    • 内容： 理解事件捕获的概念：与冒泡相反，事件从 window 开始，逐级向下传播到目标元素。可以通过将 addEventListener 的第三个参数设置为 true 来在捕获阶段处理事件。
    • 实践： 修改上一个练习，将外部 <div> 的事件监听器设置为在捕获阶段触发，观察执行顺序的变化。
  • 第3个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 停止事件传播: event.stopPropagation().
    • 内容： 学习如何使用 event.stopPropagation() 来阻止事件继续在 DOM 树中冒泡或捕获。
    • 实践： 在内部 <div> 的事件处理函数中调用 event.stopPropagation()，观察外部 <div> 的事件处理函数是否还会执行。
  • 第4个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 事件委托 (Event Delegation) - 概念与优势。
    • 内容： 理解事件委托是将事件监听器添加到父元素上，利用事件冒泡来管理子元素上的事件。了解其优势：减少内存消耗、简化动态添加元素的事件处理。
    • 实践： 阅读相关资料，思考哪些场景适合使用事件委托 (例如：一个有很多列表项的 <ul>)。
    • (长休息: 15-30分钟)
  • 第5个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 事件委托 (Event Delegation) - 实现。
    • 内容： 学习如何在父元素的事件处理函数中，通过检查 event.target 来判断事件的实际来源，并执行相应的操作。
    • 实践： 创建一个 <ul> 列表，只给 <ul> 元素添加一个点击事件监听器。当点击某个 <li> 时，在控制台输出该 <li> 的内容。尝试动态添加新的 <li> 到列表中，验证事件委托依然有效。
  • 第6个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： DOM 操作与事件综合练习。
    • 内容： 结合 Day 16-18 所学，尝试完成一个小的交互功能。例如：
      • 一个简单的待办事项列表：可以输入内容，点击按钮添加事项到列表中，点击已添加的事项可以将其标记为完成或删除。
    • 实践： 动手实现上述小功能，重点运用节点创建、添加、删除以及事件监听和事件委托。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/81306.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SearchClassUtil

SearchClassUtil

路径扫描工具SearchClassUtil&#xff0c;用于扫描指定包&#xff08;XXXX&#xff09;下的所有.class文件&#xff0c;并将它们的全限定类名&#xff08;如tomcat.SearchClassUtil&#xff09;收集到列表中返回。该工具使用递归文件遍历和反射机制&#xff0c;是实现 Spring 框…
阅读更多...
云服务器的运用自如

云服务器的运用自如

云服务器的运用自如&#xff1a;从基础到高阶的实战指南&#xff08;2025版&#xff09; 云服务器作为数字化转型的核心工具&#xff0c;其灵活性和高效性已覆盖从个人开发者到企业级应用的广泛场景。以下是基于当前技术趋势的云服务器深度运用策略&#xff0c;涵盖核心应用、…
阅读更多...
解密企业级大模型智能体Agentic AI 关键技术：MCP、A2A、Reasoning LLMs-docker MCP解析

解密企业级大模型智能体Agentic AI 关键技术：MCP、A2A、Reasoning LLMs-docker MCP解析

解密企业级大模型智能体Agentic AI 关键技术&#xff1a;MCP、A2A、Reasoning LLMs-docker MCP解析 这里面有很重要的原因其中一个很其中一个原因是因为如果你使用docker的方式&#xff0c;你可以在虚拟环境下就类似于这个沙箱的这个机制可以进行隔离。这对于安全&#xff0c;…
阅读更多...
快慢指针算法（Floyd 判圈算法）

快慢指针算法（Floyd 判圈算法）

快慢指针&#xff08;又称龟兔赛跑算法&#xff09;是一种常用的链表操作技巧&#xff0c;通过两个移动速度不同的指针遍历链表&#xff0c;用于解决链表中环检测、中点查找等问题。以下是其核心应用场景和实现方法&#xff1a; 1. 链表环检测 问题描述&#xff1a; 判断链表中…
阅读更多...
独立开发者利用AI工具快速制作产品MVP

独立开发者利用AI工具快速制作产品MVP

在当今快速发展的科技时代&#xff0c;独立开发者面临着前所未有的机遇与挑战。曾经需要花费数天甚至数周才能完成的产品MVP&#xff08;Minimum Viable Product&#xff0c;最小可行性产品&#xff09;&#xff0c;如今借助强大的AI工具&#xff0c;可以在短短1小时内实现。 …
阅读更多...
Spark处理过程-转换算子和行动算子

Spark处理过程-转换算子和行动算子

&#xff08;一&#xff09;RDD的处理过程 RDD经过一系列的“转换”操作&#xff0c;每一次转换都会产生不同的RDD&#xff0c;以供给下一次“转换”操作使 用&#xff0c;直到最后一个RDD经过“行动”操作才会真正被计算处理。 1.延迟。RDD中所有的转换都是延迟的&…
阅读更多...
设置环境变量启动jar报

设置环境变量启动jar报

1. 环境变量设置 set PATHC:\Program Files\java17\jdk-17.0.9\bin;%PATH%2. 启动jar java -jar jar包名3. 记录原因 PATH路径前添加java执行文件路径才会管用。添加后可以试试以下命令 直接输入PATH 回车 PATH进行java版本测试 java -version
阅读更多...
589. N叉树的前序遍历迭代法：null指针与栈的巧妙配合

589. N叉树的前序遍历迭代法：null指针与栈的巧妙配合

一、题目描述 给定一个N叉树的根节点&#xff0c;返回其节点值的前序遍历结果。前序遍历的定义是&#xff1a;先访问根节点&#xff0c;再依次遍历每个子节点&#xff08;从左到右&#xff09;。例如&#xff0c;对于如下N叉树&#xff1a; 1/ | \3 2 4 / \ 5 6前序遍历结果…
阅读更多...
显性知识的主要特征

显性知识的主要特征

有4个主要特征&#xff1a; 客观存在性静态存在性可共享性认知元能性
阅读更多...
奥运数据可视化：探索数据讲述奥运故事

奥运数据可视化：探索数据讲述奥运故事

在数据可视化的世界里&#xff0c;体育数据因其丰富的历史和文化意义&#xff0c;常常成为最有吸引力的主题之一。今天我要分享一个令人着迷的奥运数据可视化项目&#xff0c;它巧妙地利用交互式图表和动态动画&#xff0c;展现了自1896年至今奥运会的发展历程和各国奥运成就的…
阅读更多...
Mysql存储过程(附案例)

Mysql存储过程(附案例)

​ 文章目录 存储过程概述1、基本语法2、变量①、系统变量②、用户自定义变量③、局部变量 3、流程控制语句①、if语句②、参数③、case语句④、while语句⑤、repeat语句⑥、loop语句⑦、cursor游标⑧、handler 4、存储函数 存储过程概述 存储过程是事先经过编译并存储在数据…
阅读更多...
小波变换＋注意力机制成为nature收割机

小波变换＋注意力机制成为nature收割机

小波变换作为一种新兴的信号分析工具&#xff0c;能够高效地提取信号的局部特征&#xff0c;为复杂数据的处理提供了有力支持。然而&#xff0c;它在捕捉数据中最为关键的部分时仍存在局限性。为了弥补这一不足&#xff0c;我们引入了注意力机制&#xff0c;借助其能够强化关注…
阅读更多...
SQLMesh 增量模型从入门到精通：5步实现高效数据处理

SQLMesh 增量模型从入门到精通：5步实现高效数据处理

本文深入解析 SQLMesh 中的增量时间范围模型&#xff0c;介绍其核心原理、配置方法及高级特性。通过实际案例说明如何利用该模型提升数据加载效率&#xff0c;降低计算资源消耗&#xff0c;并提供配置示例与最佳实践建议&#xff0c;帮助读者在实际项目中有效应用这一强大功能。…
阅读更多...
Android应用内存分析与优化 - 工具篇之Booster

Android应用内存分析与优化 - 工具篇之Booster

序 在原理篇中&#xff0c;我们发现在App内存的分布中&#xff0c;Code是占大头的部分&#xff0c;所以我们可以从App体积方面想办法&#xff0c;通过减小App体积达到降低内存的目的&#xff0c;同时&#xff0c;根据权威的机构分析&#xff0c;体积与用户下载和留存有很大的联…
阅读更多...
金属加工液展|切削液展|2025上海金属加工液展览会

金属加工液展|切削液展|2025上海金属加工液展览会

2025上海金属加工液展览会 时间&#xff1a;2025年12月2-4日 地点&#xff1a;上海新国际博览中心 2025上海金属加工液展规划30000平方米展览规模&#xff0c;预设展位1200个&#xff0c;将为国内外加工液产业提供一个集“展示、合作、交易、发展”于一体的综合性平台&#…
阅读更多...
React学习———Redux 、 React Redux和react-persist

React学习———Redux 、 React Redux和react-persist

Redux Redux是一个流行的JavaScript状态管理库&#xff0c;通常用于React等前端框架结合使用。Redux 的设计思想是让应用的状态变得可预测、可追踪、易于调试和测试。 Redux的核心l理念 单一数据源&#xff1a;整个应用的状态被存储在一个唯一的Store对象中&#xff0c;所有…
阅读更多...
Python字符串常用方法详解

Python字符串常用方法详解

文章目录 Python字符串常用方法详解一、字符串大小写转换方法(常用)1. 基础大小写转换2. 案例&#xff1a;验证码检查&#xff08;不区分大小写&#xff09; 二、字符串查找与替换方法1. 查找相关方法2. 替换相关方法 三、字符串判断方法1. 内容判断方法 四、字符串分割与连接方…
阅读更多...
MyBatis—动态 SQL

MyBatis—动态 SQL

MyBatis—动态 SQL 一、动态 SQL 的核心作用 动态 SQL 主要解决以下问题&#xff1a; 灵活性&#xff1a;根据不同的输入参数生成不同的 SQL 语句&#xff08;如条件查询、批量操作&#xff09;。 可维护性&#xff1a;减少重复代码&#xff0c;通过标签化逻辑提高 SQL 可读…
阅读更多...
Python机器学习笔记（二十五、算法链与管道）

Python机器学习笔记（二十五、算法链与管道）

对于许多机器学习算法，特定数据表示非常重要。首先对数据进行缩放，然后手动合并特征，再利用无监督机器学习来学习特征。因此，大多数机器学习应用不仅需要应用单个算法，而且还需要将许多不同的处理步骤和机器学习模型链接在一起。Pipeline类可以用来简化构建变换和模型链的…
阅读更多...
YOLOv3深度解析：多尺度特征融合与实时检测的里程碑

YOLOv3深度解析：多尺度特征融合与实时检测的里程碑

一、YOLOv3的诞生&#xff1a;继承与突破的起点 YOLOv3作为YOLO系列的第三代算法&#xff0c;于2018年由Joseph Redmon等人提出。它在YOLOv2的基础上&#xff0c;针对小目标检测精度低、多类别标签预测受限等问题进行了系统性改进。通过引入多尺度特征图检测、残差网络架构和独…
阅读更多...
最新文章

Copyright @ 2022~2023