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>
