Search code examples
jqueryfirebugie-developer-tools

jQuery attribute auto added to elements

After using the IE8 built in Developers Tools for the first time, I noticed jQuery is attaching an attribute to some of my elements: alt text http://thebe.jtan.com/~vince/stack/jquery.PNG

I've never noticed this before. In fact, this doesn't show up in Firebug... I'm only seeing it for the first time now in IE8 Developer Tools. Does anyone know what jQuery uses this for, and why it's hidden in firebug?

Solution

  • The jQuery source is pretty easy to read, and you can look at what the data function is doing.

    To summarize:

    • jQuery has a variable called 'expando' which is 'jQuery'+(+new Date)
    • jQuery has another variable called uuid which starts with "1"
    • jQuery.cache is an empty object

    • Setting/Getting any "data" on a HTML Element/Object will use the expando property on the object to store a reference into jQuery.cache -- sort of like this:

      // get the elements cache id, or create a new cache id:
var id = elem[expando] || (elem[expando] = uuid++);
// get the cache for the element, or create it:
var data = jQuery.cache[id] || (jQuery.cache[id] = {});

    • Event Handlers are stored in the events and handle properties of this internal data object.

    So, internally all properties that are assigned using .data() use this "expando" attribute on the HTML to store a key into jQuery's internal data cache. jQuery event handlers are also stored in this same cache. The numeric value assigned to the expando is an incrementing counter that references its location in the jQuery cache object.