jQuery的data函数使用遇到的坑

最新推荐文章于 2023-02-14 11:14:17 发布

原创最新推荐文章于 2023-02-14 11:14:17 发布 · 797 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #data函数 .data

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在HTML5中使用data-自定义属性存储数据，并通过jQuery获取这些数据。需要注意的是，虽然HTML标签不区分大小写，但JavaScript区分大小写，因此获取data-属性时应使用小写字母。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML5的标签中可以使用data-自定义属性的形式存储数据，然后使用jQuery的data函数就可以获取该数据。

然而需要注意的是，HTML标签或属性是不区分大小写的，也就是说data-id跟data-ID是一样的。

但是JavaScript是区分大小写的，当你在标签中使用data-ID时，使用$.data("ID")就获取不到数据，因为实际上data-ID在HTML中会变成data-id(可以通过浏览器的开发者工具查看)

所以，在使用data-ID存储数据时，也要用data-id来获取数据

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liupq66

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jQuery .data（）不起作用，但.attr（）可以

顶顶顶顶顶顶顶顶顶顶顶顶

08-17

737

标签上之前就有data-xxx，必须使用$('#xxxId').attr("data-mentId")获取。使用data()设置，必须使用data()方法获取。

JQuery坑，说说哪些大家都踩过的坑

luyaran的博客

04-25

472

1 乱用选择器坑人指数：200 JQuery选择器调用代价很大，反复调用效率更低。应采用缓存对象的方法或采用链式调用的方式。 //错误的写法 $("#button").click(function(){ $('#list li').addClass('strong'); $('#list li').css('color', 'red'); }); //正确的写法 $("#b

参与评论您还未登录，请先登录后发表或查看评论

jQuery那坑爹的text()

weixin_34082854的博客

09-13

163

有一段代码： var jTd = $("td:first"); jTd.text(jTd.find(":input").val()).addClass("readonly"); 结果居然报告：对象不支持“addClass”属性或方法难道 text(param) 返回的不是jQuery对象？！仔细想了下，想明白了，一般情况下是返回的jQuery对象，但有一种情况除外…… 假设：...

jquery坑

qq_21383977的博客

05-09

642

https://www.polarxiong.com/archives/jQuery-Ajax%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E5%86%85%E5%AE%B9on-%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%E6%97%A0%E6%95%88%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3...

jQuery踩坑

ym_diver的博客

08-20

506

最近工作中很多地方都使用到了Jquery，把一些踩过的坑写下来 1、jQuery全局变量的声明全局变量的好处在于减少变量的个数，并可以在不同的函数中直接使用，在某些传值的时候很好用，但他的坏处在于占用内存较多，增加耦合性全局变量有如下几种声明方式：一、var + 变量名的方式在function外部声明，如果在函数内部用此方法声明的即为局部变量

jquery的data函数

03-18

`jQuery`的`data()`函数有一个内部缓存机制，当在元素上设置数据时，`jQuery`会尝试查找现有的`data-*`属性，如果找到则使用，否则才创建新的数据对象。这有助于减少内存占用，尤其是在处理大量元素时。 ### 五、`...

逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)

11-23

首先给大家介绍jquery data()函数 jQuery中data()函数用于向被选元素附加数据，或者从被选元素获取数据。通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。一、jquery data()的...

jquery自定义函数的多种方法

12-02

在jQuery中，自定义函数是开发过程中非常常见且实用的功能，可以提高代码的复用性和模块化程度。这里我们探讨几种不同的方法来实现jQuery自定义函数。首先，我们可以直接在jQuery对象上定义方法。比如： ```...

老生常谈JQuery data方法的使用

10-21

本文将对jQuery中data方法的使用进行详细的探讨，包括$.data()和$(selector).data()两种形式，并比较了低版本与高版本之间的差异。 $.data(obj, key, value) 方法主要作用于普通的JavaScript对象。这个方法可以接受...

关于jQ data自定义属性的坑

KentKun的博客

05-08

532

关于jQ data自定义属性的坑当data里面的属性值发生改变时 $('#test').data('name', 'hhh'); //$('#test').data('name') == 'hhh； //$('#test').attr('data-name') != 'hhh'; //等于原来的值 //无法使用 $('#test[data-name="hhh"]')获取到对象 ...

使用jQuery时应该避开的坑

10-25

187

最近在编写一个网页版Todo应用的过程中遇到一些jQuery的特性，不知道的话容易掉进坑里。引用jQuery的script标签必须放在html文件的后部，让浏览器在将页面所有元素渲染完之后才运行jQuery脚本，否则选择器选不到写在html页面中的元素；和上面一样的道理，用js新创建元素后，如果元素有事件绑定，不要忘记创建完再加一段绑定事件的代码；一个元素可以绑定多个事件...

jquery first()自己踩过的坑。

CodingNoob

09-28

645

今天又一次仔细看了jq的文档，突然发现first有个坑，是自己理解错误，不知道有没有同学也遇到过，所以记录一下。<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>jquery first()踩过的坑。</title> <meta name="author" content="" /> <s

jQuery 中 data() 引发的错误

FE-阿阳的博客

02-01

1075

jQuery 中 data() 引发的错误详情描述 jQuery 中 data()解释为可以获取、设置元素自定义的属性，但是尽量不用data()方法去获取元素的自定义属性；因为会引发一些隐形错误； 1. 只能获取到第一次赋值的属性，之后通过修改的值获取不到； 2. 如果值是string类型的数字，比如“123”，获取的时候会强转为number，123； 3. 所以建议还是使用 $(“d

jQuery入坑笔记

梧桐下的四叶草

07-04

499

以前比较散乱的学习jQuery，所以现在想要系统的学一下。这里面我是跟着学的，因为以前看过这一系列的书都感觉不错，所以现在也是对Head First系列的书充满好感。 (1)slideToggle 在这里我要实现一个点击文字就会出现图片向下滑动出现的效果，所以采用slideToggle来实现，这个的话其实就是封装了两个函数slideUp和slideDown。这两个函数会根据你使用的选择器而判断

jQuery 的 data 方法不识别大小写

new Girl的博客

03-29

750

<button class="optionBtn" type="button" value="2" data-workState="1"></button> console.log($(this).data("workState"));//undefined console.log($(this).data("work-state"));//undefined...

jQuery中使用data()方法读取HTML5自定义属性data-*实例

fjnjxr的博客|PHP每周一贴

03-12

1047

如果你使用jQuery类库，那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险主要的方法如下： .data( key, value ) .data( obj ) .data( key ) .data() 从jQuery 1.4.3起， H

jQuery中data方法遇到的bug

qq_62452129的博客

02-14

277

解决办法:不使用data方法来获取使用jQuery的attr来获取他的属性就好了。

踩坑：使用jquery的data()方法获取不到自定义属性的值

weixin_44771007的博客

02-15

1520

<a href="" class="regBtn" data-btn="1">点击</a> <a href="" class="regBtn" data-btn="2">点击</a> <a href="" class="regBtn" data-btn="3">点击</a> <a href="...

jquery data 小写的坑

ISaiSai的专栏

12-20

1531

jquery data 后面都要转化为小写，才能渠道怎么会有这么大的坑？？？？？

深入探究jQuery data函数的使用和原理

### jQuery的data函数 #### 1. jQuery的data函数概述 jQuery库中，`data()`是一个非常实用的方法，它允许我们在选择的元素上存储任意的数据，而无需额外的DOM操作。这一功能的实现主要依赖于jQuery的缓存机制，通过...