jq data属性操作的一个陷阱

最新推荐文章于 2025-10-27 10:21:04 发布
转载 最新推荐文章于 2025-10-27 10:21:04 发布 · 1.7k 阅读 · 0
文章标签：

#javascript #jquery

本文分享了在使用jQuery过程中遇到的问题：通过attr()修改data-xxx属性值但实际效果未如预期。作者发现使用data()方法进行设置与获取可以避免这一问题，确保属性值正确更新。

今天操作元素的data-xxx属性的时候前面修改值使用了attr(),取数据用了data(),页面上看貌似改掉了,但是data函数调用的时候却还是原来的值.

后来发现修改和取得数据都用data就正常了.

以下是参考文章:

http://blog.youkuaiyun.com/chennanfei/article/details/18055671

【前端隐蔽 Bug 深度剖析：SVG 组件复用中的 ID 冲突陷阱】
weixin_37342647的博客
06-20 946
SVG组件复用中的ID冲突陷阱 摘要：本文深入分析了一个前端开发中隐蔽的Bug案例——SVG组件复用导致的ID冲突问题。该问题表现为：当多个SVG组件实例同时存在时，先渲染的组件会影响后渲染组件的显示效果，特别是当先渲染组件被移除后，其他组件的SVG渐变和滤镜效果会失效。 关键发现： 问题根因是多个SVG实例使用相同ID的<defs>元素，违反了HTML ID唯一性原则 浏览器会忽略重复ID的定义，但SVG元素仍试图引用这些ID 当包含原始定义的组件被移除后，引用失效导致视觉效果异常 解决方案方
浅析jQuery 3.0中的Data
11-22
jQuery 3.0 在6月9日正式发布了，3.0 也被称为下一代的 jQuery。这个版本从14年10月开始，其中发布过一次beta 版（2016/1/14,）和候选版（2016/05/20）。一路走来，颇为不易。 一、Data浅析 jQuery 3.0 中的 Data 是内部使用的，定义为一个“类”。一共用它创建了两个对象，dataPriv 和 dataUser。Data 有 1 个对象属性(expando)和类属性(uid)，有 6 个方法，如下 下面分别解读 1、Data.uid 这是一个从 1 开始用来自增的数字。 2、expando 由 jQuery.expando 和 uid
jQuery.data() 的实现方式
03-23
NULL 博文链接：https://xxing22657-yahoo-com-cn.iteye.com/blog/1042440
jQuery笔记 （一）
qw2319205chu的博客
02-26 419
jquery data()函数 一、jquery data()的作用 data() 方法向被选元素附加数据，或者从被选元素获取数据。 通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。 该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用 removeData() 函数。 二、jquery data的使用方式 1、获取附加的da...
如何快速上手JQData SDK：量化金融数据获取的终极指南
最新发布
gitblog_00197的博客
10-27 785
JQData SDK是一款简单易用的量化金融数据包，专为量化研究者和开发者设计，提供全面的中国金融市场数据服务。通过轻量化API架构，用户可轻松获取股票、基金、期货等多品种的行情数据、基本面数据及特色因子，助力高效量化策略开发与回测。 ## ???? 为什么选择JQData SDK？三大核心优势解析 ### 1️⃣ 全生态验证的数据体系 JQData SDK的数据清洗标准贯穿聚宽自营资管与对外服务...
jQuery Data 属性
Proction的博客
12-12 1245
JS中的data自定义属性
jQuery-data方法
凡事预则立，不预则废
06-08 839
HTML:<ul> <li data-person='{"name":"zhangsan1"}'>zhangsan1</li></ul> <button onclick="changePerson()">click me to change</button>JS:var $el = $("li:first"); var p = $el.data("person"); console.
jQuery.data() 函数详解
chelen_jak的专栏
12-31 991
转自：http://www.365mini.com/page/jquery-data.htm data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。 通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。 该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用removeData()函数。
ESP32多版本库冲突排查实战（同一库多个版本共存陷阱）：4步精准定位并修复
例如，`WiFiClientSecure` 依赖于特定版本的 `BearSSL`，而第三方MQTT库若捆绑了另一版本，则可能引发符号重复、函数行为偏移等难以排查的问题。 这种冲突的本质在于：**构建系统未强制隔离多版本实例，且搜索路径...
若依用JQ使表单里面隐藏的select提交时不传参
03-29
移除name属性也是一个有效的方法，但需要在每次显示或隐藏时处理属性，确保同步。而动态销毁元素虽然彻底，但可能增加代码复杂度，尤其是在需要频繁切换显示状态的情况下。 还需要考虑若依框架的特性。若依是基于...
时区与区域设置竟影响插件搜索？你不知道的IDEA全局配置陷阱（附修复清单）
# 构建企业级开发环境的“黄金镜像”：从IDEA时区与区域陷阱说起 你有没有遇到过这样的场景？...等等……这两个时间其实是同一个时刻 但因为没有统一上下文，排查成本直接翻倍。 这类“幽灵bug”，往往不是
JSON数据分析陷阱识别与规避：数据质量问题大揭秘
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于Web应用程序和数据存储。JSON数据分析涉及对JSON数据进行处理、分析和提取见解的过程。 JSON数据分析的目标是将非结构化的JSON数据转换为...
jQuery.data方法
nbin2008的博客
03-07 929
jQuery缓存方法
jq---data()方法的妙用
wangle_style的博客
04-03 1877
有这样一种场景：将左侧表格中的内容在点击添加的时候，右侧列表会增加相应的一列数据，然而反过来还需要点击右侧列的删除时相应的对左侧表格中的对应行操作，此时可以用jq的data()方法，在第一步点击左侧表格添加的时候向该行附加数据，然后左侧点击删除的时候根据附加的数据选择对应行！其实质是把附加数据作为标记，代码如下：// 左侧点击添加到右侧列表    $('.nowkucun_table1').on(...
jQuery data()方法怎么使用？
zy1992As的博客
11-06 676
data()方法用来在指定的元素上存取数据。数据保存在内存中，并不会修改DOM元素结构；一旦页面刷新，之前存放的数据都将被移除。在上述代码中，第3行用来获取data-index属性，属性名中不需要“data-”前缀，并且返回的结果是数字型。上述代码运行后，uname会保存到内存中，不会出现在HTML结构中。在开发者工具中查看元素，如下图所示。使用data()方法还可以读取HTML5自定义属性data-index，示例代码如下。下面我们演示通过data()方法实现数据的操作，示例代码如下。
jQuery 的 data() 与 attr() 使用，data() 为何无效？
qq_32506555的博客
02-22 2260
本文和大家分享的主要是jquery的data() 与 attr() 使用，data()无效相关内容，一起来看看吧，希望对大家学习jquery 有所帮助。 　　jQuery 的 data() 方法 　　HTML 元素可以自定义属性，一般约定以“data-”开头（你不这么约定也行，但是那样就用不到 jQuery 的 data() 了）。 　　jQuery 的 data() 可以方便取
jQuery数据缓存方案详解：$.data()的使用
热门推荐
aty
12-16 3万+
我们经常使用隐藏控件或者是js全局变量来临时存储数据，全局变量容易导致命名污染，隐藏控件导致经常读写dom浪费性能。jQuery提供了自己的数据缓存方案，能够达到和隐藏控件、全局变量相同的效果，但是jQuery实现方式更优雅。为普通JS对象提供缓存时，jquery直接将数据保存在原始的JS对象上。为HTMLElement提供缓存时，却不会直接保存在HTMLElement上。而是保存在jQuery.cache这个全局对象上。这是因为本质区别在于：原始的DOM对象会被jQuery特殊对待，而jQuery包装后的
jq选择器 常用方法总结 data数据存储
苏先生前端
10-15 1359
dom选择器$符号起步参数形式如css即可 进一步选择元素相关方法： .get() 在你选取的标签之中获取指定的那个索引选取或者属性选取并且该元素是原生dom 数组形式，故无法实现链式调用 .eq() 在选取的基础上进行筛选雷同get方法 但是他会返回一个jq对象可实现链式调用 .find() 参数和$一致进行选区dom 在前面基础结构中查找一层层递进 该方法...
jQuery 3.0 的 Data 浅析
weixin_34128839的博客
06-14 173
jQuery 3.0 在6月9日正式发布了，3.0 也被称为下一代的 jQuery 。这个版本从14年10月开始，其中发布过一次beta 版（2016/1/14,）和候选版（2016/05/20）。一路走来，颇为不易。   文章目录 Data浅析 Data在jQuery内部的使用 1.x.x 和 2.x.x 的比较   一、Data浅析 jQuery 3.0 中的 Data...
jq获取div的data属性
09-16
使用jQuery获取div元素data属性有以下两种常见方法： 1. **使用`data()`方法**：`data()`方法允许在DOM元素上绑定任意类型的数据，还能避免循环引用的内存泄漏风险。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="getId" data-id="122" data-vice-id="11"></div> <script> var id = $("#getId").data("id"); // 获取data-id属性值 var viceId = $("#getId").data("vice-id"); // 获取data-vice-id属性值 console.log(id); console.log(viceId); // 赋值 $("#getId").data("id", "100"); var newId = $("#getId").data("id"); console.log(newId); </script> </body> </html> ``` 在上述代码中，首先通过`data()`方法获取`div`元素的`data-id`和`data-vice-id`属性值，之后又使用`data()`方法为`data-id`属性重新赋值并获取新值 [^1][^3]。 2. **使用`attr()`方法**：通过`attr()`方法可以获取指定的自定义属性值。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="id1" data-obj="优秀"></div> <script> var dataObjValue = $("#id1").attr("data-obj"); console.log(dataObjValue); </script> </body> </html> ``` 在这段代码中，使用`attr()`方法获取了`div`元素的`data-obj`属性值 [^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值