jQuery常用API（五）

一条咸鱼o*v*o

已于 2022-05-14 21:48:20 修改

阅读量209

点赞数

文章标签： jquery javascript 前端

于 2022-05-14 15:20:20 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/124763627

版权

6. jQuery元素操作

主要是遍历、创建、添加、删除元素操作

6.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历

语法1：

$("div").each(function (index,domEle) {xxx;})

each()方法遍历匹配的每一个元素，主要用DOM处理。each每一个
里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素，不是jQuery对象
所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象（$(domEle)）

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            // $("div").css("color", "red");
            // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            // 1. each() 方法遍历元素 
            $("div").each(function (index, domEle) {
                // each()方法的第一个参数一定是索引号，不一定要叫index,domEle同理
                console.log(index);
                // 第二个参数是dom对象，而不是jQuery对象，转换成jQuery对象之后才能有jQuery方法
                console.log(domEle);
                $(domEle).css("color", "blue");
            })
        })
    </script>
</body>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            
                //给每个元素指定不同颜色
                var arr = ["red", "blue", "yellow"];
                $("div").each(function (i, domEle) {
                    $(domEle).css("color", arr[i]);
                });
            })
        })
    </script>
</body>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var sum = 0;
        $(function () {         
            // 求元素中所有数字的和
            sum += parseInt($(domEle).text()); //因为获取过来的文本是字符型，所以要转换成数字型
            })
            console.log(sum);  //6
        })
    </script>
</body>

注意：

domEle获取到的是经过遍历到的每一个dom元素，就比如是$("div")获取到的是$对DOM元素包装后产生的对象（伪数组），$(domEle)就是这个数组中的每一个<div></div>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        $(function () {
            
            // 1. each() 方法遍历元素 
            $("div").each(function (index, domEle) {
          
                console.log(domEle);
                console.log($(domEle));
                console.log($("div"));
               
        })
    </script>
</body>

语法2：

$.each(object,function(index,element) { xxx; })

$.each() 方法可用于遍历任何对象，主要用于数据处理，比如数组、对象
里面的回调函数有2个参数：index是每个元素的索引号；element 遍历的内容

--------------------------------------$.each()和$(selector).each()的不同------------------------------------------

jQuery中文文档这样解释：

$.each()函数和 $(selector).each()是不一样的，那个是专门用来遍历一个jQuery对象。$.each()函数可用于迭代任何集合，无论是“名/值”对象（JavaScript对象）或数组。在迭代数组的情况下，回调函数每次传递一个数组索引和相应的数组值作为参数。（该值也可以通过访问this关键字得到，但是JavaScript将始终将this值作为一个Object ，即使它是一个简单的字符串或数字值。）该方法返回其第一个参数，这是迭代的对象。

如果$.each()遍历的是一个jQuery对象，那么回调函数中的参数ele就是Dom中的每一个元素


<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        $(function () {
          
            // 2.$.each()方法遍历元素，主要用来遍历数组、对象
            $.each($("div"), function (i, ele) { //ele是dom元素
                console.log(i);
                console.log(ele);
                console.log($(ele));
            })
        })
    </script>
</body>

如果遍历的是数组，那么回调函数里的参数一个是数组的索引值，一个是相应的数组值


<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        $(function () {
          
            var arr = ["tom", "jerry", "rose"];
            $.each(arr, function (i, ele) {
                console.log(i);
                console.log(ele);
            });
        })
    </script>
</body>

如果遍历的是对象，那么回调函数里的参数一个是属性名，一个是相应的属性值

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        $(function () {
            var obj = {
                name: "tom",
                age: 18
            }
            $.each(obj, function (i, ele) {
                console.log(i);     //属性名
                console.log(ele);   //属性值
            });
           
        })
    </script>
</body>

如果遍历jQuery对象。。。

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        $(function () {
            console.log($("div"));
            //遍历jQuery对象
            $.each($("div"), function (i, ele) {
                console.log(i);     //属性名
                console.log(ele);   //属性值
            });
           
        })
    </script>
</body>

遍历对象的时候，$.each()方法类似于for...in

关于JavaScript对象详见https://blog.csdn.net/m0_45659764/article/details/124208339

总结：如果想遍历dom对象，用$(selector).each()，如果想遍历数组、对象，就用$.each()

案例：购物车案例模块-计算总计和总额

步骤：

封装一个函数
声明两个变量去存放总计和总额
总计就是将所有的数量模块中文本框里的值val()加起来，作为文本值赋给amount-sum的子代em的文本值
总额就是将所有的小计中的文本加起来text()，作为文本值赋给price-sum的子代em的文本值
注意要把字符型转换成数字型，总额保留两位小数

注意：

因为在很多操作中都要使用到计算总计总额，所以直接封装一个函数，在每个操作中调用即可
从文本框中获取过来的值也是字符型，所以在计算总计和总额的时候要转换成整数/字符串型
要按照需求加减￥符号（通过字符串拼接和截取字符串）
因为页面最初默认是每件商品各1，所以应该在一开始就调用函数计算最初的总计和总额

car.js

$(function () {
    //1. 全选 全不选模块
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
    });

    // 2.如果被选中的复选框的个数等于3，就选中所有全选按钮，如果被选中的复选框的个数不等于3，就不选中所有全选案例
    $(".j-checkbox").change(function () {
        // console.log($(".j-checkbox:checked").length);
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });

    // 3.增减商品数目模块
    $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);

        // 更改该商品的总价
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + (p * n).toFixed(2));
        getSum();
    });
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 更改该商品的总价
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 4.用户修改文本框的值的时候，修改小计的值
    $(".itxt").change(function () {
        var n = $(this).val();
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + (p * n).toFixed(2));
        getSum();
    });

    //5.计算总计和总额模块
    getSum();
    function getSum() {
        var count = 0;  //总计
        var money = 0;  //总额
        // -----------------总计----------------
        $(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        // ----------------总额----------------
        $(".p-sum").each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

})

6.2 创建元素

语法：

$("<li></li>");

动态的创建了一个li

6.3 添加元素

1.内部添加

element.append("内容");

把内容放入匹配元素内部最后面，类似原生appendChild()

element.prepend("内容");

把内容放入匹配元素内部最前面

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <script>
        $(function () {
            // 1. 创建元素
            var firstli = $("<li>我是后来的li</li>");
            var lastli = $("<li>我也是后来的li</li>");
            // 2. 添加元素

            // (1) 内部添加
            $("ul").append(lastli);
            $("ul").prepend(firstli);

        })
    </script>
</body>

2. 外部添加

element.after("内容");  //把内容放入目标元素的后面
element.before("内容"); //把内容放入目标元素的前面

内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function () {
            // 1. 创建元素
            var firstli = $("<li>我是后来的li</li>");
            var lastli = $("<li>我也是后来的li</li>");
            // 2. 添加元素

            // (1) 内部添加
            $("ul").append(lastli);
            $("ul").prepend(firstli);


            // (2) 外部添加
            var firstdiv = $("<div>我是后来的div</div>");
            var lastdiv = $("<div>我也是后来的div</div>");
            $(".test").before(firstdiv);
            $(".test").after(lastdiv);

        })
    </script>
</body>

6.4 删除元素

element.remove();    //删除匹配的元素（本身）

element.empty();    //删除匹配的元素集合中所有的子节点（孩子）

element.html("");    //清空匹配的元素内容

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function () {

            // 3. 删除元素
            // $("ul").remove();  ul元素被删除
            // $("ul").empty();   ul还有 里面的li没了 删除了匹配元素的子节点
            $("ul").html("");     //ul还有 里面的li没了 删除了匹配元素的子节点

        })
    </script>
</body>

案例：购物车案例模块-删除商品模块

步骤：

点击商品后面的删除按钮时，删除（remove()）当前点击的按钮的父亲的父亲，类名为cart-item的盒子
点击删除选中的商品时，找到被选中的小复选框，删除的是当前被选中的复选框的父亲的父亲，类名为cart-item的盒子
点击清理购物车时，清除所有的类名为cart-item的盒子
给三种情况都调用统计总计和总价的方法

注意：

删除的时候，因为是对同样的元素做同样的操作，所以用隐式迭代
点击了相应的元素之后，对目标元素的删除，查找目标元素的时候都是从当前元素（$(this)）开始的
因为底下的总计和总价也要跟着页面中商品的变化而变化，所以也要调用getSum()

//6.清理购物车模块
    // （1）点击商品后面的删除按钮
    $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // （2）点击 删除选中的商品
    $(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // （3）点击 清空购物车
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    });

案例：购物车案例模块-选中商品添加背景

步骤：

定义一个背景颜色样式
如果选中了全选按钮，就给所有商品盒子cart-item添加类名，如果没有选中全选按钮，即所有的小复选框没有选中，就给所有的商品移除类名
如果单独选中一个复选框，就让当前选中的复选框（$(this)）的父元素的父元素cart-item添加类名，如果取消选中则移除类名

 //1. 全选 全不选模块
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
        // -----------------------设置背景颜色------------------------------
        if ($(".checkall").prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    });

    // 2.如果被选中的复选框的个数等于3，就选中所有全选按钮，如果被选中的复选框的个数不等于3，就不选中所有全选案例
    $(".j-checkbox").change(function () {
        // console.log($(".j-checkbox:checked").length);
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        // -------------------------设置背景颜色----------------------------------
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");

        }

    });

附上完整购物车代码

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description"
        content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jQuery -->
    <script src="./js/jquery.min.js"></script>
    <!-- 再引入自己的js -->
    <script src="./js/car.js"></script>

</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航end  -->


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="img/logo.png" alt=""> <b>购物车</b>
            </div>
        </div>
    </div>


    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                </div>

                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价： <em>￥12.60</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品优购客户端</p>
                    </dd>
                </dl>
            </div>

            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>

</html>

car.js

$(function () {
    //1. 全选 全不选模块
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
        // -----------------------设置背景颜色------------------------------
        if ($(".checkall").prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    });

    // 2.如果被选中的复选框的个数等于3，就选中所有全选按钮，如果被选中的复选框的个数不等于3，就不选中所有全选案例
    $(".j-checkbox").change(function () {
        // console.log($(".j-checkbox:checked").length);
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        // -------------------------设置背景颜色----------------------------------
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");

        }

    });

    // 3.增减商品数目模块
    $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);

        // 更改该商品的总价
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + (p * n).toFixed(2));
        getSum();
    });
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 更改该商品的总价
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 4.用户修改文本框的值的时候，修改小计的值
    $(".itxt").change(function () {
        var n = $(this).val();
        var p = $(this).parents(".p-num").siblings(".p-price").text();
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").text("￥" + (p * n).toFixed(2));
        getSum();
    });

    //5.计算总计和总额模块
    getSum();
    function getSum() {
        var count = 0;  //总计
        var money = 0;  //总额
        // -----------------总计----------------
        $(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        // ----------------总额----------------
        $(".p-sum").each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

    //6.清理购物车模块
    // （1）点击商品后面的删除按钮
    $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // （2）点击 删除选中的商品
    $(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // （3）点击 清空购物车
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    });
})

car.css

.car-header {
    padding: 20px 0;
}

.car-logo img {
    vertical-align: middle;
}

.car-logo b {
    font-size: 20px;
    margin-top: 20px;
    margin-left: 10px;
}

.cart-filter-bar {
    font-size: 16px;
    color: #E2231A;
    font-weight: 700;
}

.cart-filter-bar em {
    padding: 5px;
    border-bottom: 1px solid #E2231A;
}

.cart-thead {
    height: 32px;
    line-height: 32px;
    margin: 5px 0 10px;
    padding: 5px 0;
    background: #f3f3f3;
    border: 1px solid #e9e9e9;
    border-top: 0;
    position: relative;
}

.cart-thead>div,
.cart-item>div {
    float: left;
}

.t-checkbox,
.p-checkbox {
    height: 18px;
    line-height: 18px;
    padding-top: 7px;
    width: 122px;
    padding-left: 11px;
}

.t-goods {
    width: 400px;
}

.t-price {
    width: 120px;
    padding-right: 40px;
    text-align: right;
}

.t-num {
    width: 150px;
    text-align: center;
}

.t-sum {
    width: 100px;
    text-align: right;
}

.t-action {
    width: 130px;
    text-align: right;
}

.cart-item {
    height: 160px;
    border-style: solid;
    border-width: 2px 1px 1px;
    border-color: #aaa #f1f1f1 #f1f1f1;
    background: #fff;
    padding-top: 14px;
    margin: 15px 0;
}

.check-cart-item {
    background: #fff4e8;
}

.p-checkbox {
    width: 50px;
}

.p-goods {
    margin-top: 8px;
    width: 565px;
}

.p-img {
    float: left;
    border: 1px solid #ccc;
    padding: 5px;
}

.p-msg {
    float: left;
    width: 210px;
    margin: 0 10px;
}

.p-price {
    width: 110px;
}

.quantity-form {
    width: 80px;
    height: 22px;
}

.p-num {
    width: 170px;
}

.decrement,
.increment {
    float: left;
    border: 1px solid #cacbcb;
    height: 18px;
    line-height: 18px;
    padding: 1px 0;
    width: 16px;
    text-align: center;
    color: #666;
    margin: 0;
    background: #fff;
    margin-left: -1px;
}

.itxt {
    float: left;
    border: 1px solid #cacbcb;
    width: 42px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 1px;
    margin: 0;
    margin-left: -1px;
    font-size: 12px;
    font-family: verdana;
    color: #333;
    -webkit-appearance: none;
}

.p-sum {
    font-weight: 700;
    width: 145px;
}


/* 结算模块 */

.cart-floatbar {
    height: 50px;
    border: 1px solid #f0f0f0;
    background: #fff;
    position: relative;
    margin-bottom: 50px;
    line-height: 50px;
}

.select-all {
    float: left;
    height: 18px;
    line-height: 18px;
    padding: 16px 0 16px 9px;
    white-space: nowrap;
}

.select-all input {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
}

.operation {
    float: left;
    width: 200px;
    margin-left: 40px;
}

.clear-all {
    font-weight: 700;
    margin: 0 20px;
}

.toolbar-right {
    float: right;
}

.amount-sum {
    float: left;
}

.amount-sum em {
    font-weight: 700;
    color: #E2231A;
    padding: 0 3px;
}

.price-sum {
    float: left;
    margin: 0 15px;
}

.price-sum em {
    font-size: 16px;
    color: #E2231A;
    font-weight: 700;
}

.btn-area {
    font-weight: 700;
    width: 94px;
    height: 52px;
    line-height: 52px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    background: #e54346;
    overflow: hidden;
}

一条咸鱼o*v*o

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用API（五）

6. jQuery元素操作主要是遍历、创建、添加、删除元素操作6.1 遍历元素jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历语法1：$("div").each(function (index,domEle) {xxx;})each()方法遍历匹配的每一个元素，主要用DOM处理。each每一个里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM元素，不是jQuery对象所以想要使用jQuery方法
复制链接

扫一扫