jQuery 之实战
作者：楠羽
- 2022 年 9 月 18 日 福建
本文字数：2840 字
阅读完需：约 9 分钟
5、综合案例 复选框
5.1、案例效果
5.2、分析和实现
功能分析
全选
为全选按钮绑定单击事件。
获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。
全不选
为全不选按钮绑定单击事件。
获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。
反选
为反选按钮绑定单击事件
获取所有的商品项复选框元素，为其添加 checked 属性，属性值是目前相反的状态。
代码实现
<!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>
复制代码
6、综合案例 随机图片
6.1、案例效果
6.2、动态切换小图的分析和实现
功能分析
准备一个数组
定义计数器
定义定时器对象
定义图片路径变量
为开始按钮绑定单击事件
设置按钮状态
设置定时器，循环显示图片
循环获取图片路径
将当前图片显示到小图片上
计数器自增
代码实现
<!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); }); </script> </html>
复制代码
6.3、显示大图的分析和实现
功能分析
为停止按钮绑定单击事件
取消定时器
设置按钮状态
将图片显示到大图片上
代码实现
//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;"); });
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 4
版权声明: 本文为 InfoQ 作者【楠羽】的原创文章。
原文链接:【http://xie.infoq.cn/article/fb99416647fd2195bd75c43ca】。文章转载请联系作者。
楠羽
关注
还未添加个人签名 2022.08.04 加入
还未添加个人简介
评论