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

jQuery入门（四）案例

news 2025/7/8 16:23:27

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

铭豹扩展坞 USB转网口突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因：背景：一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/7/7 5:19:14

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/7/5 22:11:12

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素文章来源： http://raspberry.dns8844.cn/documentation 原文网址使用 rpicam-app 通过网络流式传输视频本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用，可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器，能够帮助开发者更好地管理复杂的依赖关系，而 GraphQL 则是一种用于 API 的查询语言，能够提…...

编程新知 2025/7/6 21:33:24

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/7/6 15:15:08

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/7/7 11:21:24

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...

编程新知 2025/7/5 16:03:22

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程四、Thread类的核心…...

编程新知 2025/6/27 3:48:34

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。一、通道的基本分类类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/6/21 5:00:15

一、复选框案例

二、随机图片案例

相关文章：