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电影,点击相应的电影显示出该电影的详细介绍 ---------------------- ...
随机推荐
- P2820 局域网 洛谷
https://www.luogu.org/problem/show?pid=2820 题目背景 某个局域网内有n(n<=100)台计算机,由于搭建局域网时工作人员的疏忽,现在局域网内的连接形成 ...
- maven pom.xml文件介绍
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- java获取本机机器名
java获取本机机器名 InetAddress.getLocalHost().getHostName().toString();
- SQL 连接(JOIN)
SQL 连接(JOIN) SQL join 用于把来自两个或多个表的行结合起来. SQL JOIN SQL JOIN 子句用于把来自两个或多个表的行结合起来,基于这些表之间的共同字段. 最常见的 JO ...
- var和dynamic的应用 var、动态类型 dynamic 深入浅析C#中的var和dynamic ----demo
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- VTMagic的使用
// VTMagic的使用 // CFOrderViewController.m // qifuyuniOS //// /** * @author 李洪强, 16-08-30 10:08:50 ...
- 故障案例：磁盘空间不足可能引起的mysql问题
此前在工作中.由于客户的磁盘空间报警没怎么注意.空间不足引起了下面可能发生的mysql问题 1 mysql进程起不来 2 mysql无法正常关闭,必须kill -9 3 mysql能 ...
- 哨兵和docker容器
1,redis哨兵的配置 redis-6379配置文件内容如下 cat redis-6379.conf port 6379 daemonize yes logfile "6379.log&q ...
- CodeChef Consecutive Snakes 三分（整数）
题意 在年度阅兵中,所有的士兵蛇都在阅兵场集合了,但这些蛇的站位不对.整场阅兵必须能从主席台看清楚,所有蛇都应该站成一排.但这些士兵非常懒惰,你必须指挥士兵重新排队,使得所有人的移动距离之和最短. 形 ...
- 使用spring框架时，使用xml还是注解
1 xml的优缺点 1.1 优点 解耦合,方便维护.xml不入侵代码,方便代码阅读. 1.2 缺点 开发速度慢. 2 注解的优缺点 2.1 优点 能够加快开发速度,因为它将常用的主体逻辑隐藏在注解中了 ...