jQuery实现简易商城系统项目实操
目录
- 一.效果图
- 二.body
- 三.jQuery
- 四.css
- 五.小结
一.效果图
二.body
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type='checkbox' name="c1"/>全选</th>
<th>商品信息</th>
<th>宜美惠价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr class="tr_0">
<td>
<input name="" type="checkbox" value=""/>
</td>
<td>
<img src="images/sang.gif" class="products"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >天堂雨伞</a></td><td>￥32.9元
</td>
<td>
<img src="images/subtraction.gif" width="20" height="20"/>
<input type="text" class="quantity" value="1"/>
<img src="images/add.gif" width="20" height="20"/>
</td>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input name="" type="checkbox" value=""/>
</td>
<td>
<img src="images/iphone.gif" class="products"/><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果手机iphone5</a></td><td>￥3339元
</td>
<td>
<img src="images/subtraction.gif" width="20" height="20"/>
<input type="text" class="quantity" value="1"/>
<img src="images/add.gif" width="20" height="20"/>
</td>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a>
</td>
</tr>
</table>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="add">添加</a>
</body>
三.jQuery
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
$(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(num<=0){
return 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<te.length;i++){
if(i==2 || te[i]=="."){
alert('不能超过100，不能有小数');
return $(this).val(1);
};
};
if(te<=0 || isNaN(te)){
$(this).val(1);
};
});
});
</script>
四.css
<style type="text/css" >
*{
font-size:12px;
}
</style>
五.小结
本章使用jQuery的方式实现了一个简易的商城系统,这一个比较潦草,明天再实现一个比较好看的.
到此这篇关于jQuery实现简易商城系统项目实操的文章就介绍到这了,更多相关jQuery商城系统内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
jQuery动态地获取系统时间实现代码
jQuery部分代码: 复制代码 代码如下: <script type="text/javascript"> function current(){ var d=new Date(),str=''; str +=d.getFullYear()+'年'; //获取当前年份 str +=d.getMonth()+1+'月'; //获取当前月份(0--11) str +=d.getDate()+'日'; str +=d.getHours()+'时'; str +=d.getMin
-
基于jQuery的投票系统显示结果插件
首先还是来看一下运行效果如图1所示. 该插件使用步骤 一.引入css文件 首先页面引入css样式文件'votecss.css',他是投票结果正常显示必不可少的.具体代码如下所示: <link href="startpic/votecss.css" rel="stylesheet" type="text/css" /> 二.引入jQuery的就是源文件 该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下: <
-
jquery实现弹窗（系统提示框）效果
本文实例为大家分享了jquery实现系统提示框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery-1.11.1.js"></script> <title>弹窗效果</title> <styl
-
jQuery实现B2B网站后台管理系统侧导航
效果图 1.html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awe
-
jQuery利用DOM遍历实现商城结算系统实战
目录 效果图 一.body 二.css 三.JavaScript 四.小结 效果图 一.body <body> <div style="background-color: antiquewhite;width: 500px;height: 450px;border: 1px solid aquamarine;border-radius: 20px;"> <table> <thead align="center"> &l
-
jQuery 1.9.1源码分析系列（十）事件系统之主动触发事件和模拟冒泡处理
发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ) { e.stopPropagation(); } jQuery重载stopPropagation函数调用的本地事件对象的stopPropagation函数阻止冒泡.也就是说,阻止冒泡的是当前节点,而不是事件源. 说到触发事件,我们第一反应是使用$(...).click()这种方式触发click事
-
jQuery实现简易商城系统项目实操
目录 一.效果图 二.body 三.jQuery 四.css 五.小结 一.效果图 二.body <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th><input type='checkbox' name="c1"/>全选</th> <th>商品信息</th
-
golang定时任务cron项目实操指南
目录 一.简介: 1.cron包 2.表达式,go cron使用的和 Linux crontab 一样的表达式 3.新老版本区别 二.项目实操 1.启动daemon 守护进程 2.统计任务 总结 一.简介: 1.cron包 cron包:"github.com/robfig/cron/v3" 文档:cron package - github.com/robfig/cron - Go Packages 2.表达式,go cron使用的和 Linux crontab 一样的表达式 # 文件格
-
Java 实战项目之家居购物商城系统详解流程
一.项目简述 功能: Java Web精品项目源码,家居商城分类展示,商品展示, 商品下单,购物车,个人中心,后台管理,用户管理,商品管理,分类管理等等. 二.项目运行 环境配置: Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts 都支持) 项目技术: Jdbc+ Servlert + html+ css + JavaScript + JQuery + Ajax + Fileupload 打开订单列
-
Java 实战项目锤炼之网上商城系统的实现流程
一.项目简述(+需求文档+PPT) 功能: 主页显示热销商品:所有商品展示,可进行商品搜索:点 击商品进入商品详情页,显示库存,具有立即购买和加入 购物车功能,可增减购买商品数量亦可手动输入(同时验证 库存),热销商品展示.立即购买进入确认订单页面,可选 择已经添加的地址,亦可新增地址.(同时验证库存),可 选择购买哪些商品,可删除不需要的商品.点击结算进入 确认订单页面,确认后提交订单,订单重复提交给予响 应,库存不足或商品下架给予响应.后台管理:(修改密码 等),商品管理(商品批量添加.上下
-
Java 实战项目锤炼之在线购书商城系统的实现流程
一.项目简述 功能:一个基于JavaWeb的网上书店的设计与实现,归纳 出了几个模块,首先是登录注册模块,图书查找模块,购 物车模块,订单模块,个人中心模块,用户管理模块,图 书管理模块等. 该项目是javaJeb技术的实战操作,采用了MVC设计模 式,包括基本的entity, jscript, servlet,以及ajax异步请 求,查询分页,持久化层方法的封装等等,对javaweb技 术的巩固很有帮助,为J2EE的学习打下基础,适用于课程 设计,毕业设计. 二.项目运行 环境配置: Jdk1
-
Java 实战项目锤炼之在线蛋糕商城系统的实现
一.项目简述 功能: 主页显示热销商品:所有蛋糕商品展示,可进行商品搜 索:点击商品进入商品详情页,具有立即购买和加入购物 车功能,可增减购买商品数量亦可手动输入(同时验证库 存),热销商品展示.立即购买进入确认订单页面,可选择 已经添加的地址,亦可新增地址.(同时验证库存),可选 择购买哪些商品,可删除不需要的商品.点击结算进入确 认订单页面,确认后提交订单.后台管理:(修改密码 等),商品管理(商品批量添加.上下架等),订单管理. 二.项目运行 环境配置: Jdk1.8 + Tomcat8.
-
Java毕业设计实战项目之在线服装销售商城系统的实现流程
一.项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持). 项目技术: Spring + SpringBoot+ mybatis + Maven + Vue 等等组成,B/S模式 + Maven管理等等. 后台管理-用户页: /** * 后台管理-用户页 */ @Controller public class UserContro
-
Java毕业设计实战项目之宠物商城系统的实现流程
一.项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持). 项目技术: Springboot + Maven + mybatis+ Vue 等等组成,B/S模式 + Maven管理等等. 后台相关接口: /** * 后台相关接口 */ @Controller @RequestMapping("/admin") publi
-
Java简易抽奖系统小项目
本文实例为大家分享了Java简易抽奖系统的具体代码,供大家参考,具体内容如下 需求: 实现一个抽奖系统 1 注册 2 登录 3 抽奖 必须先注册 再登陆 再抽奖 随机产生4个随机数作为幸运卡号 用户注册后 登录的时候 用户名密码输入判断只有三次机会 需要做到 还有2次 还有1次 三次输入错误 不能再登录 产生10个随机数 将用户注册得到的随机数作为判断 代码如下: import java.util.*; public class Homeworktest { public sta
-
Goland支持泛型了(上机实操)
事情出因 一大早上被一篇公众号的推文震惊了,Goland竟然支持go的泛型了.据我所知: Go的泛型不是还在设计草图吗?最乐观估计也要2021年8月份.你说Go语言现在都没开发好泛型,你支持这个特性有什么用呢? 带着好奇心点开推文,没发现对泛型的说明,只看到一个Goland对泛型的使用的说明链接: https://blog.jetbrains.com/go/2020/11/24/experimenting-with-go-type-parameters-generics-in-goland/,心