JQ-data()方法没有更新DOM问题

快来打我* 2022-05-16 08:53 113阅读 0赞

#### 前言 ####

使用**data()**方法给元素添加**data-\***属性是很常见的操作，**但是data()方法操作的数据保存在jQuery内部，而并没有改变DOM的属性**。看下例子

#### Demo ####

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>jq-data()</title>
            <style> .container { width: 750px; border: 1px; margin: 0 auto; } </style>
        </head>
    
        <body>
            <div class="container" data-name="wzx"></div>
        </body>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/x-javascript"> $(document).ready(function() { //设置data-name $(".container").data("name", "wzx1"); console.log("name:" + $(".container").data("name")); //修改data-name $(".container").data("name", "wzx123"); console.log("name:" + $(".container").data("name")) }); </script>
    
    </html>

**console输出的值已经修改了**  
![这里写图片描述][70]  
**但是DOM对应的data-\*属性却没有修改**  
![这里写图片描述][70 1]  
**如果要修改DOM对应的属性，使用attr()方法**

[70]: /images/20220516/b0ce4410e18041bdb90033d638024692.png
[70 1]: /images/20220516/7e0b593c44494698b732ea9629b6a089.png

发表评论取消回复

表情：

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

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

相关阅读

相关大量插入dom元素的方法（性能问题）

试的时候做到一道题：向`<ul id="root"></ul>`插入1000条`<li>我是li标签</li>`标签一般我们会想到使用循环，但是，由于渲染回流...

╰+哭是因爲堅強的太久メ/ 2024年04月19日 12:56/ 0 赞/ 37 阅读

相关 KALI更新源问题解决方法

更新KALI源时出现以下问题 ![在这里插入图片描述][561dd54da38247a9ab20a2f23ba1e85d.png] 遇到该情况时，解决方法如下：输入

阳光穿透心脏的1/2处/ 2024年03月27日 16:31/ 0 赞/ 46 阅读

相关 HTML页面中DOM更新时机的奇怪问题

最近在开发中遇到一个奇怪的问题，这个问题的场景是比较简单的，在一个DOM节点中首先要显示的是一条“正在加载”的消息，然后从远程获取一些数据，并显示在此DOM中。在Firefox

心已赠人/ 2023年10月18日 10:32/ 0 赞/ 10 阅读

相关 jqdata(data是什么文件格式)

期货交易中bar和tick是什么意思 Bar 的概念在一定时间段内的时间序列就构成了一根 K 线(日本蜡烛图)，单根 K 线被称为 Bar。如果是一分钟内的 Ti

系统管理员/ 2023年09月26日 15:00/ 0 赞/ 12 阅读

相关 Dom属性方法

一、javascript的三大核心　　1.ECMAScript js的语法标准　　2.DOM Document object Model 文档对象模型，提供的方法可

女爷i/ 2023年06月11日 05:30/ 0 赞/ 92 阅读

相关 Dom对象方法

节点的分类：元素节点 html标签 img body input div 文本节点文字部分

青旅半醒/ 2023年01月05日 05:24/ 0 赞/ 94 阅读

相关 DOM方法

一、什么是 DOM？ DOM 定义了访问和操作 HTML 文档的标准方法 1、DOM 是 Document Object Model（文档对象模型）的缩写。 2、

╰半夏微凉°/ 2022年07月13日 03:57/ 0 赞/ 125 阅读

相关 DOM 节点方法

DOM节点方法 1.createElement() 创建元素节点 2.creatTextNode() 创建文本节点

- 日理万妓/ 2022年06月14日 05:36/ 0 赞/ 228 阅读

相关 DOM方法总结及DOM库扩展

<table> <tbody> <tr> <td><b>常用DOM方法</b></td> </tr> </tbody> </table> 常用D

分手后的思念是犯贱/ 2022年06月08日 14:08/ 0 赞/ 121 阅读

相关 JQ-data()方法没有更新DOM问题

前言使用data()方法给元素添加data-\属性是很常见的操作，但是data()方法操作的数据保存在jQuery内部，而并没有改变DOM的属性。看下例子 Demo

快来打我*/ 2022年05月16日 08:53/ 0 赞/ 114 阅读