描述：

用户点击左边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. Roofline Model与深度学习模型的性能分析

    原文链接: https://zhuanlan.zhihu.com/p/34204282 最近在不同的计算平台上验证几种经典深度学习模型的训练和预测性能时,经常遇到模型的实际测试性能表现和自己计算出的复 ...

  2. c++ 读取所有图片

    copyright by Jun Yang, SUN YAT-SEN UNIVERSITY //FileList.h ///////////////////////////////////////// ...

  3. Oozie_02安装遇到错误【20161116】

    [错误原因]hadoop的core-site.xml配置错误  把用户名hadoop配置成了主机名hadoop01 <!-- OOZIE --><property> <n ...

  4. Codeforces 1009C： Annoying Present

    C. Annoying Present time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  5. 7-26 Harry Potter's Exam（25 分）

    In Professor McGonagall's class of Transfiguration, Harry Potter is learning how to transform one ob ...

  6. Cannot find name 'AsyncIterator' error in Typescript compilation process 问题解决

    解决方法: tsconfig.json: 添加lib 编译选项 { "compilerOptions": { "lib":[ "esnext.asyn ...

  7. Android中关于JNI 的学习（一）对于JNIEnv的一些认识

    一个简单的样例让我们初步地了解JNI的作用.可是关于JNI中的一些概念还是需要了解清楚,才干够更好的去利用它来实现我们想要做的事情. 那么C++和Java之间的是怎样通过JNI来进行互相调用的呢? 我 ...

  8. 定时器Timer&ScheduledThreadPoolExecutor

    定时器Timer&ScheduledThreadPoolExecutor /** * @ClassName: TimerTest * @author: daniel.zhao * @date: ...

  9. emacs之自动完成括号

    网上抄来的问题不少,看emacswiki,用autopairs即可 emacsConfig/autopair-setting.el (require 'autopair) (autopair-glob ...

  10. Bootstrap-CL：标签

    ylbtech-Bootstrap-CL:标签 1.返回顶部 1. Bootstrap 标签 本章将讲解 Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .la ...