jQuery 实例

讲解内容：

1. 使用jQuery实现购物车效果

代码展示：

//总金额变量
let totalPrice = 0;
//删除商品从购物车
function deleteItem(obj){
    if(window.confirm("确定要删除该商品吗？")){
        console.log('deleting...');
        $(obj).parent().parent().remove();

        initTotalPrice();
    }
}
//计算总金额
function initTotalPrice() {
    //设置总金额初始值为0
    totalPrice = 0;
    $("tr").each(function (i, e) {
        $(e).children().filter(".xj").each(function (index, element) {
            //console.log($(element).text());
            totalPrice += parseInt($(element).text());
        })
    })
    $("#totalPrice").text(totalPrice);
}

//清空购物车
function clearCart() {
    $("#cartlist").empty();
    let html = "<tr>\n" +
        "                <th>编号</th>\n" +
        "                <th>名称</th>\n" +
        "                <th>单价</th>\n" +
        "                <th>数量</th>\n" +
        "                <th>小计</th>\n" +
        "                <th>操作</th>\n" +
        "            </tr>"

    $("#cartlist").append(html);
    totalPrice = 0;
    $("#totalPrice").text(totalPrice);

}

$(function () {
    //初始化购物车总金额
    initTotalPrice();

    //减少购买数量
    $(".subNum").click(function () {
        //获得购买数量
        let num = parseInt($(this).next().val());
        //获得单价
        let price = parseInt($(this).parent().prev().text());
        if (num > 1) {
            num--;
            let xj = num * price;
            $(this).next().val(num);
            $(this).parent().next().text(xj);
        }
        //重新计算总金额
        initTotalPrice();

    })

    //增加购买数量
    $(".addNum").click(function () {
        //获得购买数量
        let num = $(this).prev().val();
        //获得单价
        let price = parseInt($(this).parent().prev().text());
        if (num < 100) {
            num++;
            let xj = num * price;
            $(this).prev().val(num);
            $(this).parent().next().text(xj);
        }
        initTotalPrice();
    })
})

执行结果：

本章总结：
学完本章内容应熟练掌握以下内容：
jQuery实现购物的思路：

使用常见dom操作实现。