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

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

news 2026/2/9 11:36:03

目录

前言

目标

环境对象

作用

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/8 4:37:20

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/2/8 9:34:11

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2026/2/2 18:52:32