jQuery实战

客官°小女子只卖身不卖艺 2023-10-05 23:36 14阅读 0赞

## 5、综合案例 复选框 ##

### 5.1、案例效果 ###

![在这里插入图片描述][869768fd75194c729e595bca15bee7df.png]

### 5.2、分析和实现 ###

**功能分析**

*  全选
    
     *  1.  为全选按钮绑定单击事件。
        2.  获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 true。
 *  全不选
    
     *  1.  为全不选按钮绑定单击事件。
        2.  获取所有的商品项复选框元素，为其添加 checked 属性，属性值为 false。
 *  反选
    
     *  1.  为反选按钮绑定单击事件
        2.  获取所有的商品项复选框元素，为其添加 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、案例效果 ###

![在这里插入图片描述][65dbb5e6d98f4cb99d0707baaaff6b2e.png]

### 6.2、动态切换小图的分析和实现 ###

*  **功能分析**
    
    1.  准备一个数组
    2.  定义计数器
    3.  定义定时器对象
    4.  定义图片路径变量
    5.  为开始按钮绑定单击事件
    6.  设置按钮状态
    7.  设置定时器，循环显示图片
    8.  循环获取图片路径
    9.  将当前图片显示到小图片上
    10. 计数器自增
 *  **代码实现**
    
        <!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、显示大图的分析和实现 ###

*  **功能分析**
    
    1.  为停止按钮绑定单击事件
    2.  取消定时器
    3.  设置按钮状态
    4.  将图片显示到大图片上
 *  **代码实现**
    
        //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;");
        });

[869768fd75194c729e595bca15bee7df.png]: https://img-blog.csdnimg.cn/869768fd75194c729e595bca15bee7df.png
[65dbb5e6d98f4cb99d0707baaaff6b2e.png]: https://img-blog.csdnimg.cn/65dbb5e6d98f4cb99d0707baaaff6b2e.png