jQurey之data

左手的ㄟ右手 2023-07-18 14:19 6阅读 0赞

### 文章目录 ###

*   *  data
     *   *  data的运用

## data ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>温故而知"心"</title>
      <link rel="stylesheet" href="./index.css">
    </head>
    
    <body>
      <div class="demo"></div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script> /* data jQuery dom : 存信息存数据的状态; 不会在标签中显示出来； 存什么取出来的就是什么； */ $('.demo').data("name", 22); console.log($('.demo').data("name")); console.log(typeof $('.demo').data("name")); $('.demo').data("fruits", { name: 'banana', color: 'yellow' }) console.log($('.demo').data("fruits")) console.log(typeof $('.demo').data("fruits")) </script>
    
    
    </html>

### data的运用 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>温故而知"心"</title>
      <style> .tp1 { display: none; } </style>
    </head>
    
    <body>
      <div class="wrapper">
        <div class="tp1">
          <p></p>
          <span></span>
          <button>add</button>
        </div>
    
        <p class="show">
          <span>sum </span>
          <span class="sum">0</span>
        </p>
      </div>
    </body>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script> /* jQ的data运用 */ var shopArr = [ { name: 'james solider', shopName: 'nike', price: 110, id: '1001' }, { name: 'Rose crazyLight', shopName: 'adidas', price: 90, id: '2002' }, { name: 'curry one', shopName: 'Under Armour', price: 120, id: '3003' } ] shopArr.forEach(function (ele, index) { var oCloneDom = $('.tp1').clone().removeClass('tp1'); oCloneDom.data({ id: ele.id, shopName: ele.shopName, price: ele.price }) .find('p') .text(ele.name) .next() .text(ele.price); oCloneDom.insertBefore($('.show')); }) $('.wrapper button').click(function () { $('.sum').text(+$('.sum').text() + $(this).parent().data('price')) console.log($(this).parent().data('id')) }) </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 jqurey(jquery是框架还是库)

搜狗问问-搜狗旗下最大互动问答社区 ![jqurey(jquery是框架还是库)\_jqurey(jquery是框架还是库)][jqurey_jquery_jqurey_

素颜马尾好姑娘i/ 2023年09月26日 15:06/ 0 赞/ 32 阅读

相关 SparkSQL之External Data

External Data产生背景在之前的案例中，每一个Spark Application都是以加载数据开始，经过一系列处理，然后把结果展示到控制台中。在生产环境

雨点打透心脏的1/2处/ 2023年07月19日 04:48/ 0 赞/ 24 阅读

相关 jQurey之data

文章目录 data data的运用 data <!DOCTYPE html> <html lang="en">

左手的ㄟ右手/ 2023年07月18日 14:19/ 0 赞/ 7 阅读

相关 ExtJs之Ext.data.Store

Store.getCount()返回的是store中的所有数据记录，然后使用for循环遍历整个store，从而得到每条记录。除了使用getCount()的方法外，还

曾经终败给现在/ 2022年09月15日 05:35/ 0 赞/ 176 阅读

相关 jqurey

[http://www.gbin1.com/technology/jquery/50jquerycodesnippetsforbetterjavascript/index.ht

刺骨的言语ヽ痛彻心扉/ 2022年08月05日 15:29/ 0 赞/ 135 阅读

相关 JQurey 通常会用到的方法

![20180104180352853][] ![20180104180422214][] ![

亦凉/ 2022年06月02日 05:16/ 0 赞/ 94 阅读

相关 springboot+thymeleaf引入bootstrap和jqurey

后台采用的是springboot框架，模板引擎用的是thymeleaf web资源目录如图所示： ![70][] 1.在static下面放置下载的bootstrap

本是古典何须时尚/ 2022年05月27日 01:49/ 0 赞/ 475 阅读

相关 JQurey如何获取下拉菜单中

JQurey如何获取下拉菜单中的id 获取select标签中的option的id可以使用如下代码 $("select option:checked

水深无声/ 2022年05月17日 02:48/ 0 赞/ 200 阅读

相关 JPA之Spring Data JPA

JPA是Java Persistence API的简称，也称为Java持久层API，已成为目前比较流行的一种ORM技术之一，是JDK 5.0注解或XML描述对象－关系表的映射关

- 日理万妓/ 2022年05月09日 03:42/ 0 赞/ 366 阅读

相关 jqurey中的效果隐藏、显示、

jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： <!

青旅半醒/ 2021年09月15日 07:38/ 0 赞/ 317 阅读