jQuery can cause a little confusion when you’re first working with it. Once you understand the difference (and similarity) between collection methods (known as ‘methods’ in jQuery docs) and static methods (known as ‘functions’ in the jQuery docs), all the dual use and duplicate function names suddenly become clear.
Let’s talk a little about the .data() method and how it can be accessed. As stated in the jQuery docs, you can assign data to any element via the collection method like below:
// collection .data() method jQuery('#myId').data('myInfo', { item : 'has a value' }); // and access that data like so: var getData = jQuery('#myId').data('myInfo');
Pretty useful. Now you can associate element specific data in the jQuery cache object for retrieval later. However, this isn’t the only way to get to this information, you can also access it (read & write) via the static method. That would look like the following:
var getStaticData = jQuery.data( jQuery('#myId').get(0), 'myInfo' ); // alternative var getStaticData = jQuery.data( document.getElementById( 'myId' ), 'myInfo' );
The difference here is that jQuery stores the key as the actual element, not the jQuery wrapper for that element. So the following would fail.
// will fail because provides the jQuery object wrapper for this element var getStaticData = jQuery.data( jQuery('#myId'), 'myInfo' );
Of course, you would never want to actually access the .data() method statically, because the collection method does a few things under the hood to make sure everything is working as expected. For example, when retrieving data a ‘getData’ event is triggered, as well as some basic error handling. Regardless, it illustrates an interesting difference and similarity between collection methods and static methods in jQuery.
You can take a closer look at the .data() method by downloading the jQuery 1.3.2 source and taking a look at lines 1367 for the collection method and 1274 for the static method.
