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

前端学习-环境this对象以及回调函数（二十七）

news 2026/4/2 15:29:04

目录

前言

目标

环境对象

作用

环境对象this是什么？

判断this指向的粗略规则是什么？

回调函数

目标

常见的使用场景

综合案例：Tab任务栏切换

总结

前言

男儿何不带吴钩，收取关山五十州

目标

能够分析判断函数运行在不同环境中this所指代的对象

环境对象

指的是函数内部特殊的变量this，它代表当前函数运行时所处的环境

作用

弄清楚this的指向，可以使代码更简洁

函数的调用方式不同，this所指代的对象不同

[谁调用，this就是谁] 是判断this指向的粗略规则

直接调用函数，其实相当于是 window.函数，所以this 指代 window

环境对象this是什么？

它代表着当前函数运行时所处的环境

判断this指向的粗略规则是什么？

谁调用，this就是谁

回调函数

目标

能够说出什么是回调函数

如果将函数 A做为参数传递给函数 B时，我们称函数 A为回调函数简单理解:当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

常见的使用场景

function fn(){console.log('我是回调函数...')fn传递给了setInterval，fn就是回调函数setInterval(fn，1000)

综合案例：Tab任务栏切换

<!DOCTYPE html>
<html lang="en">
​
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.tab {width: 100%;height: 100%;}
​.tab-nav {width: 490px;height: 40px;background-color: #fff;border: 1px solid #020202;display: flex;align-items: center;}
​.tab-nav ul {list-style-type: none;padding-left: 0;margin: 0;display: flex;}
​.tab-nav ul li {margin-right: 20px;height: 40px;display: flex;align-items: center;}
​.tab-nav ul li a {text-decoration: none;color: inherit;padding: 0 10px;}
​.tab-nav ul li a:hover {color: red;}
​.tab-nav ul li:hover {background-color: gray;}
​.tab-nav h3 {margin-right: 20px;margin-left: 20px;}
​.tab-content {width: 450px;padding: 20px;border: 1px solid #020202;border-top: none;height: 300px;/* 增加高度以容纳更多内容 */overflow-y: auto;/* 添加滚动条 */}
​.tab-content .item {display: none;margin-bottom: 20px;}
​.tab-content .item.active {display: block;}
​.item h2 {color: #333;}
​.item p {color: #666;}
​.item img {max-width: 100%;height: auto;margin-top: 10px;}</style>
</head>
​
<body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">母婴</a></li><li><a href="javascript:;">图书</a></li></ul></div><div class="tab-content"><div class="item active"><h2>精选内容</h2><p>这里是精选内容的描述。</p><img src="https://via.placeholder.com/150" alt="精选图片"></div><div class="item"><h2>美食内容</h2><p>这里是美食内容的描述。</p><img src="https://via.placeholder.com/150" alt="美食图片"></div><div class="item"><h2>百货内容</h2><p>这里是百货内容的描述。</p><img src="https://via.placeholder.com/150" alt="百货图片"></div><div class="item"><h2>母婴内容</h2><p>这里是母婴内容的描述。</p><img src="https://via.placeholder.com/150" alt="母婴图片"></div><div class="item"><h2>图书内容</h2><p>这里是图书内容的描述。</p><img src="https://via.placeholder.com/150" alt="图书图片"></div></div></div>
​<script>document.addEventListener('DOMContentLoaded', function () {const tabs = document.querySelectorAll('.tab-nav ul li a');tabs.forEach((tab, index) => {tab.addEventListener('mouseenter', function () {showTab(index);});});
​function showTab(index) {const tabs = document.querySelectorAll('.tab-nav ul li a');const contents = document.querySelectorAll('.tab-content .item');
​tabs.forEach(tab => tab.classList.remove('active'));contents.forEach(content => content.classList.remove('active'));
​tabs[index].classList.add('active');contents[index].classList.add('active');}});</script>
</body>
​
</html>

总结

莫等闲，白了少年头，空悲切。

相关文章：

前端学习-环境this对象以及回调函数（二十七）

目录 前言 目标 环境对象 作用 环境对象this是什么&#xff1f; 判断this指向的粗略规则是什么&#xff1f; 回调函数 目标 常见的使用场景 综合案例&#xff1a;Tab任务栏切换 总结 前言 男儿何不带吴钩&#xff0c;收取关山五十州 目标 能够分析判断函数运行在不…...

编程日记 2025/1/13 8:04:02

Element-plus、Element-ui之Tree 树形控件回显Bug问题。

需求&#xff1a;提交时&#xff0c;需要把选中状态和半选中状态 的数据id提交。如图所示&#xff1a; 数据回显时&#xff0c;会出现代码如下&#xff1a; <template><el-tree ref"treeRef" :data"tree" show-checkbox node-key"id" …...

编程日记 2025/1/13 8:03:01

互联网全景消息(10)之Kafka深度剖析(中)

一、深入应用 1.1 SpringBoot集成Kafka 引入对应的依赖。 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupI…...

编程日记 2025/1/13 8:00:59

Oracle Dataguard（主库为双节点集群）配置详解（5）：将主库复制到备库并启动同步

Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动同步 目录 Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动…...

编程日记 2025/1/13 7:57:55

pytorch小记（一）：pytorch矩阵乘法：torch.matmul(x, y)

pytorch小记&#xff08;一&#xff09;&#xff1a;pytorch矩阵乘法&#xff1a;torch.matmul&#xff08;x, y&#xff09;/ x y 代码代码 1&#xff1a;torch.matmul(x, y)输入张量&#xff1a;计算逻辑&#xff1a;输出结果&#xff1a; 代码 2&#xff1a;y y.view(4,1)…...

编程日记 2025/1/13 7:53:51

PyTorch环境配置常见报错的解决办法

目标 小白在最基础的环境配置里一般都会出现许多问题。 这里把一些常见的问题分享出来。希望可以节省大家一些时间。 最终目标是可以在cmd虚拟环境里进入jupyter notebook&#xff0c;new的时候有对应的环境&#xff0c;并且可以跑通所有的import code。 第一步&#xff1a;…...

编程日记 2025/1/13 7:50:48

罗永浩再创业，这次盯上了 AI？

罗永浩&#xff0c;1972年7月9日生于中国延边朝鲜族自治州的一个军人家庭&#xff0c;是一名朝鲜族人&#xff1b;早年在新东方授课&#xff0c;2004年当选 “网络十大红人” &#xff1b;2006年8月1日&#xff0c;罗永浩创办牛博网&#xff1b;2008年5月&#xff0c;罗永浩注册…...

编程日记 2025/1/13 7:47:41

VUE3 provide 和 inject，跨越多层级组件传递数据

provide 和 inject 是 Vue 3 提供的 API&#xff0c;主要用于实现祖先组件与后代组件之间的依赖注入。它们可以让你在组件树中&#xff0c;跨越多层组件传递数据&#xff0c;而不需要通过 props 或事件的方式逐层传递。这个机制主要用于状态共享、插件系统或某些跨层级的功能。…...

编程日记 2025/1/13 7:43:36

git打补丁

1、应用场景 跨仓库升级 开发项目B使用的是开源项目A。开源项目A发现漏洞&#xff0c;作者进行了修复&#xff0c;我们可以通过使用git补丁的方式&#xff0c;将作者修改的内容复制到我 们的项目B中。 2、TortoiseGit方式 源仓库 格式化补丁 根据提交数量&#xff0c;生成…...

编程日记 2025/1/13 7:40:31

机械燃油车知识图谱、知识大纲、知识结构（持续更新...）

一、发动机 曲柄连杆机构 配气机构 点火系统 起动系统 燃油供给系统 润滑系统 冷却系统 二、底盘 &#xff08;一&#xff09;传动系统 1、离合器 2、变速器 3、万向传动装置 4、驱动桥 &#xff08;二&#xff09;行驶系统 1、车架 2、车桥 3、悬架 4、车轮 &a…...

编程日记 2025/1/13 7:38:28

Vue3学习总结

一、Vue 3 基础搭建与核心语法 1.创建 Vue 3 应用 在项目的入口文件 main.js 中&#xff0c;通过以下代码创建 Vue 3 应用实例&#xff1a; import { createApp } from vue; import App from ./App.vue;const app createApp(App); app.mount(#app); 这几行代码的作用是引入…...

编程日记 2025/1/13 7:36:27

Type-C双屏显示器方案

在数字化时代&#xff0c;高效的信息处理和视觉体验已成为我们日常生活和工作的关键需求。随着科技的进步&#xff0c;一款结合了便携性和高效视觉输出的设备——双屏便携屏&#xff0c;逐渐崭露头角&#xff0c;成为追求高效工作和娱乐体验人群的新宠。本文将深入探讨双屏便携…...

编程日记 2025/1/13 7:33:24

【读书与思考】焦虑与内耗

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 导言 今天一个朋友和我说&#xff0c;最近比较焦虑和内耗&#xff0c;无心工作和学习&#xff0c;我问他你焦虑内耗的时候&#xff0c;时间主要花在哪了&#xff0c;他告诉我说主要花在看有关移…...

编程日记 2025/1/13 7:31:21

基于python的网页表格数据下载--转excel

基于 Python 的网页表格数据爬取与下载：以维基百科为例 目录 基于 Python 的网页表格数据爬取与下载：以维基百科为例1. 背景介绍2. 工具与环境3. 操作步骤1. 获取网页内容2. 定位表格元素3. 表格变身 Pandas DataFrame4. 检查数据，收工！5. 进阶玩法与优化6. 完整代码4. 结果…...

编程日记 2025/1/13 7:30:17

Vue.js开发入门：从零开始搭建你的第一个项目

前言 嘿&#xff0c;小伙伴们&#xff01;今天咱们来聊聊 Vue.js&#xff0c;一个超火的前端框架。如果你是编程小白&#xff0c;别怕&#xff0c;跟着我一步步来&#xff0c;保证你能轻松上手&#xff0c;搭建起属于自己的第一个 Vue 项目。Vue.js 可能听起来有点高大上&#…...

编程日记 2025/1/13 7:28:14

LS1046+XILINX XDMA PCIE调通

欢迎点赞收藏&#xff0c;欢迎私下讨论技术&#xff0c;分享技术 硬件平台 &#xff1a;NXP LS1046 XILINX FPGA 软件平台&#xff1a;LINUX 4.19.68 buildroot LS1046 PEX3 接 XILINX FPGA&#xff0c;linux使用designware的PCI主控制器。下载XILINX DMA驱动&#xff0c;解…...

编程日记 2025/1/13 7:27:13

HarmonyOS：@LocalBuilder装饰器： 维持组件父子关系

一、前言 当开发者使用Builder做引用数据传递时&#xff0c;会考虑组件的父子关系&#xff0c;使用了bind(this)之后&#xff0c;组件的父子关系和状态管理的父子关系并不一致。为了解决组件的父子关系和状态管理的父子关系保持一致的问题&#xff0c;引入LocalBuilder装饰器。…...

编程日记 2025/1/13 7:20:05

YOLOv10-1.1部分代码阅读笔记-downloads.py

downloads.py ultralytics\utils\downloads.py 目录 downloads.py 1.所需的库和模块 2.def is_url(url, checkFalse): 3.def delete_dsstore(path, files_to_delete(".DS_Store", "__MACOSX")): 4.def zip_directory(directory, compressTrue, ex…...

编程日记 2025/1/13 7:19:04

计算机图形学【绘制立方体和正六边形】

工具介绍 OpenGL&#xff1a;一个跨语言的图形API&#xff0c;用于渲染2D和3D图形。它提供了绘制图形所需的底层功能。 GLUT&#xff1a;OpenGL的一个工具库&#xff0c;简化了窗口创建、输入处理和其他与图形环境相关的任务。 使用的函数 1. glClear(GL_COLOR_BUFFER_BIT |…...

编程日记 2025/1/13 7:16:59

基于django中医药数据可视化平台(源码+lw+部署文档+讲解)，源码可白嫖!

摘要 时代在飞速进步&#xff0c;每个行业都在努力发展现在先进技术&#xff0c;通过这些先进的技术来提高自己的水平和优势&#xff0c;中医药管理平台当然不能排除在外。中医药数据可视化平台是在实际应用和软件工程的开发原理之上&#xff0c;运用Python语言、ECharts技术、…...

编程日记 2025/1/13 7:14:54

避开这5个坑！MES工艺路线管理中的常见错误及解决方案

避开这5个坑&#xff01;MES工艺路线管理中的常见错误及解决方案 在制造业数字化转型的浪潮中&#xff0c;MES&#xff08;制造执行系统&#xff09;已成为提升生产效率的关键工具。然而&#xff0c;许多企业在实施工艺路线管理模块时&#xff0c;常常陷入一些看似简单却影响深…...

编程新知 2026/4/2 15:18:54

dy自动化采集数据滑动验证码绕过实战指南

1. 理解dy滑动验证码的运作机制 当你用脚本快速刷dy视频时&#xff0c;经常会遇到那个烦人的滑块验证码。这其实是平台防止机器人滥用的重要防线。我刚开始做自动化采集时&#xff0c;每次遇到这个滑块都会头皮发麻——程序卡住不动&#xff0c;数据采集被迫中断。后来经过反复…...

编程新知 2026/4/2 14:11:41

2025版等级保护测评报告模板：风险导向与合规深化的实践指南

1. 2025版等级保护测评报告模板的核心变革 如果你最近接触过等级保护测评工作&#xff0c;一定会注意到2025版报告模板带来的显著变化。这个版本最大的特点就是从过去的"得分导向"彻底转向了"风险导向"。在实际工作中&#xff0c;我发现很多企业安全负责人…...

编程新知 2026/4/2 14:05:34

效率倍增器：利用快马AI自动生成网络设备批量巡检与健康报告脚本

最近在深圳做网络运维的朋友跟我吐槽&#xff0c;每天要手动巡检几十台网络设备&#xff0c;检查CPU、内存、接口状态这些指标&#xff0c;不仅耗时还容易出错。于是我尝试用InsCode(快马)平台帮他解决这个问题&#xff0c;效果出奇的好。今天就把这个自动化巡检脚本的实现过程…...

编程新知 2026/4/2 13:20:30

Realistic Vision V5.1 惊艳作品集：基于卷积神经网络的人像摄影风格迁移

Realistic Vision V5.1 惊艳作品集&#xff1a;基于卷积神经网络的人像摄影风格迁移 你有没有想过&#xff0c;自己随手拍的一张普通自拍照&#xff0c;也能变成一张充满电影感、艺术气息的专业级人像作品&#xff1f;这听起来像是专业摄影师和后期修图师的专属魔法&#xff0…...

编程新知 2026/4/2 12:23:54

前端CSS样式详细笔记

文章目录一、CSS基础概念1. 什么是CSS2. CSS三大核心特性3. CSS基本语法结构二、CSS引入方式三、CSS选择器详解1. 基础选择器2. 组合选择器3. 属性选择器4. 伪类与伪元素四、选择器优先级规则1. 优先级计算方法2. 优先级实战示例3. 优先级注意事项五、CSS盒模型1. 盒模型组成2.…...

编程新知 2026/4/2 11:22:40

从零到一：基于51单片机与DS1302的智能万年历系统设计与实现

1. 项目背景与核心功能 每次看到桌面上那些动辄几百块的智能时钟&#xff0c;我都会想&#xff1a;这东西真的需要这么贵吗&#xff1f;作为一个玩了多年51单片机的老鸟&#xff0c;我决定用最基础的STC89C52芯片搭配DS1302时钟模块&#xff0c;打造一个功能不输商业产品的智能…...

编程新知 2026/4/2 11:12:27

救命！2026爆款PPT一键制作工具实测，新手也能5分钟出片，告别熬夜手搓无标题

作为常年和PPT打交道的AI博主&#xff0c;每天都能收到粉丝私信轰炸&#xff1a;“做PPT有没有捷径&#xff1f;”“AI能不能帮我快速出稿&#xff1f;”“新手零基础&#xff0c;半天排不出一页像样的版面”……懂的都懂&#xff01;谁没为了一份PPT熬到凌晨&#xff1f;找模板…...

编程新知 2026/4/2 11:10:27

重生之我用 AI 复活了我的同事

阅读本文大概需要 2.8 分钟。在写这篇文章之前先解答上篇文章评论区反映的两个问题&#xff1a;第一个问题&#xff0c;有人读完文章说&#xff0c;张哥&#xff0c;那以后是用 AI 还是不用呢&#xff1f;当然要用了&#xff0c;而且是鼓励大家全面使用。我文章本意是 AI 发展之…...

编程新知 2026/4/2 10:56:21

电子电路实战：PWM转DAC的滤波参数优化策略

1. PWM转DAC的基础原理 PWM&#xff08;脉冲宽度调制&#xff09;转DAC&#xff08;数模转换&#xff09;是嵌入式系统中常见的低成本解决方案。简单来说&#xff0c;就是通过调节数字信号的占空比来模拟不同的电压值。比如一个3.3V的PWM信号&#xff0c;50%占空比就相当于1.65…...

编程新知 2026/4/2 10:24:01