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

前端学习之DOM编程案例：全选反选案例

news 2025/10/16 2:13:07

代码 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全选反选</title>
</head>
<body><input type="checkbox" id="all">全选<ul><li><input type="checkbox" class="all_check">看书</li><li><input type="checkbox" class="all_check">打篮球</li><li><input type="checkbox" class="all_check">唱</li><li><input type="checkbox" class="all_check">跳</li><li><input type="checkbox" class="all_check">rap</li></ul><script>let all = document.querySelector('#all')let all1 = document.querySelectorAll('ul>li>input')all.onclick=function(){if(all.checked == true){for (i of all1){i.checked = true}}else{for(i of all1){i.checked = false}}}</script>
</body>
</html>

结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧

相关文章：

前端学习之DOM编程案例：全选反选案例

代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>全选反选</title> </head> <body><input type"checkbox" id"all">全选<ul><li><…...

编程日记 2024/4/8 4:03:12

golang map

1.底层实现 2.如何解决hash冲突 3.扩容机制 4.无序 5.非线程安全 6.不可寻址 runtime/map.go 1.底层实现 底层基于hash表实现&#xff0c;实现有2个结构体hmap&#xff0c;bmap&#xff0c;map由若干个桶存储&#xff0c;每个桶存8个元素&#xff0c;使用链地址解决hash冲突 …...

编程日记 2024/4/8 4:02:11

设计模式：享元模式案例

让我们以游戏开发中的棋类游戏&#xff08;例如国际象棋&#xff09;为例来展示享元模式的代码实现。在这个例子中&#xff0c;棋子的类型是内部状态&#xff0c;而棋子的位置是外部状态。 Java 代码示例 import java.util.HashMap; import java.util.Map;// 享元接口 interf…...

编程日记 2024/4/8 3:59:07

pandas(day5)

一. 检测重复值 1.1 检测 data pd.read_csv("./teacher/订单数据.csv")检测行与行之前是否有重复值 data.drop_duplicates()检测 列是否有重复值出现&#xff0c; keep first 从前往后判定 &#xff0c; last是从后往前判定data.drop_duplicates(subset["产…...

编程日记 2024/4/8 3:57:05

如何注册midjourney账号

注册Midjourney账号比较简单&#xff0c;准备好上网工具&#xff0c;进入官网 Midjourney访问地址&#xff1a; https://www.midjourney.com/ 目前没有免费使用额度了&#xff0c;会员最低 10 美元/月&#xff0c;一般建议使用30美元/月的订阅方案。了解如何订阅可以查看订阅…...

编程日记 2024/4/8 3:55:03

探索数据结构：特殊的双向队列

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 双向队列的定义 **双向队列(double‑ended queue)**是一种特殊的队列…...

编程日记 2024/4/8 3:53:01

16_I2C库函数

I2C库函数 1.void I2C_DeInit(I2C_TypeDef* I2Cx);2.void I2C_Init(I2C_TypeDef* I2Cx, I2C_InitTypeDef* I2C_InitStruct);3.void I2C_StructInit(I2C_InitTypeDef* I2C_InitStruct);4.void I2C_Cmd(I2C_TypeDef* I2Cx, FunctionalState NewState);5.void I2C_DMACmd(I2C_Type…...

编程日记 2024/4/8 3:52:00

十八、Rust gRPC 多 proto 演示

十八、Rust gRPC 多 proto 演示 网上及各官方资料&#xff0c;基本是一个 proto 文件&#xff0c;而实际项目&#xff0c;大多是有层级结构的多 proto 文件形式&#xff0c;本篇文章 基于此诉求&#xff0c;构建一个使用多 proto 文件的 rust grpc 使用示例。 关于 grpc 的实现…...

编程日记 2024/4/8 3:49:57

【Linux】Linux64位环境下编译32位报错skipping incompatible的解决办法

本文首发于 ❄️慕雪的寒舍 问题 如题&#xff0c;当我尝试在wsl2的ubuntu中使用-m32选项编译32位程序的时候&#xff0c;出现了下面的两种报错 ❯ g -m32 test.cpp -o test1 && ./test1 In file included from test.cpp:1: /usr/include/stdio.h:27:10: fatal error…...

编程日记 2024/4/8 3:47:54

vue指令v-model

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>vue指令v-model</title> </head>…...

编程日记 2024/4/8 3:45:51

CentOS安装MySQL数据库

一、更新yum源 #下载对应repo文件 wget -O CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-8.repo #清除缓存 yum clean all #生成新缓存 yum makecache #更新 yum update -y 二、安装MySQL #获取源 wget http://repo.mysql.com/mysql80-community-release-el7-3.…...

编程日记 2024/4/8 3:43:48

从B2B转向B2B2C模式：工业品牌史丹利百得的转型历程

图片来源&#xff1a;Twitter 在当今数据驱动的营销环境中&#xff0c;企业努力更好了解客户&#xff0c;并在整个客户旅程中提供个性化体验。史丹利百得&#xff08;Stanley Black & Decker&#xff09;是一家领先的工具和工业设备供应商&#xff0c;近年来开始重大转型。…...

编程日记 2024/4/8 3:42:47

Redis群集模式和rsync远程同步

一、Redis群集模式 1.1 概念 1.2 作用 1.2.1 Redis集群的数据分片 1.2.2 Redis集群的主从复制模型 1.3 搭建Redis 群集模式 1.3.1 开启群集功能 1.3.2 启动redis节点 1.3.3 启动集群 1.3.4 测试群集 二、rsync远程同步 2.1 概念 2.2 同步方式 2.3 备份的方式 2.4…...

编程日记 2024/4/8 3:41:46

JAVA—抽象—定义抽象类Converter及其子类WeightConverter

同样&#xff0c;我们由这道题引出抽象类&#xff0c;抽象方法这个概念。 按下面要求定义类Converter及其子类WeightConverter 定义抽象类&#xff1a;Converter&#xff1a; 定义一个抽象类Converter&#xff0c;表示换算器&#xff0c;其定义的如下&#xff1a; 一个私有…...

编程日记 2024/4/8 3:40:45

面对复杂多变的网络攻击，企业应如何守护网络安全

企业上云&#xff0c;即越来越多的企业把业务和数据&#xff0c;迁移到云端。随着云计算、大数据、物联网、人工智能等技术的发展&#xff0c;用户、应用程序和数据无处不在&#xff0c;企业之间的业务边界逐渐被打破&#xff0c;网络攻击愈演愈烈&#xff0c;手段更为多。 当前…...

编程日记 2024/4/8 3:39:43

计算机网络练习-计算机网络概述与性能指标

计算机网络概述 ----------------------------------------------------------------------------------------------------------------------------- 1. 计算机网络最据本的功能的是( )。 1,差错控制 Ⅱ.路由选择 Ⅲ,分布式处理 IV.传输控制 …...

编程日记 2024/4/8 3:38:42

vite vue3 ts import.meta在vscode中报错

问题描述&#xff1a;开发使用的框架为vitevue3ts&#xff0c;在开发过程中莫名其妙报仅当“--module”选项为“es2020”、“esnext”或“系统”时才允许使用“import.meta”元属性 问题解决&#xff1a; 通过更改tsconfig.json的module为esnext&#xff0c;es2022等&#xff0…...

编程日记 2024/4/8 3:37:41

Java synchronized（详细）

​ synchronized 一&#xff0c;介绍 在Java中&#xff0c;synchronized关键字用于解决多线程并发访问共享资源时可能出现的线程安全问题。当多个线程同时访问共享资源时&#xff0c;如果没有合适的同步机制&#xff0c;可能会导致以下问题&#xff1a; 竞态条件&#xff08…...

编程日记 2024/4/8 3:34:37

算法设计与分析实验报告python实现(排序算法、三壶谜题、交替放置的碟子、带锁的门)

一、 实验目的 1&#xff0e;加深学生对算法设计方法的基本思想、基本步骤、基本方法的理解与掌握&#xff1b; 2&#xff0e;提高学生利用课堂所学知识解决实际问题的能力&#xff1b; 3&#xff0e;提高学生综合应用所学知识解决实际问题的能力。 二、实验任务 1、排序算法…...

编程日记 2024/4/8 3:33:35

实训问题总结——ajax用get可以成功调用controller方法，用POST就出404错误

因为传输密码时必须用POST。 还有用GET传输参数&#xff0c;说有非法字符&#xff0c;想试试POST是否可以解决。 404错误的三个大致原因&#xff0c;1&#xff1a;找不到对的请求路径&#xff0c;2&#xff1a;请求方式错误&#xff0c;3、请求参数错误。 后来可以调用了。但…...

编程日记 2024/4/8 3:32:34

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/10/11 22:49:07

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/10/11 14:40:51

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/10/11 8:20:38

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/10/14 15:41:42

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/11 8:23:03

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/10/10 5:08:37

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2025/10/1 19:50:46

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/8/9 13:14:15