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

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

代码 

<!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><…...

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冲突 …...

设计模式:享元模式案例

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

pandas(day5)

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

如何注册midjourney账号

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

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

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

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…...

十八、Rust gRPC 多 proto 演示

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

【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…...

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>…...

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.…...

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

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

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…...

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

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

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

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

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

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

vite vue3 ts import.meta在vscode中报错

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

Java synchronized(详细)

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

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

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

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

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

1、认识MySQL存储引擎吗?

目录 1、MySQL存储引擎有哪些&#xff1f; 2、默认的存储引擎是哪个&#xff1f; 3、InnoDB和MyISAM有什么区别吗&#xff1f; 3.1、关于事务 3.2、关于行级锁 3.3、关于外键支持 3.4、关于是否支持MVCC 3.5、关于数据安全恢复 3.6、关于索引 3.7、关于性能 4、如何…...

微信小程序媒体查询

在微信小程序中&#xff0c;media媒体查询不支持screen关键字&#xff0c;因为小程序页面是再webview中渲染的&#xff0c;而不是在浏览器中渲染的。 在设置样式时&#xff0c;可以使用 wxss 文件中的 media 规则来根据屏幕宽度或高度设置不同的样式。 device-width:设备屏幕…...

前端(动态雪景背景+动态蝴蝶)

1.CSS样式 <style>html, body, a, div, span, table, tr, td, strong, ul, ol, li, h1, h2, h3, p, input {font-weight: inherit;font-size: inherit;list-style: none;border-spacing: 0;border: 0;border-collapse: collapse;text-decoration: none;padding: 0;margi…...

软考-系统集成项目管理中级-新一代信息技术

本章历年考题分值统计 本章重点常考知识点汇总清单(掌握部分可直接理解记忆) 本章历年考题及答案解析 32、2019 年上半年第 23 题 云计算通过网络提供可动态伸缩的廉价计算能力&#xff0c;(23)不属于云计算的特点。 A.虚拟化 B.高可扩展性 C.按需服务 D.优化本地存储 【参考…...

【卷积神经网络进展】

打基础日常记录 CNN基础知识1. 感知机2. DNN 深度神经网络&#xff08;全连接神经网络&#xff09;DNN 与感知机的区别DNN特点&#xff0c;全连接神经网络DNN前向传播和反向传播 3. CNN结构【提取特征分类】4. CNN应用于文本 CNN基础知识 1. 感知机 单层感知机就是一个二分类…...

yarn的安装和使用

windows mac 环境 yarn的安装和使用 yarn安装 npm install -g yarnyarn设置代理 yarn config set registry https://registry.npm.taobao.org -gyarn官方源 yarn config set registry https://registry.yarnpkg.comyarn使用 // 查看板本 yarn --version// 安装指定包 yarn…...

Golang | Leetcode Golang题解之第10题正则表达式匹配

题目&#xff1a; 题解&#xff1a; func isMatch(s string, p string) bool {m, n : len(s), len(p)matches : func(i, j int) bool {if i 0 {return false}if p[j-1] . {return true}return s[i-1] p[j-1]}f : make([][]bool, m 1)for i : 0; i < len(f); i {f[i] m…...

【Leetcode】top 100 图论

基础知识补充 1.图分为有向图和无向图&#xff0c;有权图和无权图&#xff1b; 2.图的表示方法&#xff1a;邻接矩阵适合表示稠密图&#xff0c;邻接表适合表示稀疏图&#xff1b; 邻接矩阵&#xff1a; 邻接表&#xff1a; 基础操作补充 1.邻接矩阵&#xff1a; class GraphAd…...

【沈阳航空航天大学】 <C++ 类与对象计分作业>

C类与对象 1. 设计用类完成计算两点距离2. 设计向量类3. 求n!4. 出租车收费类的设计与实现5. 定义并实现一个复数类6. 线性表类的设计与实现7. 数组求和8. 数组求最大值 1. 设计用类完成计算两点距离 【问题描述】设计二维点类Point&#xff0c;包括私有成员&#xff1a;横坐标…...

Vue3 自定义指令Custom Directives

简介 在vue中重用代码的方式有&#xff1a;组件、组合式函数。组件是主要的构建模块&#xff0c;而组合式函数更偏重于有状态的逻辑。 指令系统给我们提供了例如&#xff1a;v-model、v-bind&#xff0c;vue系统允许我们自定义指令&#xff0c;自定义指令也是一种重用代码的方式…...

网站创建教程/网站开发工程师

本插件使得您的网站可以从快递100接口获取相关配送公司的订单的具体进程&#xff0c;并在顾客登录网站时&#xff0c;查看订单详细信息时予以显示。演示前台&#xff1a; http://coc020.chinaopencart.com用户名: demodemo.com密码: demo使用以上信息登录网站前台&#xff0c;查…...

国外设计导航网站大全/搜索引擎优化seo课程总结

1、添加环境 #include<Python.h> 2、添加库路径 3、函数剖析 //初始化python解释器 void Py_Initialize(void); //检查是否初始化成功 int Py_IsIntialized(void); //导入python模块 PyObject* PyImport_ImportModule(char *name); //执行Python代码 int PyRun_Simp…...

龙口网站建设联系电话/seo营销推广多少钱

欢迎加入Unity业内qq交流群&#xff1a;956187480 qq扫描二维码加群 b站有别人的视频教程&#xff1a;https://www.bilibili.com/video/av13882682 完整源码demo地址&#xff1a;https://download.csdn.net/download/qq_37310110/10438314 参考博客地址&#xff1a;https:/…...

设置网站/优化关键词可以选择哪个工具

小学数学常用公式大全(几何体计算公式)1. 长方形的周长(长宽)2 公式&#xff1a;C(ab)22. 正方形的周长边长4 公式&#xff1a;C4a3. 长方形的面积长宽 公式&#xff1a;Sab4. 正方形的面积边长边长 公式&#xff1a;Sa*a5. 三角形的面积底高2 公式&#xff1a;Sah26. 平行四边…...

广东网页空间网站平台/网络推广平台有哪些渠道

根据API这句话&#xff0c;就很自然想到重写该方法&#xff0c;代码如下&#xff1a; $.messager.defaults { ok: "通过", cancel: "不通过" ,width:350};$.messager.confirm(系统提示,....,function(r){ if (r){ //通过...}else{//不通过...} }…...

美食网页制作素材/网络优化工程师吃香吗

如图&#xff0c;网络请求返回的浮点数精度丢失&#xff0c;直接展示肯定是有问题的。 使用时保留两位小数并去掉末尾的0 (NSString *)dealwithJDDSWithFloat:(float)number {NSString *jqStr [NSString stringWithFormat:"%.2f",number];NSString *newStr [NSStri…...