描述：

用户点击左边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 复制节点的元素实现添加到购物车功能的更多相关文章

  1. jQuery 复制节点的元素实现加入到购物车功能

    描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...

  2. DJANGO-天天生鲜项目从0到1-009-购物车-Ajax实现添加至购物车功能

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  3. JS实现添加至购物车功能

    效果图展示: 当将书拖拽至购物车一览时: 首先将页面的基本结构写出来: <!DOCTYPE html> <html lang="en"> <head& ...

  4. jquery api 常见api 元素操作例子

    append_prepend.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  5. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

  6. jQuery的节点添加、删除、替换等操作

    //几种添加节点的方法 //$("p").append("<b>你好吗?</b>");//向p元素中追加<b> //$(&q ...

  7. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  8. 用JQuery动态为选中元素添加/删除类

    在做一些tab页功能时,我们经常会见到如下样式: 即当选中一个元素时,在此元素下会添加相应的类,以示区别.今天就研究了一下如何用JQuery实现此效果. 1. HTML代码 <a id=&quo ...

  9. 高级复制实验配置添加复制节点操作时报错：ORA-23308: object GP.T does not exist or is invalid

    出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...

随机推荐

  1. HTML, CSS. JS的各种奇淫技巧

    1. js 中为了省字节,性能, 防止被重写等发明了各种写法,记录下 //取整 parseInt(a,10); //Before Math.floor(a); //Before a>>0; ...

  2. 开发中PG,PL,SE,PM都是什么意思

    注:参考连接:http://blog.csdn.net/ahutqi/article/details/42104361 项目最顶层是项目负责人,接下来项目会落实到pm(项目经理PM),项目经理将任务分 ...

  3. leetcode:Insert Sort List

    问题描写叙述 对一个单链表进行插入排序,head指向第一个结点. 代码 /** * Definition for singly-linked list. * struct ListNode { * i ...

  4. fb远程连接服务器调试，碉堡了

    开发中经常碰到本地代码没问题,上传到服务器上就有有问题, 这个时候调试变的很麻烦,放个textField自己保存日志这种方式调试的都是. 今天刚学了远程连接服务器,adobe真是牛逼坏了啊. 新增一个 ...

  5. 记 TP-Link 路由器的 WDS 设置

    记 TP-Link 路由器的 WDS 设置 有一台旧的 TP-Link 路由器,是以前朋友送的,外壳看起来还不错,也挺新的. 本来已经有一台极路由了,看到信号还是不够好,所以想使用 TP-Link 的 ...

  6. sql server利用cte递归查询

    1.数据环境准备 参考Oracle递归查询文章. 2.查询某个节点下的所有子节点 with cte(id,name,parent_id) as ( select id,name,parent_id f ...

  7. Java课程设计---web版斗地主

    一. 团队课程设计博客链接 二.个人负责模块和任务说明 负责前后端数据传输 JSP界面的设计 根据后台传来的数据进行页面动态更新 负责Servlet设计 三.自己的代码提交记录截图 四.自己负责模块或 ...

  8. 删除TFS项目上的文件

    1.用vs(版本)开发人员命令提示输入命令进行删除 1.

  9. HDU 1710 Binary Tree Traversals（树的建立，前序中序后序）

    Binary Tree Traversals Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  10. 基于http协议实现RPC远程调用

    今天简单说一下基本Http协议来实现RPC框架~ 基于Http协议实现RPC框架: 优点: 1.简单.实用.开发方便 缺点: 1.性能不是很稳定,在海量数据时,完全顶不住,容易宕机 2.因为不是走的注 ...