描写叙述：

用户点击左边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. EasyUI - SplitButton 分割按钮

    效果: html代码: <!--使用标签创建,直接使用即可,不必使用js代码--> <%--<a href="javascript:void(0)" id= ...

  2. QModelIndex有internalPointer()函数，可以存任何数据，另有QAbstractItemModel::createIndex来创造节点

    整个model的节点数据,都靠它来记录了. 另有一个创造节点的函数(自带函数): QModelIndex QAbstractItemModel::createIndex(int arow, int a ...

  3. 写程序取自己进程的AEP

    测试程序功能 打印出自己进程的程序入口点地址. 结合OD载入程序,看到的入口点确实是0x004014f0, 说明程序入口点找到了 测试程序 /// @file exam_1_1.c #include  ...

  4. boost::thread类

    前言 标准C++线程即将到来.预言它将衍生自Boost线程库,现在让我们探索一下Boost线程库. 几年前,用多线程执行程序还是一件非比寻常的事.然而今天互联网应用服务程序普遍使用多线程来提高与多客户 ...

  5. AssertValid函数学�

    转自http://tsitao.blog.163.com/blog/static/29795822006914105840496/ VC的调试中,AssertValid和Dump函数的应用 CObje ...

  6. TCP/IP笔记 二.网络层（1）

    1. IP 1.1 配套协议 IP 是 TCP/IP 体系中两个最主要的协议之一 . 与 IP 协议配套使用的还有四个协议:   (1)ARP (Address Resolution Protocol ...

  7. openfire学习4------->android客户端聊天开发之聊天功能开发

    前面我们已经把服务器搭建完成,并且在客户端实现了登录了. 和我们使用的QQ一样,想一想,登录成功之后呢?肯定是要有一个好友列表,通过这个列表,我们可以选择我们需要聊天的好友. 这里我们先研究下 xmp ...

  8. Linux系统基础命令

    这是看itercast的学习笔记 Linux系统基础命令 日期时间 命令date用以查看.设置当前系统时间:格式化显示时间: +%Y--%m--%d 命令hwclock(clock)用以显示硬件时钟时 ...

  9. 积累的VC编程小技巧之对话框

    1.用鼠标移动基于对话框的无标题栏程序的简单方法 void CVCTestDlg::OnLButtonDown(UINT nFlags, CPoint point) {    //一句话解决问题    ...

  10. 判断指定进程是否为x64的方法（在ntdll判断某个x64函数是否存在）

    BOOL IsWow64ProcessEx(HANDLE hProcess) { // 如果系统是x86的,那么进程就不可能有x64 bool isX86 = false; #ifndef _WIN6 ...