jQuery入门（四）案例

最新推荐文章于 2024-09-29 09:20:06 发布

kong7906928

最新推荐文章于 2024-09-29 09:20:06 发布

阅读量302

点赞数 7

分类专栏：前端文章标签： jquery 前端 jQuery操作入门案例

本文链接：https://blog.csdn.net/kong7906928/article/details/140809756

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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>