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

jQuery入门（四）案例

news 2026/1/30 4:29:43

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

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/1/27 6:54:54

conda相比python好处

Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

蓝桥杯 2024 15届国赛 A组儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐题目描述五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。今天是六一儿童节，小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

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

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

编程新知 2026/1/26 13:21:10

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。一、源型模式的定义原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点：避免重复初…...

编程新知 2026/1/28 7:03:26

React19源码系列之事件插件系统

事件类别事件类型定义文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/1/28 8:57:48

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。方法一：使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

一、复选框案例

二、随机图片案例

相关文章：