There are some hidden aspects of using jQuery and its data manipulation functions represent buried treasure. If you have struggled to work with data in JavaScript, and with the DOM in particular, jQuery has some functions you really need to know about. 

This is an extract from my book Just jQuery The Core UI.

 Available as a Book:

buy from Amazon

1. Understanding jQuery
2. Basic jQuery CSS Selectors
      Extract: The DOM
3. More Selectors
      Extract: Basic Selectors
4. The JQuery Object
5. Filters 
6. DOM Traversal Filters 
7. Modifying DOM Objects
      Extract: Modifying The DOM 
8. Creating Objects & Modifying The DOM Hierarchy
   
9. Working With Data
      Extract: Data ***NEW!!!
10. Forms 
11. Function Queues
12. Animation 
13. jQuery UI
14. jQuery UI Custom Control
15. Easy Plugins 
16. Testing With QUnit
17. Epilog A Bonus Function

Also Available:

buy from Amazon

We generally don't think too much about data in HTML and JavaScript. It is something that is the job of a database or perhaps JSON and Ajax. However, in modern HTML-based apps it is common to embed data within tags that is then transferred to the corresponding DOM elements. The idea is that this allows the UI to pass data to the code and this can be used to modify how the code deals with the UI. In modern frameworks this is used to implement extensions to UI elements and features such as data binding. 

First we need to look at the underlying HTML5 dataset API.

Dataset API

Until HTML5, the way that data was passed from HTML tags to the DOM elements was ad-hoc. You could add any attribute to an HTML tag and it would be converted to an attribute of the corresponding DOM object. For example, if you use the tag: 

<button mydata="myvalue">test1</button>

then an IDE such as NetBeans will flag an error because there is no mydata attribute in a button tag. However, if you load the page you will discover that everything works and the DOM object corresponding to the button has a mydata attribute with the value "myvalue". For example if you try:

alert($("button")[0].getAttribute("mydata"));

to get the button DOM element, the [0] converts the jQuery object to a DOM object, so if you use the DOM getAttribute method you will discover that it returns the value "myvalue".

This also works if you use nothing but jQuery: 

alert($("button").attr("mydata"));

which also displays "myvalue".

The reason for showing the two versions is to emphasize that this isn't anything that jQuery is doing. JavaScript supports "expando" properties, which roughly means that you can add properties to JavaScript objects simply by using them. In the same way, the JavaScript objects created to represent HTML tags also have expando properties and they will also add properties for any non-standard attributes that you include in the tag. 

This is a useful idea, but it lacks any organization. HTML5 introduced a system for naming and using custom attributes as data, the Dataset API. In this the name of the custom attribute always has to start data- so our previous example would have to be data-mydata.

Simple enough, but there is one more twist to the story. When the attributes are converted to JavaScript the “data” and the dashes are removed. So in JavaScript data-mydata becomes mydata. Each dash that is removed after the first results in the next letter being converted to upper case.

So data-mycompany-mydata becomes mycompanyMydata. Notice that you can add additional dashes to build up unique or more complex naming schemes.

The tag version of the name is often referred to as "dashed" and the property version is called "camel-cased" because of the way the upper case characters stick up in the middle of the word.

To make getting at the data easier, the API also adds a new dataset property to all DOM elements which is set to an object containing key value pairs.

For example, following:

<button data-mydata-x="myvalue" 
        data-mydata-y="10" 
        data-mydata-z=20">
test1
</button>

you can retrieve the data from the DOM element using:

alert($("button")[0].dataset.mydataX); 
alert($("button")[0].dataset.mydataY);
alert($("button")[0].dataset.mydataZ);

That is, dataset is an object with properties mydataX, mydataY and mydataZ.

You can access the dataset object directly from jQuery but notice that it is a property not an attribute, so you would need to use something like:

alert($("button").prop("dataset").mydataX); 
alert($("button").prop("dataset").mydataY);
alert($("button").prop("dataset").mydataZ); 

To summarize:

• You can still use custom attributes in tags and these are converted to custom attributes on DOM elements which can be accessed using jQuery's attr function, but this is not standard HTML5

• HTML5 introduced the Dataset API which adds the dataset property to all DOM elements and a format for the data-* custom attributes.

• You can add attributes of the form data-name-name-name and so on. 

• The dataset property is set to an object containing key/value pairs corresponding to data-* attributes and their values.

• The keys are obtained from the data-* attributes by dropping the data- prefix and then removing each remaining dash and changing the letter that follows it to upper case. So data-name-name-name becomes nameNameName. 

• You can access the dataset property using the jQuery prop function and then you can access the values using the keys directly as properties.