成品图如下所示：

搭建HTML+CSS结构

    <style>

/* 给tpl设置为不可见，因为我们不需要用到他，我们只是要克隆他身上的东西，克隆完就把他删掉。就跟渣男一样！！！*/

    .tpl{

        display: none;

    }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class='tpl'>

            <p></p>

            <span></span>

            <span></span>

            <button>add</button>

        </div>

        <p class="show">

            <span>sum</span>

            <span class="sum">0</span>

        </p>

    </div>

    <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>

    引入jQuery文件

开始写JS代码

        //模拟后端穿过来的数据

         var shopArr = [

             {

                 name : 'james',

                 shopName : 'nike',

                 price : 110,

                 id : '1001'

             },{

                 name : 'kobe',

                 shopName : 'adidas',

                 price : 130,

                 id : '1002'

             },{

                 name : 'curry',

                 shopName : 'Under Armour',

                 price : 100,

                 id : '1003'

             },{

                 name : 'davis',

                 shopName : 'lining',

                 price : 90,

                 id : '1004'

             }

         ];

         shopArr.forEach(function (ele, index){ //循环数据

             var ocloneDom =  $('.tpl').clone().removeClass('tpl'); //获取类名为tpl的元素，克隆里面所有元素，然后删除自己的类名

             ocloneDom.data({     //传入数据

                 shopName : ele.shopName,

                 price : ele.price,

                 id : ele.id

             }).find('p')   //获取克隆后元素里面的P标签

                 .text(ele.name) //付上文本 = name(名称)

                     .next() //获取下一个标签

                         .text(ele.price); //附上文本 = price(价格)

             ocloneDom.insertBefore('.show');  //把获取的元素还有样式放在类名为show的标签上方

         })

         $('.wrapper button').click(function(){  //点击button

             $('.sum').text( +$('.sum').text() + $(this).parent().data('price') );

             //不方便用文字表达，请看图（点击图）

         })

点击图     ↓

谢谢观看，如有大佬路过请指出观点！！！    谢谢观看，如有大佬路过请指出观点！！！  谢谢观看，如有大佬路过请指出观点！！！

jQuery笔记之data方法的更多相关文章

  1. HTML5中的data-*属性和jQuery中的.data()方法使用

    原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...

  2. jQuery中使用data()方法读取HTML5自定义属性data-*实例

    如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...

  3. jQuery中的data方法:

    向元素附加数据,然后取回该数据: $("#btn1").click(function(){ $("div").data("greeting" ...

  4. jQuery笔记之工具方法—Ajax 优化回调地狱

    在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性 ...

  5. jQuery笔记之工具方法—高级方法Ajax

    $.ajxa() ——基本使用 前提:先了解js的执行机制 $.Callbacks()——回调 $.Deferred()——异步 $.when() 网络服务器链接由<渡一教育>提供 --- ...

  6. jQuery笔记之工具方法extend插件扩展

    jQuery工具方法 $.extend()插件扩展(工具方法) $.fn.extend()插件扩展(实例方法) 浅度克隆.深度克隆 两个方法基本是一样的,唯一不同的就是调用方式不一样 -------- ...

  7. jQuery笔记之工具方法

    jQuery 工具方法 $.type()判断数据类型 $.isArray() $.isFunction() $.isWindow()... $.trim()消除空格 $.proxy()改变this指向 ...

  8. jQuery 第四章 实例方法 DOM操作之data方法

    jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data()  干嘛用的, 看淘宝上 有自定义的属性, 为data -  什么什么,   这是为了dom 跟数据有 ...

  9. jQuery笔记之 Ajax回调地狱

    本次演示回调地狱: 模拟电影网站,判断用户是否为该网址的vip用户(最高权限为vip) 如果vpi就展示出vip电影,点击相应的电影显示出该电影的详细介绍 ---------------------- ...

随机推荐

  1. java获得文件的最后修改时间

    原文:http://www.open-open.com/code/view/1453190044980 java的File类的lastModified()方法可以返回文件的最后修改时间: String ...

  2. CEF3研究(一)

    一.基本概览 C++ WrapperC++Wrapper(包装类)就是将C结构包装C++类. 这是C/C++API转换层通过translator tool自动产生的. 进程     CEF3用多进程运 ...

  3. Linux集群的总结和思考

    前言:在涉及到对外项目,经手许多小中型网站的架构,F5.LVS及Nginx都比较多,我想一种比较通俗易懂的语气跟大家说明下何谓负载均衡,何谓Linux集群,帮助大家走出这个误区,真正意义上来理解它们. ...

  4. 磁盘显示为GPT（保护分区）

    问题描述:PE进入系统,在计算机管理里面磁盘显示为GPT(保护分区).此时硬盘是不能重新分区或者格式化的. 解决思路:低版本的WIndows(PE)是不支持GPT分区的,我们需要使用系统自带的Disk ...

  5. 百万级PHP网站Poppen.de的架构分享心得

    在了解过世界最大的PHP站点,Facebook的后台技术后, 今天我们来了解一个百万级PHP站点的网站架构:Poppen.de.Poppen.de是德国的一个社交网站,相对Facebook.Flick ...

  6. java 配置时遇到的问题及解决办法

    1. 最近JDK更新很频繁,以至于我安装时版本太多,选择也会出现问题 首先,确定你选择的是32位版本还是64位版本(貌似64位系统下也可以安装32位的JDK), 这个相当重要,因为这个会影响到ecli ...

  7. 数据库建表参考(SQL Server)

      (1).字段设置为Not Null+Default Value.原因:减少三值判断,可为Null的字段要多判断null:另外,定长字段为null也占空间,变长字段为空字符串也是不占空间,所以设置成 ...

  8. [Sciter] 资源引用

    http://www.cnblogs.com/yinxufeng/p/fb343eecda564aa63bce0bdf15709ddf.html 方式一. 加载外部文件方式二. 加载内存方式三. 加载 ...

  9. CodeForces 300C Beautiful Numbers（乘法逆元/费马小定理+组合数公式+高速幂）

    C. Beautiful Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  10. vs2010中设置qt环境的智能识别方案

    Qt搭建请参考:Win7系统VS2010下搭建qt开发环境 搭建好之后,虽然可以编译过去,但是写代码时,编辑器无法识别,也没有智能提示,并且代码中都是红色的提示如下: 此时需要设置一下include路 ...