JavaScript 的 jQuery 新方法 data() 我做了个实验,和我想的不一样,怎么回事呢?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript 的 jQuery 新方法 data() 我做了个实验,和我想的不一样,怎么回事呢?

2016-03-11 13:36:59 1832 1

这个data方法不属于javascript,属于jQuery封装的,使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性
这是别人回答的,我试了试,想给div 加个 name 属性,但是我 审查元素的时候,发现 div 并没有增加 name 属性..
怎么回事呢?
这个name 加到哪里去了?

要是让他加到html 中,具体怎么加?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <style>

  </style>
</head>

<body>

  <div id="aaa1"> </div>
  <div id="aaa2"> </div>
  <div id="aaa3" name="★这是原始名,看到本句说明data无效!"> </div>
  <div id="aaa4" data-name="★这是原始名,看到本句说明data无效!"> </div>

  <div id="aaa5"> </div>
  <div id="aaa6"> </div>


  <script>
    $("#aaa1").data("name","shiyan");
    $("#aaa2").data("我用data随便编的属性名","我随便编的值"); 
    $("#aaa3").data("name","这是新名,代码没有显示出来!"); 
    $("#aaa4").data("data-name","这是新名,代码没有显示出来!"); 


    
    $("#aaa5").attr("name","attr修改的,看到本句说明attr生效!");
    $("#aaa6").attr("我用attr随便编的属性名","attr修改的,看到本句,说明attr能自己造一个js中没有的属性.");


  </script>


</body>
</html>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 18:59:03

    题主可能误解了data的用法, 题主可以试着看看jquery的源码中data的封装:data

    很明显的表明$(element).data(); 是需要html标签中已经存在如这样的<div data-name="xxx"></div>,所以题主找不到比较正常。
    
    一般操作的时候,都会在html标签中添加data-name="value",然后再通过jquery去修改
    
    jquery的data方法并不会向attr属性一样,可以直接修改dom的属性。
    
    $("div").attr("data-name","haha")
    通过jquery源码可以得知,jquery把属性为data-*的html标签获取到,并取到data-*的value值,放在cache缓存里面,其实质改动的只是data数据而已。并不会修改dom属性。
    
    <div data-name="value"> div's value </div>
    
    $("div").data("name");   // 得到值 value
    
    $("div").data("name","haha");   //改变data值,此时只是在cache里面改变而已,其实质上并没有修改data-name中的value。
    
    // 此时仍然是 <div data-name="value"> div's value </div>, 但通过data获取的值就不是标签中的值了。
    
    $("div").data("name");    //此时得到的值 是haha
    
    //包括之后移除了data-name
    $("div").removeAttr("data-name")   // 结果为: [<div>​…​</div>​]
    
    //此时获取
    $("div").data("name")  //值依然存在  haha
    jQuery的data()方法只是作为数据的一种存取而已.并不修改Dom属性
    
    如果想改变data-name中的值,建议直接用
    
    $("div").attr("data-name","hahaha");
    
    // <div data-name="hahaha"> div's value </div>
    另外添加属性,不能通过data的方法,只能通过
    
    $("div").attr("data-name1","value1");
    //<div data-name1="value1" data-name="value"></div>
    0 0
相关问答

1

回答

同样多的请求,请问是在前台通过js循环发送多次请求好些,还是把数组传入后台,从后?400报错

2020-06-03 14:40:20 484浏览量 回答数 1

1

回答

js里面如何让数组的元素进行前后比较?

2020-05-27 09:59:18 841浏览量 回答数 1

1

回答

使用jQuery将JS对象转换为数组

2020-01-15 09:59:37 322浏览量 回答数 1

1

回答

js 数组拍平(数组扁平化)的六种方式

2019-11-28 13:57:00 390浏览量 回答数 1

1

回答

js字符串怎么转为数组

2018-05-10 19:58:58 1280浏览量 回答数 1

1

回答

js中怎么创建数组对象数组对象数组对象

2018-05-10 20:00:45 1417浏览量 回答数 1

1

回答

js数组怎么倒序

2018-05-10 20:00:39 2279浏览量 回答数 1

1

回答

js对象怎么生成数组

2018-05-10 20:00:34 1403浏览量 回答数 1

4

回答

怎么用js定义数组

2018-05-10 20:00:34 1693浏览量 回答数 4

1

回答

js怎么给数组添加元素

2018-05-10 20:00:32 1461浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript中的对象
立即下载
Javascript异步编程
立即下载