html - Why is jQuery automatically parsing my data-* attributes?

Question

I just noticed that if I try to read an html5 data-* attribute using .data it will parse automatically, whereas reading the value using .attr will not.

data-id="00123456"

• Live example here.

Why is this the default behavior? I have certain objects whose fields are of numeric values within a string, e.g. "00123456" and not 123456.

Did I miss a jQuery changelog memo or what?

Answer 1

Quote from the documentation:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

For example, given the following HTML:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

All of the following jQuery code will work.

$("div").data("role") === "page";

$("div").data("lastValue") === 43;

$("div").data("hidden") === true;

$("div").data("options").name === "John";

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string. To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

So it seems that since jQuery 1.6 the .data method parses the values.