jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要， 所以成一个模块写：
首先， 得知道 data() 干嘛用的，
看淘宝上 有自定义的属性， 为data - 什么什么， 这是为了dom 跟数据有联系，存信息， 存数据。以便以操作， 但是淘宝 把data 等放在行间样式上， 是为了 vue 等 其他框架的使用，在jquery中， jquery为我们提供了一个方法， 就是.data() 以便于我们存信息， 存数据。是用jquery 时，不推荐把 data等信息，写在行间样式了，性能不高，还频繁的操作dom 很损性能。
下面，了解data方法的使用。
.data()
当然，data 可以放 一系列 东西， 例如 最简单的 值，还能放 对象 等等。
下面来看一个小的应用
有点像购物车一样， 点击add 添加， 会把 该物品的 价钱， 加到sum 去。
代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <style>
10 .tpl{
11 display:none;
12 }
13 </style>
14 </head>
15 <body>
16
17 <!-- 基本外框如下 -->
18 <div class="wrapper">
19 <!-- 下面 ↓ 这里相当于一个 模板，有多少个商品，就有多少个结构，只需要一个，等下clone 它就可以了 -->
20 <div class="tpl">
21 <p></p>
22 <span></span>
23 <button>add</button>
24 </div>
25
26 <p class="show">
27 <span>sum</span>
28 <span class="sum">0</span>
29 </p>
30
31
32 </div>
33
34 <script src="./jquery/jquery.js"></script>
35 <script>
36 var shopArr = [ //模拟 后端传给前端的数据。
37 {
38 name: 'james solider',
39 shopName: 'nike',
40 price: '110$',
41 id: '1001'
42 },
43 {
44 name: 'Rose crazyLight',
45 shopName: 'adidas',
46 price: '90$',
47 id: '2002'
48 },
49 {
50 name: 'curry one',
51 shopName: 'Under Armour',
52 price: '120$',
53 id: '3003'
54 }
55 ];
56
57 shopArr.forEach(function(ele, index){ //拿到数据后，用forEach 循环 遍历它
58 var otpl = $('.tpl').clone().removeClass('tpl'); //克隆 它， 然后把 原有的类名删除，
59 otpl.data({ //使用 data方法， 把参数 都放到 dom 身上
60 name: ele.name,
61 shopName: ele.shopName,
62 price: ele.price,
63 id: ele.id
64 })
65 .find('p') //往下找到 p 添加 商品的name
66 .text(ele.shopName)
67 .next() //找到同级的 span 添加 该dom 的价钱
68 .text(ele.price);
69 otpl.insertBefore($('.show')) //最后，添加好参数的 结构，插到 show 的 上面去 显示页面
70
71 })
72
73 $('button').click(function(){ // 给按钮绑定点击事件， 每点击一次， 加 该 dom 的 价钱
74 $('.sum').text( +$('.sum').text() + parseInt($(this).parent().data('price') ))
75 // ↑ 这里用了一个 隐式类型转换 把字符串转成 数字
76 // 获取 sum 添加文本， 文本就是 绑定在 dom 身上的 data参数
77 })
78 </script>
79
80 </body>
81 </html>
jQuery 第四章 实例方法 DOM操作之data方法的更多相关文章
- jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
- jQuery 第二章 实例方法 DOM操作选择元素相关方法
进一步选择元素相关方法: .get() .eq() .find() .filter() .not() .is() .has() .add()集中操作 .end()回退操作 .get() $(&qu ...
- jQuery 第二章 实例方法 DOM操作取赋值相关方法
取赋值相关方法: .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...
- js 第四章 cookie的操作
js 第四章 cookie的操作 一.学习要点 掌握cookie的简单应用 二. js 第四章 cookie的操作 了解cookie 什么是cookie? cookie 是存储于访问者的计算机中的变量 ...
- 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
- jQuery第四章
jQuery中的事件和动画 一.jQuery中的事件 1.加载DOM (1)执行时机 $(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别 ...
- jquery 第四章
1.回顾 节点.append(内容) 节点.prepend(内容) 节点.remove() 节点.attr("属性","值") 节点.css("样式& ...
- JQuery选择器，事件，DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...
- javascript dom编程艺术笔记第三章：DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
随机推荐
- 基于SSH框架的人力资源管理系统设计与实现
- - ->关注博主公众号[C you again],获取更多IT资源(IT技术文章,毕业设计.课程设计系统源码,经典游戏源码,HTML网页模板,PPT.简历模板,!!还可以投稿赚钱!!,点击查 ...
- 联赛模拟测试22 B. 分组配对 倍增+二分
题目描述 分析 首先,容易发现一个小组内的最优配对方式(能得到最大综合实力的方式) 一定是实力值最大的男生和最大的女生配对,次大的和次大的配对,以此类推. 但是每次新插入一个值时,需要用 \(nlog ...
- vivo 基于原生 RabbitMQ 的高可用架构实践
一.背景说明 vivo 在 2016 年引入 RabbitMQ,基于开源 RabbitMQ 进行扩展,向业务提供消息中间件服务. 2016~2018年,所有业务均使用一个集群,随着业务规模的增长,集群 ...
- 【应用服务 App Service】App Service中上传文件/图片(> 2M)后就出现500错误(Maximum request length exceeded).
问题描述 在使用App Service (Windows)做文件/图片上传时候,时常遇见上传大文件时候出现错误,这是因为IIS对文件的大小由默认限制.当遇见(Maximum request lengt ...
- vue项目中mockjs的使用
mock.js是一个库,源码托管:https://github.com/nuysoft/Mock github上的原话:Mock.js是一个模拟数据生成器,可帮助前端开发和原型与后端进度分开,并减少某 ...
- Java9系列第九篇-对HTTP2协议的支持与非阻塞HTTP-API
在HTTP/1.1 发布了16 年之后,IETF在2015年终于通过了HTTP/2 协议.HTTP/2协议旨在降低延迟,满足当今时代对于信息响应时间的要求.在这篇文章中,我会简要的对HTTP/2协议进 ...
- 晚间测试13 A. Dove 打扑克 vector +模拟
题目描述 分析 这道题比较关键的一点就是要看出最终牌数的种类数不会超过 \(\sqrt{n}\) 种 知道了这个性质我们就可以用 \(vector\) 维护一个有序的序列 \(vector\) 中存放 ...
- 【转】Setting up SDL Extension Libraries on Code::Blocks 12.11
FROM: http://lazyfoo.net/tutorials/SDL/06_extension_libraries_and_loading_other_image_formats/window ...
- 基于MVC的RESTFul风格API实战
基于MVC的RESTful风格的实现 1.RESTful风格阐述 REST服务是一种ROA(Resource-Oriented Architecture,面向资源的架构)应用.主要特点是方法信息存在于 ...
- 搭建面向NET Framework的CI/CD持续集成环境（一）
前言 网上大多数都是针对主流的Spring Cloud.NET Core的CI/CD方案.但是目前国内绝大部分的公司因为一些历史原因无法简单的把项目从NET Framework切换升级到NET Cor ...