描写叙述：

用户点击左边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. 浅析js的执行顺序

    javascript是一种描述型的脚本语言,是一种解析语言,由浏览器动态解析,不同种类的浏览器不同版本的浏览器对于js的解析有着微小的差别,不同浏览器的js解析引擎效率也有高低,下面来给大家分析一下j ...

  2. 简单理清一下proto与prototype

    这篇博客主要是为了理清自己的思路. 先上图,所有内容都从这张图来讲. 在js中,所有的东西都是对象,包括是function. prototype这个属性是函数特有的.有两层含义,第一层含义指的是某对象 ...

  3. 极限挑战—C#100万条数据导入SQL SERVER数据库仅用4秒 (附源码)

    原文:极限挑战-C#100万条数据导入SQL SERVER数据库仅用4秒 (附源码) 实际工作中有时候需要把大量数据导入数据库,然后用于各种程序计算,本实验将使用5中方法完成这个过程,并详细记录各种方 ...

  4. 菜鸟级springmvc＋spring＋mybatis整合开发用户登录功能（下）

    昨天介绍了mybatis与spring的整合,今天我们完成剩下的springmvc的整合工作. 要整合springmvc首先得在web.xml中配置springmvc的前端控制器DispatcherS ...

  5. 问题：Excel在“xxx.xlsx”中发现不可读取的内容。是否恢复此工作薄的内容？【原创】

    现象: 点"是(Y)" 提示信息中提到的error242440_02.xml文件: 问题重现: package poi; import java.io.FileNotFoundEx ...

  6. DRP分销系统总结

    上个月看完的分销系统的视频,用了漫长的时间看这个项目视频,能安慰自己的是不光是看视频了,还做了很多自己想做的事情,比如驾照拿下来了,比如参加了一些考试,比如讲了一些课程等等.把这个系统的总结总算是补上 ...

  7. SpringMVC之Controller传递JSON数据到页面

    在Controller中,组装好JSON格式的数据,然后输入到页面,或者通过ajax请求在页面进行解析,都可以做到. 1.Controller /** * JSON DATA TO PAGE VEIW ...

  8. hdu 1262 寻找素数对 数论 打表。

    寻找素数对 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  9. 【Demo 0011】多媒体播放器

    本章学习要点:       1.  掌握AVAudioPlayer 基本使用;       2.  掌握AVPlayer 基本使用;       3.  掌握系统声音播放以及震动;       4. ...

  10. memcached vs MySQL Memory engine table 速度比较_XMPP Jabber即时通讯开发实践_百度空间

    memcached vs MySQL Memory engine table 速度比较_XMPP Jabber即时通讯开发实践_百度空间 memcached vs MySQL Memory engin ...