jQuery 复制节点的元素实现添加到购物车功能
描述:
用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能。
主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆,然后添加到右面的div中。
效果如果:
show you code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.left
{
float: left;
width: 500px;
height: 500px;
background-color:green;
padding-left:50px;
padding-top: 50px;
}
.right
{
float: left;
width: 500px;
height: 500px;
background-color:yellow;
padding-left:50px;
padding-top: 50px;
}
</style>
</head> <body>
<div class="left">
<p>香蕉</p>
<p>苹果</p>
<p>橘子</p>
<p>草莓</p>
</div>
<div class="right"></div>
</body>
<script type="text/javascript">
var $left = $("div.left p");
var $right = $("div.right");
$left.click(function(){
$(this).clone().appendTo($right);
})
</script>
</html>
jQuery 复制节点的元素实现添加到购物车功能的更多相关文章
- jQuery 复制节点的元素实现加入到购物车功能
描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...
- DJANGO-天天生鲜项目从0到1-009-购物车-Ajax实现添加至购物车功能
本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...
- JS实现添加至购物车功能
效果图展示: 当将书拖拽至购物车一览时: 首先将页面的基本结构写出来: <!DOCTYPE html> <html lang="en"> <head& ...
- jquery api 常见api 元素操作例子
append_prepend.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- jQuery的节点添加、删除、替换等操作
//几种添加节点的方法 //$("p").append("<b>你好吗?</b>");//向p元素中追加<b> //$(&q ...
- jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所 ...
- 用JQuery动态为选中元素添加/删除类
在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...
- 高级复制实验配置添加复制节点操作时报错:ORA-23308: object GP.T does not exist or is invalid
出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...
随机推荐
- js 判断哪个获得焦点
if(document.activeElement.id="txtIdHouse") { } var xx = document.activeElement.id; xx就是现 ...
- python中django框架的csrf验证
在form表单以post的方式提交时,django默认会带一个验证的机制csrf验证 <form action="/day02/login/" method="po ...
- Python threadpool传递参数
threadpool模块是一个很老的实现python线程池的模块,pypi已经建议用multiprocessing代替它了,但是,它使用的便捷性还是征服了一批忠实用户. threadpool模块实现多 ...
- udev学习笔记汇总
1.什么是udev udev--就是动态设备管理 udev 能够处理设备事件.管理设备文件的权限.在/dev目录中创建额外的符号链接.重命名网络接口,等等. 内核通常仅根据设备被发现的先后顺序给设备文 ...
- streamsets 数据流设计
streamsets 支持branch(分支)&& merge(合并)模式的数据流 branch 数据流 如下图: 我们可以根据数据包含的字段进行拆分,不同的数据流处理自己关注的数据 ...
- LeetCode OJ - Best Time to Buy and Sell Stock
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xiezhihua120/article/details/32939749 Say you have ...
- flash exe to flv swf
一般婚纱视频的文件都是用adobe软件转化为exe文件,所以只能用adobe flash打开,想上传到网上供朋友欣赏,却发现格式不对,那么我们可以用以下的方法将exe格式的视频转化为swf和flv等视 ...
- Phonegap 工程项目介绍
一.工程项目的路径在www下面,www下面的文件如下图 1. index.html <!DOCTYPE html> <!-- Licensed to the Apache Softw ...
- mschart 使用心得和部署。
参考: http://www.cnblogs.com/suguoqiang/archive/2013/01/16/2862945.html 1.在统计时可能需要多条数据,需要整合数据源 Chart1. ...
- 远程连接Linux虚拟机上的mysql失败的解决方法
今天在虚拟机Ubuntu上折腾了一晚上mysql,然后试着用java连接,搞了很久都没成功,但是同学配好的Debian上却连接成功了,也就是说我的配置有问题. 折腾了很久,最后还是通过理解异常信息来大 ...