title: Difference between jQuery's attr() and getAttribute()
body: <p>The jQuery documention for the <a href="http://api.jquery.com/attr/"><code>attr</code></a> method states that:</p>
  
  <blockquote>
    <p>Attribute values are strings with the exception of a few attributes
    such as value and tabindex.</p>
  </blockquote>
  
  <p>And that does seem to be the case. Consider the following element:</p>
  
  <pre><code>&lt;input type="text" id="example" tabindex="3"&gt;
  </code></pre>
  
  <p>The following line does indeed show "number", not "string":</p>
  
  <pre><code>alert(typeof $("#example").attr("tabindex")); //Number
  </code></pre>
  
  <p>Now, the thing that's confusing me is that when using the DOM method <code>getAttribute</code>, you get a different result:</p>
  
  <pre><code>alert(typeof $("#example")[0].getAttribute("tabindex")); //String
  </code></pre>
  
  <p>Looking at the jQuery source for the <code>attr</code> method, it appears that jQuery simply returns what <code>getAttribute</code> returns, so why is there a difference? Here's the <a href="https://github.com/jquery/jquery/blob/master/src/attributes.js#L345">relevant lines of the jQuery source</a>:</p>
  
  <pre><code>ret = elem.getAttribute( name );
  // Non-existent attributes return null, we normalize to undefined
  return ret === null ?
           undefined :
           ret;
  </code></pre>
  
  <p>And here's a <a href="http://jsfiddle.net/interdream/FcusH/">fiddle</a> to demonstrate the issue. Just to confuse matters further, I've tried it in Chrome 15, Firefox 8, IE8 and IE7, and all behave as described above, except for IE7, which alerts "number" for both (which is what I would expect to happen).</p>