当前位置： 首页 > article >正文

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

article 2025/9/23 18:45:55

重要提示：

  • 番茄时钟： 每个番茄钟为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 所学，尝试完成一个小的交互功能。例如：
      • 一个简单的待办事项列表：可以输入内容，点击按钮添加事项到列表中，点击已添加的事项可以将其标记为完成或删除。
    • 实践： 动手实现上述小功能，重点运用节点创建、添加、删除以及事件监听和事件委托。

相关文章：

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

重要提示&#xff1a; 番茄时钟&#xff1a; 每个番茄钟为25分钟学习&#xff0c;之后休息5分钟。每完成4个番茄钟&#xff0c;进行一次15-30分钟的长休息。动手实践&#xff1a; DOM 操作和事件处理的理解高度依赖于实际编码。请务必在浏览器中创建 HTML 页面&#xff0c;并配…...

编程日记 2025/9/6 23:57:31

从验证码绕过到信息轰炸：全面剖析安全隐患与防范策略

在数字化交互场景中&#xff0c;验证码作为区分人类操作与自动化程序的核心屏障&#xff0c;广泛应用于用户身份核验、操作权限确认等关键环节。其设计初衷是通过人机识别机制&#xff0c;保障信息系统交互的安全性与可控性。然而&#xff0c;当验证码验证机制出现异常突破&…...

编程日记 2025/7/12 4:44:15

机器学习知识自然语言处理入门

一、引言&#xff1a;当文字遇上数学 —— 自然语言的数字化革命 在自然语言处理&#xff08;NLP&#xff09;的世界里&#xff0c;计算机要理解人类语言&#xff0c;首先需要将文字转化为数学向量。早期的 One-Hot 编码如同给每个词语分配一个唯一的 “房间号”&#xff0c;例…...

编程日记 2025/9/21 17:39:48

LeetCode 820 单词的压缩编码题解

LeetCode 820 单词的压缩编码题解 题目描述 题目链接 给定一个单词列表&#xff0c;将其编码为一个索引字符串S&#xff0c;格式为"单词1#单词2#…"。要求当某个单词是另一个单词的后缀时&#xff0c;该单词可以被省略。求最终编码字符串的最小长度。 解题思路 逆…...

编程日记 2025/9/5 17:18:16

论信息系统项目的范围管理

论信息系统项目的范围管理 前言一、规划范围管理&#xff0c;收集需求二、定义范围三、创建工作分解结构四、确认范围五、控制范围 前言 为了应对烟草零售客户数量大幅度增长所带来的问题&#xff0c;切实履行控烟履约的相关要求&#xff0c;同时也为了响应国务院“放管服”政策…...

编程日记 2025/6/21 2:33:59

MySQL数据库——支持远程IP访问的设置方法总结

【系列专栏】&#xff1a;博主结合工作实践输出的&#xff0c;解决实际问题的专栏&#xff0c;朋友们看过来&#xff01; 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实…...

编程日记 2025/9/21 3:39:55

Pageassist安装（ollama+deepseek-r1）

page-assist网站&#xff1a;https://github.com/n4ze3m/page-assist 首先电脑配置node.js&#xff0c;管理员打开命令窗口输入下面命令下载bun npm install -g buncd 到你想要安装page-assist的地方&#xff08;推荐桌面&#xff09; 输入下列命令 git clone https://gith…...

编程日记 2025/9/21 7:47:37

2025年渗透测试面试题总结-安恒[实习]安全服务工程师（题目+回答）

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 安恒[实习]安全服务工程师 1. SQLMap爆出当前库名的参数是什么&#xff1f; 2. Nmap探测系统的参数&am…...

编程日记 2025/9/21 3:48:26

C#运算符

&#x1f9e0; 一、C# 运算符列表&#xff08;按类别分类&#xff09; 类别运算符一元运算符, -, , --, !, ~, (T) x算术运算符, -, *, /, %赋值运算符, , -, *, /, %, &, 比较/关系运算符, !, <, >, <, >逻辑/布尔运算符&&, 按位运算符&, 条件运…...

编程日记 2025/9/3 9:24:17

五月份嵌入式面试总结

目录 1、札记 1.1、芯片的bring up 主要做哪些工作&#xff1a; 2、Linux驱动八股文 中断与同步互斥 2.1.1 内核同步互斥的几种方式 2.1.2 互斥锁和自旋锁的区别 2.1.3 spin_lock 和 spin_lock_irqsave 的区别 2.1.4 进程上下文和中断上下文有什么区别 2.1.5 进行上下…...

编程日记 2025/9/22 20:15:08

数据库行业竞争加剧，MySQL 9.3.0 企业版开始支持个人下载

最新发现&#xff0c;Oracle 官方网站放开了 MySQL 9.3.0 企业版下载链接&#xff0c;个人用户也可以免费下载&#xff0c;不过只能用于学习、开发或者原型测试&#xff0c;不能用于生产环境。 通常我们都是下载 MySQL 社区版&#xff0c;不过 MySQL 企业版可以支持更多高级功能…...

编程日记 2025/9/21 4:09:48

Python实例题：Django搭建简易博客

目录 Python实例题 题目 1. 创建 Django 项目和应用 2. 配置项目 3. 设计模型 blog_app templates blog_app post_list.html admin.py models.py urls.py views.py blog_project urls.py 代码解释 models.py&#xff1a; admin.py&#xff1a; urls.py&…...

编程日记 2025/9/1 4:27:27

Tcping详细使用教程

Tcping详细使用教程 下载地址 https://download.elifulkerson.com/files/tcping/0.39/在windows环境下安装tcping 在以上的下载地中找到exe可执行文件&#xff0c;其中tcping.exe适用于32位Windows系统&#xff0c;tcping64.exe适用于64位Windows操作系统。 其实tcping是个…...

编程日记 2025/9/20 21:52:55

PyCharm 快捷键指南

PyCharm 快捷键指南 常用编辑快捷键 代码完成&#xff1a;Ctrl Space 提供基本的代码完成选项&#xff08;类、方法、属性&#xff09;导入类&#xff1a;Ctrl Alt Space 快速导入所需类语句完成&#xff1a;Ctrl Shift Enter 自动结束代码&#xff08;如添加分号&#…...

编程日记 2025/6/13 16:12:19

如何更改远程桌面连接的默认端口？附外网访问内网计算机方法

远程连接端口根据协议和场景不同有所差异&#xff0c;以下是常见远程连接端口的设置及修改方法&#xff0c;同时附外网访问内网计算机操作。 一、Windows远程桌面默认端口 ‌默认端口‌&#xff1a;3389&#xff08;TCP协议&#xff09;&#xff0c;用于Windows远程桌面服务&…...

编程日记 2025/6/21 15:36:41

【GAN网络入门系列】一，手写字MINST图片生成

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 博主简介&#xff1a;努力学习的22级本科生一枚 &#x1f31f;​&#xff1b;探索AI算法&#xff0c;C&#xff0c;go语言的世界&#xff1b;在迷茫中寻找光芒…...

编程日记 2025/9/21 8:54:06

ubuntu22鼠键失灵恢复记录笔记chatgpt解决

ChatGPT 说&#xff1a; 你提到“Ubuntu 22 鼠键失灵”&#xff0c;这个问题可能涉及以下几方面&#xff1a; &#x1f9ed; 先确认问题 是鼠标问题还是键盘问题&#xff0c;还是触控板&#xff1f; “鼠键”一般理解为“鼠标键”&#xff0c;请确认你是指鼠标左键/右键失灵&a…...

编程日记 2025/9/21 9:05:57

智能呼入：云蝠大模型赋能政府热线

政府热线作为连接政府与民众的重要桥梁&#xff0c;提升智能化水平&#xff0c;成为政府热线亟待解决的问题。 大模型呼入 大模型呼入技术基于先进的自然语言处理和机器学习算法&#xff0c;能够实现对海量语音数据的处理和理解。通过构建大规模的语言模型&#xff0c;系统可…...

编程日记 2025/9/21 17:03:30

STM32 ADC+DMA+TIM触发采样实战：避坑指南与源码解析

知识点1【TRGO的介绍】 1、TRGO的概述 TRGO&#xff1a;Trigger Output&#xff08;触发输出&#xff09;&#xff0c;是定时器的一种功能。 它可以作为外设的启动信号&#xff0c;比如ADC转换&#xff0c;DAC输出&#xff0c;DMA请求等。 对于ADC来说&#xff0c;可以通过…...

编程日记 2025/9/21 16:08:42

（1-4）Java Object类、Final、注解、设计模式、抽象类、接口、内部类

目录 1. Object类 1.1 equals 1.2 toString&#xff08;&#xff09; 2.final关键字 3.注解 4. 设计模式 4.1 单例模式 4.1.1 饿汉式 4.1.3 饿汉式 VS 懒汉式 5. 抽象类&抽象方法 6. 接口 7.内部类 7.1 成员内部类 7.2 静态内部类 7.3 方法内部类 7.4 匿名内…...

编程日记 2025/9/21 12:14:10

在服务器上安装AlphaFold2遇到的问题(3)_cat: /usr/include/cudnn_version.h: 没有那个文件或目录

[rootlocalhost ~]# cat /usr/include/cudnn_version.h cat: /usr/include/cudnn_version.h: 没有那个文件或目录这个错误表明系统找不到 cudnn_version.h 头文件&#xff0c;说明 cuDNN 的开发文件&#xff08;头文件&#xff09;没有正确安装。以下是完整的解决方案&#xff…...

编程日记 2025/9/21 3:28:30

实验-实现向量点积-RISC-V（计算机组成原理）

目录 一、实验内容 二、实验步骤 三、源代码 四、实现效果 五、实验环境 六、实验小结与思考 一、实验内容 首先&#xff0c;我们用一个简单的“向量点积”运算作为热身。你将拿到一个不完整的汇编代码“task2-向量点积”&#xff0c;我们的目标是按照C语言描述的功能&a…...

编程日记 2025/9/21 17:13:09

5.16本日总结

一、英语 背诵list30&#xff0c;复习list1 二、数学 学习14讲部分内容&#xff0c;订正30讲13讲题目 三、408 学习计网5.3知识点&#xff0c;完成5.1&#xff0c;5.2题目并订正 四、总结 高数对于基本定义概念类题目掌握不好&#xff0c;做题时往往不会下手&#xff0c…...

编程日记 2025/6/19 3:06:25

描述性统计工具 - AxureMost 落葵网

描述性统计工具是用于汇总和分析数据&#xff0c;以更好地了解数据特征的工具1。以下是一些常见的描述性统计工具简介&#xff1a; 描述性统计工具 Excel 基本统计函数&#xff1a;提供了丰富的函数用于计算描述性统计量。例如&#xff0c;AVERAGE 函数用于计算平均值&#xf…...

编程日记 2025/9/21 20:49:08

【AI学习】AI大模型技术发展研究月报的生成提示词

AI大模型技术发展研究月报生成提示词 请输出AI大模型技术发展研究月报&#xff0c;要求如下&#xff1a; —————————— 任务目标 在今天&#xff08;{{today}}&#xff09;往前连续 30 天内&#xff0c;检索已正式公开发表的、与AI大模型&#xff08;参数量 ≥10B&am…...

编程日记 2025/6/24 2:55:08

麒麟桌面系统文件保险箱快捷访问指南：让重要文件夹一键直达桌面！

往期文章链接&#xff1a;统信操作系统自定义快捷键配置音量调节功能指南 Hello&#xff0c;大家好啊&#xff0c;今天给大家带来一篇麒麟桌面操作系统上配置文件保险箱内文件夹桌面快捷方式的文章&#xff0c;欢迎大家分享点赞&#xff0c;点个在看和关注吧&#xff01;在日常…...

编程日记 2025/9/21 21:32:18

LearnOpenGL --- 你好三角形

你好&#xff0c;三角形的课后练习题 文章目录 你好&#xff0c;三角形的课后练习题一、创建相同的两个三角形&#xff0c;但对它们的数据使用不同的VAO和VBO 一、创建相同的两个三角形&#xff0c;但对它们的数据使用不同的VAO和VBO #include <glad/glad.h> #include &…...

编程日记 2025/6/8 2:28:20

从硬件角度理解“Linux下一切皆文件“,详解用户级缓冲区

目录 前言 一、从硬件角度理解"Linux下一切皆文件" 从理解硬件是种“文件”到其他系统资源的抽象 二、缓冲区 1.缓冲区介绍 2.缓冲区的刷新策略 3.用户级缓冲区 这个用户级缓冲区在哪呢&#xff1f; 解释关于fork再加重定向“>”后数据会打印两份的原因 4.内核缓冲…...

编程日记 2025/9/21 17:16:21

【第76例】IPD流程实战：华为业务流程架构BPA进化的4个阶段

目录 简介 第一个阶段，业务流程架构BPA1.0 第二个阶段，业务流程架构BPA2.0 BPA3.0、4.0 作者简介 简介 不管业务是复杂还是简单，企业内外的所有事情、所有业务都最终会归于流程。 甚至是大家经常说的所谓的各种方法论，具体的落脚点还是在流程上。 比如把大象放进冰…...

编程日记 2025/7/13 10:18:04

游戏站的几种形式

游戏站点的主要形式&#xff1a;单品游戏站、游戏盒子站与单类型游戏盒子站 随着互联网的普及和游戏产业的快速发展&#xff0c;游戏站点作为玩家获取游戏资源和信息的重要平台&#xff0c;呈现出多种形式。本文将分析三种常见的游戏站点形式&#xff1a;单品游戏站、游戏盒子站…...

编程日记 2025/9/22 0:44:57