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

jQuery入门（四）案例

news 文章来源：https://blog.csdn.net/kong7906928/article/details/140809756 2025/1/17 9:04:06

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 操作入门案例 一、复选框案例 功能: 列表的全选&#xff0c;反选&#xff0c;全不选功能实现。 实现步骤和分析&#xff1a; - 全选 1. 为全选按钮绑定单击事件。 2. 获取所有的商品项复选框元素&#xff0c;为其添加 checked 属性&#xff0c;属性值为 true。 -…...

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

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

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

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

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

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

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

创建mvp ubo(uniform buffer object)

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

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

1.GPIO

理论说明 输入 上拉输入&#xff1a;拉高电平 下拉输入&#xff1a;拉低电平 浮空输入&#xff1a;不拉高也不拉低电平 输出 开漏输出&#xff1a;不能输出高电平&#xff08;P-MOS不可用&#xff0c;则只能低电平&#xff09; 推挽输出&#xff1a;可输出高低电平 输出速率…...

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

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

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

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

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

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

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

GO goroutine状态流转

Gidle -> Grunnable newproc获取新的goroutine&#xff0c;并放置到P运行队列中 这也是go关键字之后实际编译调用的方法 func newproc(fn *funcval) {// 获取当前正在运行中的goroutinegp : getg()// 获取调用者的程序计数器地址&#xff0c;用于调试和跟踪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语言第九天笔记

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

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

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

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

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

【力扣】SQL题库练习5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

给你一个 正整数 数组 nums。 Alice 和 Bob 正在玩游戏。在游戏中&#xff0c;Alice 可以从 nums 中选择所有个位数 或 所有两位数&#xff0c;剩余的数字归 Bob 所有。如果 Alice 所选数字之和 严格大于 Bob 的数字之和&#xff0c;则 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&#xff1a;AdobeAnimate2021软件零基础入门教程https://zhuanlan.zhihu.com/p/633230084 FlashASer&#xff1a;实用的各种Adobe Animate软件教程https://zhuanlan.zhihu.com/p/675680471 FlashASer&#xff1a;Animate教程及作品源文件https://zhuanlan.zhihu.co…...

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

ffmpeg命令-Windows下常用最全

查询命令 参数 说明 -version 显示版本。 -formats 显示可用的格式&#xff08;包括设备&#xff09;。 -demuxers 显示可用的demuxers。 -muxers 显示可用的muxers。 -devices 显示可用的设备。 -codecs 显示libavcodec已知的所有编解码器。 -decoders 显示可用…...

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

反序列化漏洞靶机实战-serial

一.安装靶机 下载地址为https://download.vulnhub.com/serial/serial.zip&#xff0c;安装好后开启靶机&#xff0c;这里并不需要我们去登录&#xff0c;直接扫描虚拟机nat模式下c网段的ip&#xff0c;看看哪个的80端口开放&#xff0c;然后直接去访问 二.查找cookie 访问靶…...

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

医疗器械产品没有互联网连接，就不适用于网络安全要求吗？

医疗器械产品是否不适用于网络安全要求&#xff0c;需要考虑产品是否具有网络连接功能以进行电子数据交换或远程控制&#xff0c;以及是否采用储存媒介进行电子数据交换。详细解析如下&#xff1a; 一、医疗器械的网络安全要求不仅限于互联网连接 数据交换接口&#xff1a;医疗…...

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

可视掏耳勺安全吗？独家揭示六大风险弊病！

很多人习惯在洗漱完顺手拿一根棉签掏耳朵&#xff0c;但是棉签的表面直径大且粗糙&#xff0c;不易将耳朵深处的耳垢挖出&#xff0c;耳垢堆积在耳道深处长时间不清理会导致堵塞耳道&#xff0c;引起耳鸣甚至感染。而可视掏耳勺作为一种新型的挖耳工具&#xff0c;它的安全性也…...

编程日记 2024/8/1 23:25:52

JavaScript 变量声明var、let、const

在 JavaScript 中&#xff0c;var、let和const是用于声明变量的关键字。 let和const是JavaScript里相对较新的变量声明方式。 let用法类似于var&#xff0c;但是所声明的变量&#xff0c;只在let命令所在的代码块内有效。 const声明一个只读的常量。一旦声明&#xff0c;常量的…...

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

ipvlan: operation not supported 导致的POD不断重启

情况描述 接到反馈有一台虚拟机HA迁移了&#xff0c;需要检查一下上面业务是否正常&#xff0c;由于是K8S node节点&#xff0c;正常情况下重启会自动恢复的&#xff0c;不过抱着严谨的态度&#xff0c;上去看了一眼。 问题&#xff1a;发现docker运行正常&#xff0c;但是业…...

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

组蛋白乳酸化和RNA甲基化如何联动？请大数据把这个思路推给科研人

在细胞生物学中&#xff0c;基因表达调控是决定细胞功能与命运的核心过程之一。组蛋白作为修饰性蛋白&#xff0c;在调控基因转录中起着至关重要的作用。近年来&#xff0c;科学家们发现&#xff0c;组蛋白的多种化学修饰&#xff08;如甲基化、乙酰化、磷酸化等&#xff09;影…...

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

操作文件-Path

Java操作文件-Path Paths 参数说明 first&#xff1a;必选参数&#xff0c;表示路径的第一个组件。more&#xff1a;可选参数&#xff0c;表示路径的其他组件&#xff0c;可以传入多个。 创建路径对象 // 创建一个表示当前工作目录的Path对象 Path currentPath Paths.get…...

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

RAC（Teamcenter ）开发，Bom行解包和打包的方法

1、打包 UnpackAllAction allAction new UnpackAllAction((AbstractBOMLineViewerApplication) currentApplication, "packAllAction"); new Thread(allAction).start();2、解包 UnpackCommand command new UnpackCommand(bomLine); command.executeModal();3、注…...

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

log4j2漏洞练习

log4j2 是Apache的一个java日志框架&#xff0c;我们借助它进行日志相关操作管理&#xff0c;然而在2021年末log4j2爆出了远程代码执行漏洞&#xff0c;属于严重等级的漏洞。apache log4j通过定义每一条日志信息的级别能够更加细致地控制日志生成地过程&#xff0c;受影响的版本…...

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

炫彩发光字制作免费网站/推广普通话宣传语

# 测试3 location / {root /usr/local/openresty/nginx/html/test3;index index.html index.htm;try_files $uri $uri/ /index.html; #解决页面刷新404问题 }...

编程日记 2025/1/17 8:59:06

政府网站建设工作方案/软文推广去哪个平台好

协议详解篇 2.1 HTTP/1.0和HTTP/1.1的比较 RFC 1945定义了HTTP/1.0版本&#xff0c;RFC 2616定义了HTTP/1.1版本。 笔者在blog上提供了这两个RFC中文版的下载地址。 RFC1945下载地址&#xff1a; http://www.blogjava.net/Files/amigoxie/RFC1945&#xff08;HTTP&#xff09;中…...

编程日记 2025/1/17 8:05:19

个人门户网站建设流程/培训机构查询网

看到渣浪的查看文章或者查看大图有个效果&#xff1a;弹窗查看内容时&#xff0c;如果内容过长有滚动条&#xff0c;则滚动条会被放到body区滚动 什么意思呢&#xff1f; 看个图片&#xff0c;一般正常弹窗是有宽高限制的&#xff0c;如果内容过长则直接在弹窗中进行滚动 点我预…...

编程日记 2025/1/17 5:42:22

登封做网站优化/一站式发稿平台

1、出现如下错误 解决办法&#xff1a; ①确保你有该文件夹的完全控制权。文件夹点右键->属性->安全->高级->所有者->改为自己->编辑自己的权限为完全控制。 ②将setup.exe的兼容性改为windows server 2003(server pack 1)。右键属性-〉兼容性-〉兼容模式…...

编程日记 2025/1/17 3:12:24

网站建设服务费账务处理/app推广员怎么做

linux系统想要添加新的硬盘&#xff0c;按照此方法操作&#xff1a; 1.首先&#xff0c;查看系统硬盘挂载情况&#xff1a;lsblk 或者 lsblk -f 2.虚拟机的话&#xff0c;在设置中添加新硬盘&#xff0c;然后重启。 3.新硬盘分区&#xff1a;fdisk 新硬盘名字 示例…...

编程日记 2025/1/17 1:47:25

广州建设交易中心网站/网站建设网站

一、XML约束之DDT 1. 概念 XML中所有标签是用户自行定义的&#xff0c;在某些程序软件中使用的配置文件中&#xff0c;读取指定内容。为了约束用户必须编写指定的标签内容&#xff0c;而使用约束DDT(当然目前常使用的是schema&#xff0c;因为功能更强灵活)。 这里引用两个概…...

编程日记 2025/1/17 0:11:20