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

快来打我* 2022-05-16 08:53 171阅读 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 条评论，171人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 laravel页面没有及时更新，修改view之后页面没有更新，视图页面缓存

在写项目玩的时候发现个问题，修改了view页面内容，但是页面却没有及时反馈。 env文件设置是没有问题的： APP_ENV=local APP_DEBUG

水深无声/ 2023年07月01日 13:54/ 0 赞/ 38 阅读

相关 Dom属性方法

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

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

相关 Vue中dom不更新的问题

要注意！！！在Vue中，用index或者length修改数组的时候Vue是检测不到的！也就是非响应式例如: data:{ retrun:{

深藏阁楼爱情的钟/ 2023年02月18日 03:05/ 0 赞/ 27 阅读

相关 Dom对象方法

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

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

相关 DOM方法

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

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

相关 DOM 节点方法

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

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

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

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

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