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

jQuery入门（四）案例

news 2026/5/13 3:01:04

jQuery 操作入门案例

一、复选框案例

功能:

列表的全选，反选，全不选功能实现。

实现步骤和分析：
- 全选
1. 为全选按钮绑定单击事件。
2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。

- 全不选
1. 为全不选按钮绑定单击事件。
2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。

- 反选
1. 为反选按钮绑定单击事件
2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。

环境：需要引入jQuery

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复选框</title>
</head>
<body><table id="tab1" border="1" width="800" align="center"><tr><th style="text-align: left"><input style="background:lightgreen" id="selectAll" type="button" value="全选"><input style="background:lightgreen" id="selectNone" type="button" value="全不选"><input style="background:lightgreen" id="reverse" type="button" value="反选"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="item"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" class="item"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" class="item"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" class="item"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr></table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//全选//1.为全选按钮添加单击事件$("#selectAll").click(function(){//2.获取所有的商品复选框元素，为其添加checked属性，属性值true$(".item").prop("checked",true);});//全不选//1.为全不选按钮添加单击事件$("#selectNone").click(function(){//2.获取所有的商品复选框元素，为其添加checked属性，属性值false$(".item").prop("checked",false);});//反选//1.为反选按钮添加单击事件$("#reverse").click(function(){//2.获取所有的商品复选框元素，为其添加checked属性，属性值是目前相反的状态let items = $(".item");items.each(function(){$(this).prop("checked",!$(this).prop("checked"));});});
</script>
</html>

二、随机图片案例

功能：

随机图片：点击开始按钮,随机图片,点击停止按钮,停止并显示大图;

实现步骤和分析：

一)开始按钮:
1. 准备一个数组
        2. 定义计数器
        3. 定义定时器对象
        4. 定义图片路径变量
        5. 为开始按钮绑定单击事件
        6. 设置按钮状态
        7. 设置定时器，循环显示图片
        8. 循环获取图片路径
        9. 将当前图片显示到小图片上
        10. 计数器自增

    二)停止按钮:
        1. 为停止按钮绑定单击事件
        2. 取消定时器
        3. 设置按钮状态
        4. 将图片显示到大图片上

环境：需要引入jQuery和准备图片；

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px"><img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px"><img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div><!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>//1.准备一个数组let imgs = ["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg","img/06.jpg","img/07.jpg","img/08.jpg","img/09.jpg","img/10.jpg"];//2.定义计数器变量let count = 0;//3.声明定时器对象let time = null;//4.声明图片路径变量let imgSrc = "";//5.为开始按钮绑定单击事件$("#startBtn").click(function(){//6.设置按钮状态//禁用开始按钮$("#startBtn").prop("disabled",true);//启用停止按钮$("#stopBtn").prop("disabled",false);//7.设置定时器，循环显示图片time = setInterval(function(){//8.循环获取图片路径let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0  //9.将当前图片显示到小图片上imgSrc = imgs[index];$("#small").prop("src",imgSrc);//10.计数器自增count++;},10);});//11.为停止按钮绑定单击事件$("#stopBtn").click(function(){//12.取消定时器clearInterval(time);//13.设置按钮状态//启用开始按钮$("#startBtn").prop("disabled",false);//禁用停止按钮$("#stopBtn").prop("disabled",true);//14.将图片显示到大图片上$("#big").prop("src",imgSrc);$("#big").prop("style","width: 400px; height: 400px;");});</script>
</html>

jQuery入门（四）案例

jQuery 操作入门案例一、复选框案例功能: 列表的全选，反选，全不选功能实现。实现步骤和分析： - 全选 1. 为全选按钮绑定单击事件。 2. 获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。 -…...

编程日记 2024/8/1 23:59:23

揭秘MITM攻击：原理、手法与防范措施

中间人攻击发生时，攻击者会在通讯两端之间插入自己，成为通信链路的一部分。攻击者可以拦截、查看、修改甚至重新定向受害者之间的通信数据，而不被双方察觉。这种攻击常见于未加密的Wi-Fi网络、不安全的HTTP连接或者通过社会工程学手段诱导受害…...

编程日记 2024/8/1 23:57:21

【YOLOv8】一文全解+亮点介绍+训练教程+独家魔改优化技巧

前言 Hello，大家好，我是cv君，最近开始在空闲之余，经常更新文章啦！除目标检测、分类、分隔、姿态估计等任务外，还会涵盖图像增强领域，如超分辨率、画质增强、降噪、夜视增强、去雾去雨、ISP、海…...

编程日记 2024/8/1 23:56:20

创建mvp ubo(uniform buffer object)

创建过程： 创建一个uniform buffer查找buffer memory requirements分配、绑定buffer memorymap buffer memory拷贝mvp data to buffer memoryunmap buffer memory 示例代码： glm::mat4 projection glm::perspective(glm::radians(45.0f), 1.0f, 0.1f…...

编程日记 2024/8/1 23:55:19

1.GPIO

理论说明输入上拉输入：拉高电平下拉输入：拉低电平浮空输入：不拉高也不拉低电平输出开漏输出：不能输出高电平（P-MOS不可用，则只能低电平） 推挽输出：可输出高低电平输出速率…...

编程日记 2024/8/1 23:54:18

C++必修：STL之vector的了解与使用

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯，先赞后看哦~🎈🎈 所属专栏：C学习贝蒂的主页：Betty’s blog 1. C/C中的数组 1.1. C语言中的数组在 C 语言中，数组是一组相同类型…...

编程日记 2024/8/1 23:53:17

【MySQL】索引【上】 {没有索引的查询/磁盘/mysql与磁盘IO/初识索引}

文章目录 1.没有索引存在的问题2. 认识磁盘MySQL与存储MySQL与磁盘交互基本单位建立共识图解IO认识索引在关系数据库中，索引是一种单独的、物理的对数据库表中一列或多列的值进行排序的一种存储结构，它是某个表中一列或若干列值的集合和相应的指向表中物…...

编程日记 2024/8/1 23:51:15

GO goroutine状态流转

Gidle -> Grunnable newproc获取新的goroutine，并放置到P运行队列中这也是go关键字之后实际编译调用的方法 func newproc(fn *funcval) {// 获取当前正在运行中的goroutinegp : getg()// 获取调用者的程序计数器地址，用于调试和跟踪pc : getcallerp…...

编程日记 2024/8/1 23:50:14

DLMS/COSEM中的信息安全：DLMS/COSEM安全概念（上）

DLMS/COSEM中的信息安全描述并规定： ——DLMS/COSEM安全概念； ——选择加密算法； ——安全密钥； ——使用加密算法进行实体认证、xDLMS APDU保护和COSEM数据保护。 1.综述 DLMS/COSEM服务器的资源（COSEM对象属性和方法）可以由在应用连接内的DLMS/COSEM客户机访问。在AA…...

编程日记 2024/8/1 23:47:11

C语言第九天笔记

数组的概念什么是数组数组是相同类型， 有序数据的集合。数组的特征数组中的数据被称为数组的元素，是同构的数组中的元素存放在内存空间里 (char player_name[6]：申请在内存中开辟6块连续的基于char类型的变量空间) 衍生概念&…...

编程日记 2024/8/1 23:46:10

智慧环卫可视化：科技赋能城市清洁管理

图扑智慧环卫可视化通过实时监控、数据分析和智能调度，提高环卫作业效率，优化资源配置，提升城市清洁水平，实现城市管理的精细化和现代化。...

编程日记 2024/8/1 23:45:09

【力扣】SQL题库练习5

高级查询和连接 1341.电影评分表：Movies ------------------------ | Column Name | Type | ------------------------ | movie_id | int | | title | varchar | ------------------------ movie_id 是这个表的主键(具有唯一值的列)。 ti…...

编程日记 2024/8/1 23:44:08

永结无间Ⅸ--你不需要LLM Agent

人们将目光锁定在下一个闪亮的事物上。FOMO 是人性的一部分。这也适用于企业。就像数据科学成为每个企业分析功能的热潮一样，Agentic Architecture 是大多数 AI 雷达上的热门目标。但您是否考虑过您是否真的需要它？ 实际情况是，您不需要 A…...

编程日记 2024/8/1 23:43:07

Simulink|基于粒子群算法的永磁同步电机多参数辨识

目录主要内容模型研究结果一览下载链接主要内容仿真程序参考文献《改进粒子群算法的永磁同步电机多参数辨识》，采用粒子群算法与simulink模型结合的方式，对永磁同步电机进行多参数辨识。程序以定子绕组电阻、d轴电感、q轴电感和永磁…...

编程日记 2024/8/1 23:42:06

程序如何自动点击亚马逊商户后台的“邀请评论”按钮

要在亚马逊上自动点击“邀请评论”按钮，可以使用自动化脚本来实现。由于你希望自动化操作，我提供一个示例代码，使用 Selenium WebDriver 来执行这个任务。Selenium 是一个流行的浏览器自动化工具，能够模拟用户操作，例如…...

编程日记 2024/8/1 23:39:04

大模型算法面试题（十八）

本系列收纳各种大模型面试题及答案。 1、P-tuning v2 思路、优缺点是什么 P-tuning v2是清华大学自然语言处理实验室（THUDM）等研究机构提出的一种新的预训练模型优化方法，主要关注如何通过动态构建任务相关的提示序列来引导预训练模型进行更…...

编程日记 2024/8/1 23:37:03

手机在网状态接口如何对接？（二）

一、什么是手机在网状态？ 传入手机号码，查询该手机号的在网状态，返回内容有正常使用、停机、在网但不可用、不在网（销号/未启用/异常）、预销户等多种状态。二、手机在网状态使用场景？ 1.用户验证与联系…...

编程日记 2024/8/1 23:36:02

力扣-3232. 判断是否可以赢得数字游戏

给你一个正整数数组 nums。 Alice 和 Bob 正在玩游戏。在游戏中，Alice 可以从 nums 中选择所有个位数或所有两位数，剩余的数字归 Bob 所有。如果 Alice 所选数字之和严格大于 Bob 的数字之和，则 Alice 获胜。如果 Alice 能赢得这场游…...

编程日记 2024/8/1 23:35:01

Table SQL connectors以及FileSystem、JDBC connector

目录 Flink支持的连接器如何使用连接器 FileSystem SQL Connector 文件格式分区文件 Source 目录监控元数据 Streaming Sink 滚动策略文件合并 JDBC SQL Connector 依赖如何创建JDBC表连接器配置案例 pom依赖代码测试 Flink的Table API和SQL…...

编程日记 2024/8/1 23:34:00

Animate软件基础：“分散到图层”创建的新图层

FlashASer：AdobeAnimate2021软件零基础入门教程https://zhuanlan.zhihu.com/p/633230084 FlashASer：实用的各种Adobe Animate软件教程https://zhuanlan.zhihu.com/p/675680471 FlashASer：Animate教程及作品源文件https://zhuanlan.zhihu.co…...

编程日记 2024/8/1 23:32:59

底特律汽车产业转型：从全球平台战略到创新生态重构

1. 从废墟中重生：底特律汽车产业的韧性复苏如果你在2010年前后关注过全球汽车产业，或者对美国的工业经济史稍有了解，那么“底特律”这个名字，在当时几乎就是“衰败”与“绝望”的同义词。这座曾经的“汽车之城”，在200…...

编程新知 2026/5/13 1:21:33

观察Taotoken在多模型同时高并发调用下的服务表现

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度观察Taotoken在多模型同时高并发调用下的服务表现在构建依赖大模型能力的应用时，一个常见的工程挑战是如何应对突发的…...

编程新知 2026/5/12 22:50:45

告别电网波动干扰：手把手教你用双同步坐标系锁相环搞定不平衡电压

告别电网波动干扰：手把手教你用双同步坐标系锁相环搞定不平衡电压当光伏逆变器在阴天突然遭遇电网电压跌落，或是风电变流器面对负载突变导致的相位抖动时，工程师的控制台前总会亮起刺眼的警报灯。这种三相电压不平衡的工况，就像在…...

编程新知 2026/5/12 22:18:06

FPGA单粒子翻转（SEU）原理、影响与防护策略全解析

1. 是什么在“骚扰”我的FPGA？——深入解析单粒子翻转作为一名在电子设计领域摸爬滚打了十几年的工程师，我经手过不少高可靠性的项目，从地面通信基站到近地轨道的载荷设备都有涉及。在这些项目中，有一个幽灵般的问题总是如影随形&…...

编程新知 2026/5/12 22:02:44

91160-cli：健康160平台终极挂号神器，5分钟上手解决抢号难题

91160-cli：健康160平台终极挂号神器，5分钟上手解决抢号难题【免费下载链接】91160-cli 健康160全自动挂号脚本，捡漏神器项目地址: https://gitcode.com/gh_mirrors/91/91160-cli 你是否还在为抢不到专家号而烦恼？面对健康…...

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

重塑Cherry MX键帽个性化生态：从开源3D模型到无限定制可能

重塑Cherry MX键帽个性化生态：从开源3D模型到无限定制可能【免费下载链接】cherry-mx-keycaps 3D models of Chery MX keycaps 项目地址: https://gitcode.com/gh_mirrors/ch/cherry-mx-keycaps 传统机械键盘键帽市场长期被少数厂商垄断，个性化选…...

编程新知 2026/5/12 20:33:03

Cache映射策略全解析：从全相联到组相连，如何平衡灵活性与效率？

1. 为什么需要Cache映射策略？ 想象一下你正在图书馆找一本书。如果每次都要从最外层的书架开始一本本翻找，效率肯定低得令人发指。这时候我们会给书籍分类编号——这就是Cache映射策略的日常类比。在计算机体系结构中，CPU的运行速度远远快于…...

编程新知 2026/5/12 20:33:03

风机技术演进与主动冷却系统优化实践

1. 风机技术演进与主动空气冷却系统优化作为一名在热管理领域工作多年的工程师，我见证了风机技术从简单的散热部件发展为精密的热管理系统的全过程。现代电子设备功率密度不断提升，从智能手机到数据中心服务器，散热设计已成为产品成败的关键因…...

编程新知 2026/5/12 20:03:21

Cursor Pro激活器：终极解决方案告别API限制，实现无限免费使用

Cursor Pro激活器：终极解决方案告别API限制，实现无限免费使用【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youv…...

编程新知 2026/5/12 18:28:47

从数据模型到领域驱动设计：数据库抽象与微服务实践的演进

在软件开发的漫长历史中，如何有效地对现实世界进行建模，始终是核心挑战之一。从早期的层次数据库到当今的微服务架构，数据模型作为连接业务需求与技术实现的桥梁，经历了深刻的演变。本文基于对概念数据模型、基本数据模型和面向对象模型的系统探讨，进一步延伸到领域驱动设…...

编程新知 2026/5/12 17:47:53

一、复选框案例

二、随机图片案例

相关文章：