描写叙述：

用户点击左边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. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

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

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

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

  4. [Web 前端] Jquery 复制元素，并修改属性, 追加到另一个元素后面

    cp from  : https://blog.csdn.net/cooledi/article/details/52813668 jquery 复制元素,并修改属性 $('#ID').clone() ...

  5. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  6. jQuery -- DOM节点的操作

    DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...

  7. jquery 添加节点的几种方法介绍

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  9. js、jquery对节点的操作(增、删)

    js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("o ...

随机推荐

  1. hdu4712 Hamming Distance

    Hamming Distance Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) To ...

  2. C#超级有用的一种类型—匿名类型

    顾名思义 匿名类型就是没有名字的类型.当一个新的匿名对象定义与前面已经存在的类型定义的内部变量类型同样时,编译器就会仅仅生成一个类定义,而不是各一个. 匿名类型对象中仍然能够再包括匿名对象. 在C#3 ...

  3. Microsoft office PPT 2007 保存时速度慢（整理自网上）

    问题描述: XP sp3上运行PPT2007,当需要保存文件时,发现竟然需要近1分钟才能保存完毕,其间可能会出现“瘟都死沙漏”来提示你正在保存. 这简直慢到过分慢到无法容忍,一开始以为是ppt文件过大 ...

  4. xcode6 中增加SDWebImage/SDWebImageDownloaderOperation.m报错解决方法

    报错报错:Use of undeclared identifier '_executing' / '_finished': 解决方法例如以下:

  5. Sencha app build 出现 missing name after . operator 问题

    此问题是在使用sencha app build命令后出现得 主要是 YUI Compressor压缩的时候,代码中出现了delete, interface之类的keyword导致的. 此时能够在Web ...

  6. JVM学习笔记（一）------的基本结构

    从Java视台的逻辑结构.我们能够从图中学习JVM: 您可以从图表清楚地看到Java该平台包括各种逻辑模块.还可以学习JDK与JRE差异 于JVM它们的物理结构,我们可以看一下从图计划: 为JVM学习 ...

  7. oracle系统包——dbms_random用法及order by 小结（转）

    dbms_random是一个可以生成随机数值或者字符串的程序包. 这个包有initialize().seed().terminate().value().normal().random().strin ...

  8. LV在系统重启后不能自动激活(boot.lvm&after.loca)

    同类相关文章:http://blog.csdn.net/laven54/article/details/9121661 最近发现suse11sp2的系统解决了异常死机的问题之后,又引入了另外的问题,比 ...

  9. Response.Redirect 打开这两种方法的一种新形式

    在一般情况下.Response.Redirect 该方法是在server年底转向,因此,除非 Response.Write("<script>window.location='h ...

  10. 函数指针玩得不熟，就不要自称为C语言高手（函数指针是解耦对象关系的最佳利器，还有signal）

    记得刚开始工作时,一位高手告诉我说,longjmp和setjmp玩得不熟,就不要自称为C语言高手.当时我半信半疑,为了让自己向高手方向迈进,还是花了一点时间去学习longjmp和setjmp的用法.后 ...