jQuery的attr()和getAttribute()之间的区别

Question

jQuery的attr()和getAttribute()之间的区别

11

除了一些特定的属性值，如value和tabindex之外，属性值都是字符串。

这确实是事实。考虑以下元素：

<input type="text" id="example" tabindex="3">

以下代码确实显示的是"number"而不是"string":

alert(typeof $("#example").attr("tabindex")); //Number

现在让我困惑的是，当使用DOM方法getAttribute时，你会得到一个不同的结果：

alert(typeof $("#example")[0].getAttribute("tabindex")); //String

看了一下jQuery的attr方法源码，似乎它只是返回了getAttribute的返回值，那么为什么会有差别呢？这里是jQuery源码中相关部分的代码行：

ret = elem.getAttribute( name );
// Non-existent attributes return null, we normalize to undefined
return ret === null ?
         undefined :
         ret;

以下是一个演示这个问题。进一步混淆问题的是，我已经在Chrome 15、Firefox 8、IE8和IE7中尝试过它，所有操作都如上所述，除了IE7，它对两者都弹出“number”（这正是我期望发生的）。

- James Allardice

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt · Accepted Answer

因为jQuery定义了一个用于tabIndex的propHook, 它明确地使用parseInt函数来解析返回类型；

return attributeNode && attributeNode.specified ?
  parseInt( attributeNode.value, 10 ) :
  rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
    0 :
    undefined;

这个钩子然后添加到attrHook，这就是为什么在attr函数中观察到该行为的原因(以及为什么首先未定义tabIndex的attrHook)。