前端学习（三）实训复习一JQuery框架（二）

一、商品购物车：

要求：

效果图：

前端教材提供。

JS自写： 

calToal();
//1.删除功能
$("table").find("tr[id^='product']").find(".cart_td_8").find("a").click(function(){
    if (confirm("确认要删除吗")) {
      var $tr=$(this).parent().parent();
      $tr.prev().remove();
      $tr.remove();
      calToal();
    }
})
//2.计算金额、积分
function calToal(){
  var money=0;
  var score=0;
  $("table").find("tr[id^='product']").each(function(){
    var jfFeng=$(this).find(".cart_td_4").html();
    var price=$(this).find(".cart_td_5").html();
    var number=$(this).find(".cart_td_6").find("input").val();
    money+=price*number;
    score+=jfFeng*number;
  })
  $("#total").html(money);
  $("#integral").html(score);
}
//3.增加、减少
$(".cart_td_6").find("img[class='hand']").click(function(){
  if ($(this).attr("alt")=="minus") {
    var origin=$(this).next().val();
    --origin;
    if (origin<1) {
      alert("数量至少为1");
    } else{
      $(this).next().val(origin);
      calToal();
    }

  }else if($(this).attr("alt")=="add"){
      var orgin=$(this).prev().val();
      ++orgin;
      $(this).prev().val(orgin);
      calToal();
    }
})
//4、全选、反选
$("#allCheckBox").click(function(){
  if ($("input[name='cartCheckBox']:checked").length==0) {
    $("input[name='cartCheckBox']").prop("checked",true);
  } else{
    $("input[name='cartCheckBox']").prop("checked",false);
  }
})
//删除所选
$("img[alt='delete']").click(function(){
  if ($("input[name='cartCheckBox']:checked").length==0) {
    alert("请全选先再点击");
    $("input[name='cartCheckBox']").prop("checked",true);
  } else{
    $("input[name='cartCheckBox']:checked").each(function(){
      var $tr=$(this).parent().parent();
      $tr.prev().remove();
      $tr.remove();
    })
    calToal();
  }
})
/*$(".cart_td_6").find("img[class='hand']").click(function(){
  var cc=$(this).parent().find("input");
  if("$(")
})*/

var flag = 0;
$("#shopping_commend_arrow").click(function() {
  if(flag == 0) {
    $("#shopping_commend_sort").toggle();
    $("#shopping_commend_arrow").attr('src',"images/shopping_arrow_down.gif");
    flag = 1;
  } else {
    $("#shopping_commend_sort").toggle();
    flag=0;
  }
})

完成下拉框功能

二、表单验证

。。。原生的写过很多次，后面做租车SSM+layui注册时进行复习