jQuery实现简易商城系统项目实操详解

这篇文章主要介绍了jQuery实现简易商城系统项目实操，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下

一.效果图

二.body

"1" cellpadding="0" cellspacing="0">
   
       type='checkbox' name="c1"/>全选
       商品信息
       宜美惠价
       数量
       操作

   

   
       
           "" type="checkbox" value=""/>
          
          
           "images/sang.gif"/>天堂雨伞￥32.9元
          
          
               "images/subtraction.gif" width="20" height="20"/>
           type="text" value="1"/>
           "images/add.gif" width="20" height="20"/>
         
         
               "#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow">删除
         
      
      
       
           "" type="checkbox" value=""/>
          
          
           "images/iphone.gif"/>苹果手机iphone5￥3339元
          
          
               "images/subtraction.gif" width="20" height="20"/>
           type="text" value="1"/>
           "images/add.gif" width="20" height="20"/>
         
         
               "#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow">删除
         
      

"#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow">添加

三.jQuery

type="text/javascript" src="js/jquery-1.12.4.js" >

   $(function(){
       //点击加号触发事件
       $('[src="images/add.gif"]').click(function(){
           var num=parseInt($(this).prev().val());
           $(this).prev().val(num+1);
       });
       //点击减号触发事件
       $('[src="images/subtraction.gif"]').click(function(){
           var num=parseInt($(this).next().val());
           if(numreturn alert('不能再少了！');
           };
           $(this).next().val(num-1);
       });
       //删除事件
       $('[class="del"]').click(function(){
           $(this).parent().parent().remove();
       });
       //选中框,全选框事件
       $('[type="checkbox"]').click(function(){
           var len=$('[type="checkbox"]').length;
           var clen=$('[type="checkbox"]:checked').length;
           var t1=$('[name="c1"]').prop("checked");
           var pd=$(this).parent().text();
           if(pd=="全选"){
               $('[name="c1"]').prop("checked",t1);
               $('[type="checkbox"]').prop("checked",t1);
               return "";
           }
           if(clen==len-1 & t1==false){
               $('[name="c1"]').prop("checked",true);
           }else if(clen>=len-1 & t1==true){
               $('[name="c1"]').prop("checked",false);
           }
       });
       //添加事件
       $('[class="add"]').click(function(){
           var newD=$('tr:eq(2)').clone();
           $('tr:last').after(newD);
       });
       
       //输入框
       $('[type="text"]').change(function(){
           var te=$(this).val();
           te=te.toString();
           for(i=0;i

四.css

type="text/css" >
*{
   font-size:12px;
}

本章使用jQuery的方式实现了一个简易的商城系统,这一个比较潦草,明天再实现一个比较好看的.

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”，或扫描下方二维码进行关注，更多干货等着你 ！