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

jQuery入门（四）案例

news 2026/2/8 11:08:52

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

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template>  </template>…...

编程新知 2026/1/31 6:04:01

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。船舶装配过程中的挑战与需求挑战 (1…...

编程新知 2026/2/6 2:16:18

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程，代码下载：这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现在轻量化模型设计中，**知识蒸馏（Knowledge Distillation）**被广泛应用，作为提升模型…...

编程新知 2026/1/25 7:20:01

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式一、引入在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南：计算机基础与源码原理深度解析第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...

编程新知 2025/12/9 14:22:07

【JVM】Java虚拟机（二）——垃圾回收

目录一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四&#xff…...

编程新知 2026/1/31 9:49:23

Bean 作用域有哪些？如何答出技术深度？

导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答&#xff0c…...

编程新知 2025/11/12 21:44:33

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言： 因为程序特殊需求导致，需要mysql数据库存储json类型数据，因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架，该方法利用Stable Diffusion的强大生成能力，仅需单个正常样本和文本描述，即可生成逼真且多样化的异常样本，有效解决了视觉异常检测中异常样本稀缺的难题，为工业质检、医疗影像…...

编程新知 2026/2/5 4:18:48

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2026/2/6 5:51:08

一、复选框案例

二、随机图片案例

相关文章：