jQuery笔记之data方法
成品图如下所示：
搭建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方法的更多相关文章
- HTML5中的data-*属性和jQuery中的.data()方法使用
原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性 我们往往会根据需要在HTML标记上添加自定义 ...
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...
- jQuery中的data方法:
向元素附加数据,然后取回该数据: $("#btn1").click(function(){ $("div").data("greeting" ...
- jQuery笔记之工具方法—Ajax 优化回调地狱
在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性 ...
- jQuery笔记之工具方法—高级方法Ajax
$.ajxa() ——基本使用 前提:先了解js的执行机制 $.Callbacks()——回调 $.Deferred()——异步 $.when() 网络服务器链接由<渡一教育>提供 --- ...
- jQuery笔记之工具方法extend插件扩展
jQuery工具方法 $.extend()插件扩展(工具方法) $.fn.extend()插件扩展(实例方法) 浅度克隆.深度克隆 两个方法基本是一样的,唯一不同的就是调用方式不一样 -------- ...
- jQuery笔记之工具方法
jQuery 工具方法 $.type()判断数据类型 $.isArray() $.isFunction() $.isWindow()... $.trim()消除空格 $.proxy()改变this指向 ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- jQuery笔记之 Ajax回调地狱
本次演示回调地狱: 模拟电影网站,判断用户是否为该网址的vip用户(最高权限为vip) 如果vpi就展示出vip电影,点击相应的电影显示出该电影的详细介绍 ---------------------- ...
随机推荐
- 2017多校Round7(hdu6120~hdu6132)
补题进度:9/13 1001 待填坑 1002(数学推导) 题意 有一个按顺序的n个点的k叉树,问每个点子树个数的异或和是多少(n,k<=1e18) 分析 可以先求出最大的d,满足d以上都是满K ...
- 临远大神，你为啥要建立一个 TASK表。HumanTaskDTO
临远大神,你为啥要建立一个 TASK表.HumanTaskDTO HumanTask这张表的作用是什么. 为了实现理想中的任务中心.TaskCenter. 首先,工作流可能会完全不包含任何人工节点,全 ...
- 如何在 Linux 环境下配置 Nagios Remote Plugin Executor (NRPE)
为 NRPE 配置自定义命令 远程服务器上安装 下面列出了一些可以用于 NRPE 的自定义命令.这些命令在远程服务器的 /etc/nagios/nrpe.cfg 文件中定义. ## 当 1.5.15 ...
- 对dispatch_async到主线程的逻辑封装成C/C++接口类型
背景:代码里面有时候会把将要运行的内容放到主线程里面运行,但假设已经是主线程里面的代码调用dispatch_async的时候偶尔会出现crash,所以就须要推断是否已经在主线程里面了. 通常的做法类似 ...
- 笔记本 ThinkPad E40 安装 Mac OS X 10.9.3 Mavericks 系统
关于:自己最早接触Mac OS X系统是在一个论坛里.记得好像是2011年:那时论坛里就有人在虚拟机上执行Mac OS X 10.7系统.当时也依照论坛里的方法在虚拟机上成功装上了系统.那时開始就被苹 ...
- MVC优缺点
1.通过把项目分成model view和controller,使得复杂项目更加容易维护. 2.没有使用view state和服务器表单控件,可以更方便的控制应用程序的行为 3.应用程序通过contro ...
- 设计模式-（11）组合模式 （swift版）
一,概念 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结 ...
- myqsl02
常用的表的引擎 Myisam ,批量插入速度快, 不支持事务,锁表 Innodb, 批量插入相对较慢,支持事务,锁行. 全文索引:目前5.5版本,myisam,innodb都已经支持 关于事务的引擎: ...
- Lightoj 1029 - Civil and Evil Engineer
1029 - Civil and Evil Engineer PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limi ...
- HDU2121 Ice_cream’s world II —— 最小树形图 + 不定根 + 超级点
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2121 Ice_cream’s world II Time Limit: 3000/1000 MS (J ...