良许Linux教程网 干货合集 jQuery实现简易商城系统项目实操详解

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

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

一.效果图

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”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部