jQuery data() 返回 undefined，attr() 返回整数的原因及解决方法-JavaScript中文网-JavaScript教程资源分享门户

背景

在前端开发中，经常使用 jQuery 操作 DOM 元素。其中，data() 方法和 attr() 方法是两个常用的函数。然而，在使用这两个函数时，我们可能会遇到一些奇怪的问题：data() 方法返回 undefined，而 attr() 方法返回一个整数。这种情况下，应该如何处理呢？

首先来看一下 data() 方法返回 undefined 的原因。在使用 jQuery 的 data() 方法时，我们可以向元素添加数据，并可以通过键获取对应的值。举个例子：

$("#myDiv").data("name", "John");
console.log($("#myDiv").data("name")); // 输出 "John"

然而，有时候我们会在元素上设置了自定义属性（比如 data-name="John"），并试图通过 data() 方法获取这个属性的值。这个时候，我们可能会发现 data() 方法返回了 undefined，而不是预期的属性值。

这是因为，当我们使用 data() 方法获取元素的属性时，jQuery 会根据内部规则进行判断，以确定应该返回哪个值——是元素属性的值，还是通过 data() 方法设置的值。具体来说，如果元素上存在对应的属性，则优先返回属性的值；否则才返回通过 data() 方法设置的值。

例如，假设我们有一个 div 元素，其 HTML 代码如下：

<div id="myDiv" data-name="John"></div>

然后我们使用如下代码获取元素的值：

console.log($("#myDiv").data("name"));

结果会输出 undefined，这是因为 data() 方法并不会返回元素上的自定义属性。如果想要获取该属性的值，应该使用 attr() 方法。

另一方面，attr() 方法返回整数的情况也比较常见。具体来说，当我们使用 attr() 方法获取元素的某个属性时，如果该属性的值可以被解析为整数，那么 attr() 方法会直接返回这个整数值，而不是返回字符串。例如，假设我们有一个 input 元素，其 HTML 代码如下：

<input id="myInput" value="123" />

然后我们使用如下代码获取元素的值：

console.log($("#myInput").attr("value"));

结果会输出数字 123，而不是字符串 "123"。

针对以上两种情况，我们可以采用不同的解决方法。

如果我们想要通过 data() 方法获取元素的自定义属性值，可以通过以下两种方式解决：

直接使用 attr() 方法获取属性值：

console.log($("#myDiv").attr("data-name"));

在调用 data() 方法时，将属性名作为第二个参数传入：
```
console.log($("#myDiv").data("name", "John"));
```

注意：在使用第二种方法时，如果元素上存在对应的属性，则该属性的值不会被覆盖。如果想要强制使用 data() 方法设置的值，可以通过如下方式删除属性：

$("#myDiv").removeAttr("data-name");
console.log($("#myDiv").data("name")); // 输出 "John"

如果我们想要获取元素属性的字符串值，而非整数值，可以通过如下代码实现：

console.log(String($("#myInput").attr("value")));

这样做可以将整数值转换为字符串类型。

本文介绍了 jQuery 中 data() 方法返回 undefined 和 attr() 方法返回整数的原因，并提供了相

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/24390