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

9.环境对象和回调函数

news 2026/5/20 17:20:58

9.1环境对象

指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
作用：
弄清楚this的指向，可以让我们代码更简洁
➢函数的调用方式不同，this指代的对象也不同
➢[谁调用，this 就指代谁] 是判断this指向的粗略规则
➢直接调用函数（普通函数），其实相当于是window.函数，所以this指代window

【示例】

<body><button>点击</button><script>//普通函数里面的this指向的是windowfunction fn() {console.log(this)}fn()  //window.fn()const btn = document.querySelector('button')btn.addEventListener('click', function () {console.log(this) // btn 对象this.style.backgroundColor = 'pink'})</script>
</body>

在这里插入图片描述

9.2回调函数

如果将函数A做为参数传递给函数B时，我们称函数A为回调函数
简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
●常见的使用场景：
在这里插入图片描述
在这里插入图片描述
使用匿名函数作为回调函数比较常见

9.3案例-Tab栏切换

分析:
①主要核心是类的切换，设定一个当前类，可以让当前元素高亮
②鼠标经过当前选项卡，先移除其余元素身上的当前类，而只给当前元素添加类
③注意，当前类只能有一个
【示例代码】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>tab栏切换</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</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"><img src="imgs/tab00.png" alt="" /></div><div class="item"><img src="imgs/tab01.png" alt="" /></div><div class="item"><img src="imgs/tab02.png" alt="" /></div><div class="item"><img src="imgs/tab03.png" alt="" /></div><div class="item"><img src="imgs/tab04.png" alt="" /></div></div></div><script>// 1.获取所有的aconst as = document.querySelectorAll('.tab-nav a')const divs = document.querySelectorAll('.tab-content div')for (let i = 0; i < as.length; i++) {as[i].addEventListener('mouseenter', function () {//排他思想//先去掉前一个activedocument.querySelector('.tab-nav .active').classList.remove('active')//再给当前添加activethis.classList.add('active')//5个大盒子一一对应document.querySelector('.tab-content .active').classList.remove('active')divs[i].classList.add('active')})}</script>
</body></html>

在这里插入图片描述

9.4 css伪类选择器checked

语法

input:checked {……
}

作用：
选择被勾选的复选框

【示例】

<!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>/* 选择被勾选的复选框 */input:checked {width: 30px;height: 30px;}</style>
</head><body><input type="checkbox" name="" id=""><input type="checkbox" name="" id="">
</body></html>

9.5全选文本框案例

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消
分析：
①全选复选框点击，可以得到当前按钮的checked
②把下面所有的小复选框状态checked，改为和全选复选框一致
③检查小复选框选中的个数是不是等于小复选框总的个数，把结果给全选按钮
④利用css复选框选择器input:checked
【示例代码】

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>// 1.获取大复选框const checkAll = document.querySelector('#checkAll')// 2.获取所有的小复选框const cks = document.querySelectorAll('.ck')// 3.点击大复选框 注册事件checkAll.addEventListener('click', function () {// console.log(checkAll.checked)  // 得到true或false// 4.遍历所有的小复选框 让小复选框的checked = 大复选框的checkedfor (let i = 0; i < cks.length; i++) {cks[i].checked = this.checked}})// 5.小复选框控制大复选框//给每个小复选框添加点击事件for (let i = 0; i < cks.length; i++) {cks[i].addEventListener('click', function () {// 判断选中的小复选框的个数 是否等于 总的小复选框的个数// console.log(document.querySelectorAll('.ck:checked').length)checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length})}</script>
</body></html>

在这里插入图片描述

相关文章：

9.环境对象和回调函数

9.1环境对象 指的是函数内部特殊的变量this&#xff0c;它代表着当前函数运行时所处的环境 作用&#xff1a; 弄清楚this的指向&#xff0c;可以让我们代码更简洁 ➢函数的调用方式不同&#xff0c;this指代的对象也不同 ➢[谁调用&#xff0c;this 就指代谁] 是判断this指向的…...

编程日记 2023/8/3 3:02:28

51单片机（普中HC6800-EM3 V3.0）实验例程软件分析概览

本专栏将分析普中HC6800-EM3 V3.0 (9.22)\5--实验程序\基础实验例程中的各个例程的代码。 引言：本专栏将对历程中的关键代码进行分析与拓展，再学习一遍51，记录与各位一起进步。 下面是文件列表： E:\USER\000study\000_51单片机\000普中HC6800-EM3 V3.0 (9.22)\5--实…...

编程日记 2023/8/3 3:01:27

ubuntu18.04 安装php7.4-xdebug

文章目录 场景解决 场景 apt install php7.4-xdebug 下载失败, 只好通过编译解决了 解决 https://xdebug.org/wizard 输入php -i的执行结果...

编程日记 2023/8/3 3:00:26

java 定时任务不按照规定时间执行

这里写目录标题 使用异步启动可能出现的问题排查代码中添加的定时任务步骤是否正确排查是否任务阻塞&#xff0c;如果定时任务出现异常阻塞后&#xff0c;将不会在次执行java中多个Scheduled定时器不执行为了让Scheduled效率更高&#xff0c;我们可以通过两种方法将定时任务变成…...

编程日记 2023/8/3 2:59:21

Android复习（Android基础-四大组件）—— Activity

Activity作为四大组件之首&#xff0c;是使用最为频繁的一种组件&#xff0c;中文直接翻译为"活动"&#xff0c;不过如果被翻译为"界面"会更好理解。正常情况&#xff0c;除了Window&#xff0c;Dialog和Toast &#xff0c; 我们能见到的界面只有Activity。…...

编程日记 2023/8/3 2:58:20

Linux系统安装部署MongoDB完整教程（图文详解）

前言&#xff1a;本期给大家分享一下目前最新Linux系统安装部署MongoDB完整教程&#xff0c;我的服务器采用的是Centos7&#xff0c;在部署之前我重装了我的服务器&#xff0c;目的是为了干净整洁的给大家演示我是如何一步步的操作的&#xff0c;整体部署还是挺简洁&#xff0c…...

编程日记 2023/8/3 2:57:18

CSS图片放到＜div＞里面，自适应宽高全部显示，点击图片跳到新页面预览,点击旋转按钮图片可旋转

有一个需求是图片放到一个固定宽高的<div>里面&#xff0c;不管是横图还是竖图&#xff0c;都要全部显示出来并且保持图片的长宽比例不变形&#xff0c;点击图片可以跳到一个新页面预览&#xff0c;代码如下&#xff1a; <!DOCTYPE html> <html> <head>…...

编程日记 2023/8/3 2:56:17

二阶段web基础与http协议

dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层-----传输层-----网络层-----数据链路层-----物理层 ip地址&#xff0c;每一台主机都有一个唯一的地址标识&#xff08;固定的ip地址&#xff09; 1.区分用户和计算机 2.通信 ip地址的问题在于32位二进制数组成的&…...

编程日记 2023/8/3 2:55:16

SpringBoot+Freemark根据html模板动态导出PDF

SpringBootFreemark根据html模板导出PDF 1、引入maven2、两个工具类2.1 test.html模板2.2 test.html模板中的Freemark语法 3、controller导出pdf 1、引入maven 导出pdf的一些必要jar包 <dependency><groupId>org.projectlombok</groupId><artifactId>…...

编程日记 2023/8/3 2:54:13

XPath数据提取与贴吧爬虫应用示例

XPath数据提取与贴吧爬虫应用示例 XpathXpath概述Xpath Helper插件 XPath语法基本语法查找特定节点选取未知节点选取若干路径 lxml模块使用说明使用示例 百度贴吧爬虫 Xpath Xpath概述 XPath&#xff08;XML Path Language&#xff09;是一种用于在XML文档中定位和选择节点的语…...

编程日记 2023/8/3 2:53:11

字符串匹配-KMP算法

KMP算法&#xff0c;字符串匹配算法&#xff0c;给定一个主串S&#xff0c;和一个字串T,返回字串T与之S匹配的数组下标。 在学KMP算法之前&#xff0c;对于两个字符串&#xff0c;主串S&#xff0c;和字串T&#xff0c;我们根据暴力匹配&#xff0c;定义两个指针&#xff0c;i指…...

编程日记 2023/8/3 2:52:10

Java面向对象之UML类图

UML类图 表示 public 类型&#xff0c; - 表示 private 类型&#xff0c;#表示protected类型方法的写法&#xff1a;方法的类型(、-) 方法名(参数名&#xff1a; 参数类型)&#xff1a;返回值类型...

编程日记 2023/8/3 2:51:10

【机器学习】西瓜书学习心得及课后习题参考答案—第4章决策树

这一章学起来较为简单&#xff0c;也比较好理解。 4.1基本流程——介绍了决策树的一个基本的流程。叶结点对应于决策结果&#xff0c;其他每个结点则对应于一个属性测试&#xff1b;每个结点包含的样本集合根据属性测试的结果被划分到子结点中&#xff1b;根结点包含样本全集&a…...

编程日记 2023/8/3 2:50:09

2023.8.2

2022河南萌新联赛第&#xff08;三&#xff09;场&#xff1a;河南大学\神奇数字.cpp //题意&#xff1a;给定三个正整数a b c,求x满足满足abc同余x的个数。 //这个考虑同余的性质&#xff0c;就是两个数的差去取模为0的数肯定是这两个数的同余数,。因此我们计算三个数两两之…...

编程日记 2023/8/3 2:49:08

windows运行窗口常用快捷键命令

winr打开运行窗口,然后输入快捷命令:&#xff08;当然utools和win11搜索也挺好用的&#xff09; cmd : 命令行窗口&#xff08;命令提示符窗口、cmd窗口&#xff09;regedit : 注册表mspaint : 画图工具services.msc : 本地服务设置(比如查看mysql服务是否启动成功)devmgmt.ms…...

编程日记 2023/8/3 2:48:06

HDFS的QJM方案

Quorum Journal Manager仲裁日志管理器 介绍主备切换&#xff0c;脑裂问题解决---ZKFailoverController&#xff08;zkfc&#xff09;主备切换&#xff0c;脑裂问题解决-- Fencing&#xff08;隔离&#xff09;机制主备数据状态同步问题解决 HA集群搭建集群基础环境准备HA集群规…...

编程日记 2023/8/3 2:47:00

安装win版本的neo4j（2023最新版本）

安装win版本的neo4j 写在最前面安装 win版本的neo4j1. 安装JDK2.下载配置环境变量&#xff08;也可选择直接点击快捷方式&#xff0c;就可以不用配环境了&#xff09;3. 启动neo4j 测试代码遇到的问题及解决&#xff08;每次环境都太离谱了&#xff0c;各种问题&#xff09;连接…...

编程日记 2023/8/3 2:45:58

ChatGPT结合知识图谱构建医疗问答应用 (二) - 构建问答流程

一、ChatGPT结合知识图谱 上篇文章对医疗数据集进行了整理&#xff0c;并写入了知识图谱中&#xff0c;本篇文章将结合 ChatGPT 构建基于知识图谱的问答应用。 下面是上篇文章的地址&#xff1a; ChatGPT结合知识图谱构建医疗问答应用 (一) - 构建知识图谱 这里实现问答的流程…...

编程日记 2023/8/3 2:44:55

聊天系统登录后端实现

定义返回的数据格式 # Restful API from flask import jsonifyclass HttpCode(object):# 响应正常ok 200# 没有登陆错误unloginerror 401# 没有权限错误permissionerror 403# 客户端参数错误paramserror 400# 服务器错误servererror 500def _restful_result(code, messa…...

编程日记 2023/8/3 2:43:54

Ajax笔记_01（知识点、包含代码和详细解析）

Ajax_01笔记 前置知识点 在JavaScript中 问题1&#xff1a;将数组转为字符串&#xff0c;以及字符串转为数组的方式。 问题2、将对象转为字符串&#xff0c;以及字符串转为对象的方法。 方法&#xff1a; 问题1&#xff1a; 将数组转为字符串可以使用 join() 方法。例如&…...

编程日记 2023/8/3 2:42:53

Midjourney团队协作功能深度解析（仅限Beta内测成员验证的7层工作流架构）

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Midjourney团队协作功能的演进逻辑与Beta内测准入机制 Midjourney自V5.2起将协作能力从“单用户提示工程”转向“多角色协同创作范式”&#xff0c;其核心演进逻辑围绕权限粒度、上下文继承性与资产归属治理三…...

编程新知 2026/5/20 16:09:34

游戏逆向实战：从CALL定位到功能复现，构建自动化辅助框架

1. 游戏逆向基础&#xff1a;理解CALL与基址 游戏逆向工程的核心目标之一就是找到并理解游戏中的关键功能调用&#xff08;CALL&#xff09;。这些CALL就像是游戏的"遥控器按钮"&#xff0c;按下它们就能触发特定功能。比如释放技能、打开背包、自动寻路等操作&…...

编程新知 2026/5/20 14:00:27

给地球做CT时，那些‘捣乱’的波都是什么来头？聊聊地震勘探里的‘噪音’家族

给地球做CT时&#xff0c;那些‘捣乱’的波都是什么来头&#xff1f;聊聊地震勘探里的‘噪音’家族 想象一下医生用CT扫描人体时&#xff0c;如果患者不停移动或周围有手机干扰&#xff0c;图像就会出现模糊和伪影。地球物理学家用地震波给地球做"CT扫描"时&#xf…...

编程新知 2026/5/20 13:54:09

保姆级教程：用PHPStudy+Nginx一键部署新麦同城V3开源版（附数据库配置避坑点）

零基础30分钟部署新麦同城V3&#xff1a;PHPStudyNginx全流程避坑指南 第一次接触本地部署开源系统时&#xff0c;最怕的不是代码复杂&#xff0c;而是明明按教程操作却卡在某个配置环节。本文将以真实踩坑记录为核心&#xff0c;手把手带你在Windows环境下用PHPStudy快速搭建…...

编程新知 2026/5/20 13:03:58

别再只会用OpenCV的equalizeHist了！用Python实战图像增强，让你的目标检测模型精度提升一个台阶

突破OpenCV基础操作&#xff1a;Python图像增强实战与目标检测精度优化 在目标检测项目的实际开发中&#xff0c;我们常常遇到这样的困境&#xff1a;模型在标准测试集上表现优异&#xff0c;一旦部署到真实场景&#xff0c;面对复杂光照、低对比度的图像时&#xff0c;性能却…...

编程新知 2026/5/20 13:03:52

GC9A01驱动踩坑记：从供应商代码到自研优化，软件SPI这些细节别忽略

GC9A01驱动深度优化&#xff1a;软件SPI性能压榨实战手册 当240x240的LCD屏幕刷新一张图片需要整整1秒时&#xff0c;那种卡顿感会让任何开发者抓狂。上周调试GC9A01驱动时&#xff0c;我就遇到了这个噩梦——供应商提供的软件SPI驱动在40MHz主频下刷新率不足1FPS。经过72小时的…...

编程新知 2026/5/20 12:12:39

别再乱接线了！用PulseView+逻辑分析仪抓STM32 SPI波形，保姆级避坑指南

逻辑分析仪实战&#xff1a;精准捕获STM32 SPI波形的五大黄金法则 当你在调试STM32的SPI外设时&#xff0c;是否遇到过这样的困境&#xff1a;代码配置完全按照手册操作&#xff0c;但逻辑分析仪显示的波形却充满毛刺、数据残缺不全&#xff1f;这往往不是代码逻辑的问题&#…...

编程新知 2026/5/20 9:29:58

LVGL事件处理实战：从按钮点击到滚动列表，手把手教你写交互代码（附避坑指南）

LVGL事件处理实战&#xff1a;从按钮点击到滚动列表&#xff0c;手把手教你写交互代码&#xff08;附避坑指南&#xff09; 在嵌入式GUI开发中&#xff0c;流畅的交互体验往往决定了产品的成败。LVGL作为轻量级通用图形库&#xff0c;其事件处理机制是构建动态界面的核心。本文…...

编程新知 2026/5/20 8:52:02

车间管理越管越乱？找准根源+避坑，跳出管理内耗

很多车间管理者都深陷这样的困境&#xff1a;每天忙得脚不沾地&#xff0c;盯进度、查卫生、处理各类现场异常&#xff0c;耗尽心力却收效甚微&#xff0c;车间反而越管越乱——物料堆放杂乱无章、工序衔接频频脱节、员工操作随心所欲、设备故障时有发生&#xff0c;产能上不去…...

编程新知 2026/5/20 6:40:04

保姆级避坑指南：树莓派4B+Ubuntu 22.04 LTS + 3.5寸屏，从开机到远程桌面一次搞定

树莓派4B与Ubuntu 22.04 LTS完美适配实战&#xff1a;从零搭建带屏远程开发环境 第一次接触树莓派和Ubuntu Server的新手们&#xff0c;往往会在搭建开发环境时遇到各种"坑"。本文将手把手带你绕过这些常见陷阱&#xff0c;用树莓派4B、3.5寸屏和Ubuntu 22.04 LTS打造…...

编程新知 2026/5/20 6:03:42