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

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

目录

前言

目标

环境对象

作用

环境对象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;收取关山五十州 目标 能够分析判断函数运行在不…...

计算机网络-数据链路层(虚拟局域网VLAN)

2.6 虚拟局域 2.6.1 虚拟局域网概述 以太网交换机连接的各个网络同属于一个广播域&#xff0c;随着以太网的规模扩大&#xff0c;广播域也会相应的扩大&#xff0c;巨大的广播域会带来巨大的弊端。 广播风暴 难以治理 潜在的安全问题 TCP/IP协议下会进行广播的协议&#xff1a…...

Python贪心

贪心 贪心&#xff1a;把整体问题分解成多个步骤&#xff0c;在每个步骤都选取当前步骤的最优方案&#xff0c;直至所有步骤结束&#xff1b;每个步骤不会影响后续步骤核心性质&#xff1a;每次采用局部最优&#xff0c;最终结果就是全局最优如果题目满足上述核心性质&#xf…...

CSS 盒模型

盒模型 CSS盒模型是网页布局的核心概念之一&#xff0c;它描述了网页元素的物理结构和元素内容与周围元素之间的关系。根据W3C规范&#xff0c;每个HTML元素都被视为一个矩形盒子&#xff0c;这个盒子由以下四个部分组成&#xff1a; 内容区&#xff08;Content area&#xff…...

【linux】vi编辑文件及readonly文件修改读写权限方法

板端vi修改文件&#xff1a; 1、vi 文件路径 vi mnt/eol/config/oem_eol.xml2、按 i进入修改状态&#xff0c;此时可以修改配置文件 3、按 esc退出修改状态&#xff0c;并按"wq!保存 问题&#xff1a;readonly文件无法直接vi修改 方案&#xff1a; 1、mount -o remoun…...

Git使用笔记

Git 版本控制 一、Git 介绍二、Git 使用1. 安装及配置2. 使用方法3. Git 命令3. 历史版本回退4. 分支 (Branch) 三、远程仓库1. SSH公钥连接Gitee2. 推送到远程仓库 一、Git 介绍 常见版本控制软件&#xff1a;集中式&#xff08;CVS、SVN&#xff09;&#xff0c;分布式&#…...

mermaid大全(语法、流程图、时序图、甘特图、饼图、用户旅行图、类图)

⚠️ 有些网站的mermaid可能不完整&#xff0c;因此下面教程中可能有些语法是无效的。 &#x1f60a;亲测Typora软件均可以显示。 1. 介绍 Mermaid是一个基于JavaScript的图表绘制工具&#xff0c;它使用类似Markdown的语法来创建和修改各种类型的图表。以下是关于Mermaid的详…...

慧集通(DataLinkX)iPaaS集成平台-业务建模之业务对象(二)

3.UI模板 当我们选择一条已经建好的业务对象点击功能按钮【UI模板】进入该业务对象的UI显示配置界面。 右边填写的是UI模板的编码以及对应名称&#xff1b;菜单界面配置以业务对象UI模板编码获取显示界面。 3.1【列表-按钮】 展示的对应业务对象界面的功能按钮配置&#xff1…...

vue3+ts+element-plus 输入框el-input设置背景颜色

普通情况&#xff1a; 组件内容&#xff1a; <el-input v-model"applyBasicInfo.outerApplyId"/> 样式设置&#xff1a; ::v-deep .el-input__wrapper {background-color: pink; }// 也可以这样设置 ::v-deep(.el-input__wrapper) {background-color: pink…...

python迷宫寻宝 第6关 安全策略

地图&#xff1a; 1、体力不足去找终点&#xff0c;体力足则原地不动 import api## 判断是否需要离场的函数 # 体力足返回False&#xff0c;体力不足返回True def should_leave():# 拿到我离终点的距离e_row api.get.exit(what"row")e_col api.get.exit(what"…...

【计算机网络】lab7 TCP协议

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;计算机网络_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 实验目的…...

Monorepo设置:新手指南

Monorepo是一种项目代码管理方法&#xff0c;指在单个代码仓库中管理多个项目&#xff0c;有助于简化代码共享、版本控制、构建和部署的复杂性&#xff0c;并提供更好的可重用性和协作性。 简单理解&#xff1a;所有项目都在一个代码仓库中 &#x1f4e6;&#xff0c;但这并不意…...

HTTP 请求与响应的结构

一、引言 在当今数字化的时代&#xff0c;网络通信如同空气一般无处不在&#xff0c;而HTTP协议则是网络世界中最为重要的基石之一。当我们在浏览器中输入一个网址&#xff0c;轻松浏览网页、观看视频、下载文件或是进行在线购物等操作时&#xff0c;背后HTTP协议都在默默地发…...

计科高可用服务器架构实训(防火墙、双机热备,VRRP、MSTP、DHCP、OSPF)

一、项目介绍 需求分析&#xff1a; &#xff08;1&#xff09;总部和分部要求网络拓扑简单&#xff0c;方便维护&#xff0c;网络有扩展和冗余性&#xff1b; &#xff08;2&#xff09;总部分财务部&#xff0c;人事部&#xff0c;工程部&#xff0c;技术部&#xff0c;提供…...

Soildworks的学习【2025/1/12】

右键空白处&#xff0c;点击选项卡&#xff0c;即可看到所有已调用的选项卡&#xff1a; 点击机械小齿轮选项卡&#xff0c;选择文档属性&#xff0c;选择GB国标&#xff1a; 之后点击单位&#xff0c;选择MMGS毫米单位&#xff1a; 窗口右下角有MMGS&#xff0c;这里也可以选择…...

ORACLE-表空间和分区控制

--查询最后更新的统计信息时间 SELECT table_name, last_analyzed FROM dba_tables WHERE table_name 表名; --更新统计信息 -----按分区 BEGIN DBMS_STATS.GATHER_TABLE_STATS( ownname > XI_SF, -- 模式名称 tabname > 表名, -- 表名称 partnam…...

C# 与 Windows API 交互的“秘密武器”:结构体和联合体

一、引言 在 C# 的编程世界里&#xff0c;当我们想要深入挖掘 Windows 系统的底层功能&#xff0c;与 Windows API 打交道时&#xff0c;结构体和联合体就像是两把神奇的钥匙&#x1f511; 它们能够帮助我们精准地操控数据&#xff0c;实现一些高级且强大的功能。就好比搭建一…...

【数字化】华为-用变革的方法确保规划落地

导读&#xff1a;华为在数字化转型过程中&#xff0c;深刻认识到变革的必要性&#xff0c;并采用了一系列有效的方法确保转型规划的有效落地。华为认为&#xff0c;数字化转型不仅仅是技术层面的革新&#xff0c;更是企业运作模式、流程、组织、文化等深层次的变革。数字化转型…...

SpringData-Redis缓存

Spring Framework是领先的全堆栈Java/JEE应用程序框架。它提供了一个轻量级容器和一个通过使用依赖注入、AOP和可移植服务抽象实现的非侵入性编程模型。 NoSQL存储系统为传统RDBMS提供了一种横向可扩展性和速度的替代方案。就实现而言&#xff0c;键值存储代表NoSQL空间中最大…...

大语言模型兵马未动,数据准备粮草先行

​从OpenAI正式发布ChatGPT开始&#xff0c;大型语言模型&#xff08;LLM&#xff09;就变得风靡一时。对业界和吃瓜群众来说&#xff0c;这种技术最大的吸引力来自于理解、解释和生成人类语言的能力&#xff0c;毕竟这曾被认为是人类独有的技能。类似CoPilot这样的工具正在迅速…...

跳表和Mysql联合索引的最左原则和索引下推的优化

文章目录 跳表&#xff08;Skip List&#xff09;关键特性跳表的结构示意图跳表的查询效率为什么 MySQL 不使用跳表而使用 B 树&#xff1f;跳表的实际应用场景 总结 MySQL 联合索引的最左匹配原则最左匹配原则的规则示例&#xff1a;创建联合索引查询示例及索引使用情况设计联…...

Android切换语言不退出App

1.需求 实现用户选择语言&#xff08;未点击下一步&#xff09;&#xff0c;更新当前界面UI&#xff0c;点击下一步后&#xff0c;更新App的语言&#xff0c;并进行保存。 实现目标&#xff1a; 1.设置App的语言&#xff0c;本地进行保存 2.updateResources更新本地语言配置…...

Unity编程与游戏开发-编程与游戏开发的关系

游戏开发是一个复杂的多领域合作过程,涵盖了从创意构思到最终实现的多个方面。在这个过程中,技术、设计与美术三大核心要素相互交织,缺一不可。在游戏开发的过程中,Unity作为一款强大的跨平台游戏引擎,凭借其高效的开发工具和庞大的社区支持,成为了很多游戏开发者的首选工…...

【Git】问题汇总

在push的时候显示 protocol error: bad line length 8192 我在本地创建了一个gogs服务器&#xff0c;现在正在上传代码&#xff0c;但是出现了上述的这个问题。 解决方法 设置本地http.postBuffer&#xff08;待验证&#xff09; 方法一&#xff1a;全局配置 git config --g…...

搭建docker私有化仓库Harbor

Docker私有仓库概述 Docker私有仓库介绍 Docker私有仓库是个人、组织或企业内部用于存储和管理Docker镜像的存储库。Docker默认会有一个公共的仓库Docker Hub,而与Docker Hub不同,私有仓库是受限访问的,只有授权用户才能够上传、下载和管理其中的镜像。这种私有仓库可以部…...

修改sshd默认配置,提升安全

对于Linux服务器&#xff0c;特别是暴露在公网的服务器&#xff0c;会经常被人扫描、探测和攻击。包括通过ssh访问登录攻击。对此&#xff0c;对默认的sshd配置进行调整&#xff0c;提升安全。 下面以CentOS 7.9为例说明&#xff1a; 一、常见安全措施 以root用户编辑vim /e…...

formik 的使用

礼记有言&#xff1a;独学而无友&#xff0c;则孤陋而寡闻 让我们一起了解更多便捷方法&#xff0c;缩短开发时间去摸鱼&#xff0c;嘿嘿。 框架&#xff1a;react 在写表单的时候&#xff0c;我不太喜欢把验证写的很繁琐&#xff0c;这里讲介绍&#xff0c;验证表单的非常好用…...

【学习笔记】理解深度学习的基础:机器学习

1. 机器学习基础 1.1 机器学习的定义与重要性 定义&#xff1a;深度学习是机器学习的一种特定形式。为了深入理解深度学习&#xff0c;必须牢固掌握机器学习的基本原理。机器学习算法是一种能够从数据中学习的算法&#xff0c;通过经验E在任务T上提高性能度量P&#xff08;Mi…...

Docker 基础知识

背景 传统的linux的环境部署 命令多步骤多安装版本多使用docker的话,一个命令就可以全部搞定安装linux 之前安装过,所以直接使用的开罩进行复制的如果之前配置过静态地址,需要改成IPV4静态地址访问安装docker 参考连接:https://b11et3un53m.feishu.cn/wiki/Rfocw7ctXij2RBk…...

pyqt鸟瞰

QApplication‌是Qt框架中的一个类&#xff0c;专门用于管理基于QWidget的图形用户界面&#xff08;GUI&#xff09;应用程序的控制流和主要设置。QApplication类继承自QGuiApplication&#xff0c;提供了许多与GUI相关的功能&#xff0c;如窗口系统集成、事件处理等。 QAppli…...

Linux syslog 运行机制

Busybox的syslogd认识与使用 syslogd 的基本工作原理&#xff1a; syslogd 是一个系统日志守护进程&#xff0c;它接收来自各种进程和系统服务的日志消息&#xff0c;并根据配置将这些消息存储到不同的日志文件中。 syslogd日志记录器由两个守护进程&#xff08;klogd&#x…...

ZYNQ初识10(zynq_7010)UART通信实验

基于bi站正点原子讲解视频&#xff1a; 系统框图&#xff08;基于串口的数据回环&#xff09;如下&#xff1a; 以下&#xff0c;是串口接收端的波形图&#xff0c;系统时钟和波特率时钟不同&#xff0c;为异步时钟&#xff0c;&#xff0c;需要先延时两拍&#xff0c;将时钟同…...

day38 tcp 并发 ,linux下的IO模型----IO多路复用

TCP 并发 由于tcp协议只能实现一对一的通信模式。为了实现一对多&#xff0c;有以下的的处理方式 1. 多进程 开销大 效率低 2. 多线程 创建线程需要耗时 3. 线程池 多线程模型创建线程耗时问题&#xff0c;提前创建 4. IO多路复用 在不创建进程和线程的前提下&#xff0c;对…...

el-date-picker 禁用一个月前、一个月后(当天之后)的时间 datetimerange

文章目录 功能需求今天是 2025-01-09示例1示例2 代码 Vue2 功能需求 时间范围选择器&#xff0c;最大时间选择尺度为一个月。 今天是 2025-01-09 示例1 选择 2025-01-02 日 禁用未来日期&#xff08;2025-01-09之后日期&#xff09; 禁用上月2号&#xff08;31日之前&#…...

ES6的高阶语法特性

一、模板字符串的高级用法 1.1.模板字符串的嵌套 模板字符串的嵌套允许在一个模板字符串内部再嵌入一个或多个模板字符串。这种嵌套结构在处理复杂数据结构或生成具有层级关系的文本时非常有用。 1. 嵌套示例 假设我们有一个包含多个对象的数组&#xff0c;每个对象都有名称、…...

数据在内存的存储

数据类型介绍 前面我们已经学习了基本的内置类型&#xff1a; char //字符数据类型 1字节 打印%c short //短整型 2字节 打印%hd int //整形 4字节 打印%d long long int //长整型 4/8字节 打印%ld l…...

【微服务】面试题 6、分布式事务

分布式事务面试题讲解 一、问题背景与解决方案概述 因微服务项目涉及远程调用可能引发分布式事务问题&#xff0c;需解决。主流解决方案有阿里 Seata 框架&#xff08;含 XA、AT、TCC 模式&#xff09;和 MQ。 二、Seata 框架关键角色 事务协调者&#xff08;TC&#xff09;&…...

VMware中Ubuntu如何连接网络?安排!

一、设置NAT模式 1、关闭Ubuntu虚拟机&#xff1a; 确保Ubuntu已经完全关机&#xff0c;而不是挂起或休眠状态。 2、编辑虚拟网络设置&#xff1a; 在VMware主界面点击“编辑”菜单&#xff0c;选择“虚拟网络编辑器”。 如果需要&#xff0c;选择VMnet8 (NAT模式)并点击“更改…...

最近在盘gitlab.0.先review了一下docker

# 正文 本猿所在产品的代码是保存到了一个本地gitlab实例上&#xff0c;实例是别的同事搭建的。最近又又又想了解一下&#xff0c;而且已经盘了一些了&#xff0c;所以写写记录一下。因为这个事儿没太多的进度压力&#xff0c;索性写到哪儿算哪儿&#xff0c;只要是新了解到的…...

TCP封装数据帧

void *send_data(void *arg) //这是一个发送数据的线程 {int sockfd init_tcp_cli("192.168.0.148",50000) //传ip和port&#xff0c;port 50000是因为大概前五万都被其它服务所占用&#xff0c;50000后是私人ipif(sockfd < 0){return NULL;}unsigned char …...

基于Springboot+Vue的仓库管理系统

开发一个基于Spring Boot和Vue的仓库管理系统涉及到前端和后端的开发。本文呢&#xff0c;给出一个简单的开发步骤指南&#xff0c;用于指导初入的新手小白如何开始构建这样一个系统&#xff0c;如果**你想直接学习全部内容&#xff0c;可以直接拉到文末哦。** 开始之前呢给小…...

工厂人员定位管理系统方案(二)人员精确定位系统架构设计,适用于工厂智能管理

哈喽~这里是维小帮&#xff0c;提供多个场所的定位管理方案&#xff0c;如需获取工厂人员定位管理系统解决方案可前往文章最下方获取&#xff0c;如有项目合作及技术交流欢迎私信我们哦~撒花 在上一篇文章中&#xff0c;我们初步探讨了工厂人员定位管理系统的需求背景以及定位方…...

机器学习特征重要性之feature_importances_属性与permutation_importance方法

一、feature_importances_属性 在机器学习中&#xff0c;分类和回归算法的 feature_importances_ 属性用于衡量每个特征对模型预测的重要性。这个属性通常在基于树的算法中使用&#xff0c;通过 feature_importances_ 属性&#xff0c;您可以了解哪些特征对模型的预测最为重要…...

Go学习:多重赋值与匿名变量

目录 1. 变量的多重赋值 1.1 基本语法格式 1.2 交换变量值 2. 匿名变量的使用 1. 变量的多重赋值 1.1 基本语法格式 go语言中&#xff0c;可以将多个赋值语句 合并成 一句&#xff0c;比如&#xff1a; a : 10 b : 20 c : 30//a,b,c三个变量的赋值语句可以…...

解读Linux Bridge中的东西流向与南北流向

解读Linux Bridge中的东西流向与南北流向 在现代云计算和虚拟化环境中&#xff0c;网络流量的管理和优化变得越来越重要。Linux Bridge作为Linux内核提供的一个强大的二层交换机工具&#xff0c;在虚拟化和容器化应用中扮演着至关重要的角色。本文将深入探讨Linux Bridge中的两…...

spring mvn 国际化配置

目录 国际化配置测试测试自定义一个MessageSource类型的beanSpringApplicationUtil工具类MessageUtls工具类配置 国际化原理ResourceBundleMessageSource 国际化配置测试 测试 测试&#xff1a; 自定义一个MessageSource类型的bean import org.springframework.context.Mess…...

Windows下Dll在Unity中使用的一般方式

Windows下Dll在Unity中使用的一般方式 Unity中虽然已经有广泛的库和插件&#xff0c;但是相较于C的库生态而言&#xff0c;还是有一定的差距&#xff1b;因此本篇博文记录Windows下将C函数打包成动态链接库在Unity中使用的一般方法。 环境 Visual Studio 2019 &#xff0c; Uni…...

SQLite PRAGMA

SQLite的PRAGMA命令是一种特殊的命令&#xff0c;用于在SQLite环境中控制各种环境变量和状态标志。PRAGMA值可以被读取&#xff0c;也可以根据需求进行设置【0†source】。 PRAGMA命令的语法格式如下&#xff1a; 要查询当前的PRAGMA值&#xff0c;只需提供该PRAGMA的名字&am…...

Linux:进程控制

1.fork()函数初识 在linux中fork函数时非常重要的函数&#xff0c;它从已存在进程中创建一个新进程。新进程为子进程&#xff0c;而原进程为父进程。 #include <unistd.h> pid_t fork(void); 返回值&#xff1a;自进程中返回0&#xff0c;父进程返回子进程id&#xff0…...

一些计算机零碎知识随写(25年1月)-1

我原以为世界上有技术的那批人不会那么闲&#xff0c;我错了&#xff0c;被脚本真实了。 今天正隔着画画呢&#xff0c;手机突然弹出几条安全告警通知。 急忙打开服务器&#xff0c;发现问题不简单&#xff0c;直接关服务器重装系统..... 首先&#xff0c;不要认为小网站&…...