当前位置: 首页 > 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>


总结

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

http://www.lryc.cn/news/519835.html

相关文章:

  • Element-plus、Element-ui之Tree 树形控件回显Bug问题。
  • 互联网全景消息(10)之Kafka深度剖析(中)
  • Oracle Dataguard(主库为双节点集群)配置详解(5):将主库复制到备库并启动同步
  • pytorch小记(一):pytorch矩阵乘法:torch.matmul(x, y)
  • PyTorch环境配置常见报错的解决办法
  • 罗永浩再创业,这次盯上了 AI?
  • VUE3 provide 和 inject,跨越多层级组件传递数据
  • git打补丁
  • 机械燃油车知识图谱、知识大纲、知识结构(持续更新...)
  • Vue3学习总结
  • Type-C双屏显示器方案
  • 【读书与思考】焦虑与内耗
  • 基于python的网页表格数据下载--转excel
  • Vue.js开发入门:从零开始搭建你的第一个项目
  • LS1046+XILINX XDMA PCIE调通
  • HarmonyOS:@LocalBuilder装饰器: 维持组件父子关系
  • YOLOv10-1.1部分代码阅读笔记-downloads.py
  • 计算机图形学【绘制立方体和正六边形】
  • 基于django中医药数据可视化平台(源码+lw+部署文档+讲解),源码可白嫖!
  • kafka消费堆积问题探索
  • Vue.js 使用插槽(Slots)优化组件结构
  • Broker如何进行定时心跳发送和故障感知
  • 网络安全设备主要有什么
  • Android Framework WMS全面概述和知识要点
  • 记一次某红蓝演练经历
  • 一个运行在浏览器中的开源Web操作系统Puter本地部署与远程访问
  • 【零基础入门Go语言】struct 和 interface:Go语言是如何实现继承的?
  • 麦田物语学习笔记:实现拖拽物品交换数据和在地图上生成物品
  • 一些计算机零碎知识随写(25年1月)-1
  • Qt学习笔记第81到90讲