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

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

news 2026/6/2 10:02:37

目录

前言

目标

环境对象

作用

环境对象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

AI大模型应用开发全攻略：从入门到精通，掌握LLM、RAG、Agent核心技能！“

本文全面介绍了AI大模型应用开发的核心技术和实践。从大模型API交互基础&#xff0c;到关键参数Messages和Tools的作用&#xff0c;深入解析了RAG、ReAct、Agent等应用范式。文章还探讨了Fine-tuning微调和Prompt提示词工程的重要性&#xff0c;强调工程实践与业务需求相结合。…...

编程新知 2026/5/26 2:55:48

新手村任务：成为一个架构师需要哪些装备？

新手村任务：成为一个架构师需要哪些装备？ 一、前言 如果你刚入行不久，想成为一名架构师，那这篇文章就是为你写的。 我们把成为架构师比作一个RPG游戏，你是主角，需要收集各种装备、刷经验、升级技能。 新手村的第一个任务就是：了解你需要哪些装备。 二、架构师技能树…...

编程新知 2026/5/26 2:11:26

ARM架构CONSTRAINED UNPREDICTABLE行为解析与应对

1. ARM架构中的CONSTRAINED UNPREDICTABLE行为解析在处理器架构设计中&#xff0c;UNPREDICTABLE行为通常指架构规范未明确定义的执行结果&#xff0c;可能导致不可预期的系统状态。ARM架构通过引入CONSTRAINED UNPREDICTABLE机制&#xff0c;将这类行为限制在特定范围内&#…...

编程新知 2026/5/26 1:45:11

终极免费方案：WandEnhancer完整解锁WeMod Pro功能快速指南

终极免费方案&#xff1a;WandEnhancer完整解锁WeMod Pro功能快速指南 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer 你是否渴望享受WeMod Pro会员的所…...

编程新知 2026/5/26 0:26:14

Owl-Alpha 新手快速上手指南

在处理大规模数据或构建高性能应用时&#xff0c;我们常常会遇到一个棘手的问题&#xff1a;如何在不阻塞主线程的情况下&#xff0c;高效地执行耗时任务&#xff1f;无论是处理图像、解析大型文件&#xff0c;还是进行复杂的数学运算&#xff0c;传统的单线程模式往往会让界面…...

编程新知 2026/5/25 23:51:45

随机森林算法在儿童出行方式预测中的实战应用与优化

1. 项目概述&#xff1a;用随机森林预测孩子怎么上学做城市交通规划或者做家长接送方案的时候&#xff0c;你肯定想过一个问题&#xff1a;孩子们到底是怎么上学的&#xff1f;是走路、骑车、坐公交还是家长开车送&#xff1f;这个问题看似简单&#xff0c;背后却牵扯到城市规划…...

编程新知 2026/5/25 23:08:49

用图神经网络做缺陷定位，准确率比传统方法高出30%

在现代软件工程的复杂迷宫中&#xff0c;缺陷定位始终是测试团队面临的核心挑战。想象这样一个场景&#xff1a;一个电商系统在特定压力条件下偶发订单丢失&#xff0c;日志中只留下泛泛的超时错误&#xff0c;问题可能深藏在上百个微服务的调用链、分布式事务的竞态条件或某个…...

编程新知 2026/5/25 20:30:07

对比不同模型在创意生成任务中的效果与token消耗差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比不同模型在创意生成任务中的效果与token消耗差异 在为一场创意大赛准备素材时&#xff0c;我们面临一个常见的选择&#xff1a…...

编程新知 2026/5/25 17:59:42

JMeter实现RSA签名验签全流程实战

1. 为什么RSA加密接口测试总卡在“连通但失败”这一步&#xff1f; 你有没有遇到过这种情况&#xff1a;接口文档写得清清楚楚&#xff0c;Postman里填好URL、Header、Body&#xff0c;一发请求——返回 {"code":4001,"msg":"签名验证失败"} …...

编程新知 2026/5/26 21:53:43

从Stable Diffusion到DiT：为什么说Transformer是扩散模型的下一站？

从Stable Diffusion到DiT&#xff1a;Transformer如何重塑扩散模型的未来 在图像生成领域&#xff0c;扩散模型正经历着从U-Net架构向Transformer架构的范式转移。这一转变不仅仅是技术组件的简单替换&#xff0c;而是代表着生成式AI在可扩展性、训练效率和模型容量方面的重大突…...

编程新知 2026/5/25 15:28:08