背景
在前端开发中，经常使用 jQuery 操作 DOM 元素。其中，data() 方法和 attr() 方法是两个常用的函数。然而，在使用这两个函数时，我们可能会遇到一些奇怪的问题：data() 方法返回 undefined，而 attr() 方法返回一个整数。这种情况下，应该如何处理呢？
原因
data() 方法返回 undefined
首先来看一下 data() 方法返回 undefined 的原因。在使用 jQuery 的 data() 方法时，我们可以向元素添加数据，并可以通过键获取对应的值。举个例子：
------------------------ -------- -------------------------------------- -- -- ------
然而，有时候我们会在元素上设置了自定义属性（比如 data-name="John"），并试图通过 data() 方法获取这个属性的值。这个时候，我们可能会发现 data() 方法返回了 undefined，而不是预期的属性值。
这是因为，当我们使用 data() 方法获取元素的属性时，jQuery 会根据内部规则进行判断，以确定应该返回哪个值——是元素属性的值，还是通过 data() 方法设置的值。具体来说，如果元素上存在对应的属性，则优先返回属性的值；否则才返回通过 data() 方法设置的值。
例如，假设我们有一个 div 元素，其 HTML 代码如下：
---- ---------- -----------------------
然后我们使用如下代码获取元素的值：
--------------------------------------
结果会输出 undefined，这是因为 data() 方法并不会返回元素上的自定义属性。如果想要获取该属性的值，应该使用 attr() 方法。
attr() 方法返回整数
另一方面，attr() 方法返回整数的情况也比较常见。具体来说，当我们使用 attr() 方法获取元素的某个属性时，如果该属性的值可以被解析为整数，那么 attr() 方法会直接返回这个整数值，而不是返回字符串。例如，假设我们有一个 input 元素，其 HTML 代码如下：
------ ------------ ----------- --
然后我们使用如下代码获取元素的值：
-----------------------------------------
结果会输出数字 123，而不是字符串 "123"。
解决方法
针对以上两种情况，我们可以采用不同的解决方法。
解决 data() 方法返回 undefined 的问题
如果我们想要通过 data() 方法获取元素的自定义属性值，可以通过以下两种方式解决：
直接使用
attr()方法获取属性值：-------------------------------------------
在调用
data()方法时，将属性名作为第二个参数传入：------------------------------------ ---------
注意：在使用第二种方法时，如果元素上存在对应的属性，则该属性的值不会被覆盖。如果想要强制使用 data() 方法设置的值，可以通过如下方式删除属性：
------------------------------------ -------------------------------------- -- -- ------
解决 attr() 方法返回整数的问题
如果我们想要获取元素属性的字符串值，而非整数值，可以通过如下代码实现：
-------------------------------------------------
这样做可以将整数值转换为字符串类型。
总结
本文介绍了 jQuery 中 data() 方法返回 undefined 和 attr() 方法返回整数的原因，并提供了相
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24390