¿Cómo leer los atributos data de HTML5 con jQuery?

Una de las novedades de HTML5 es que podemos utilizar el atributo data para asignar valores personalizados a cada elemento HTML en particular. Esto nos permite solucionar el uso de pseudo atributos no validados por el W3C que tantas veces encontramos en aplicaciones y plugins.

Los atributos data-* permiten definir datos personalizados ilimitados en nuestra página web y asociarlos a un elemento DOM utilizando cualquier nombre en minúsculas con el prefijo data-.

Ejemplo del uso de data en HTML:

<div id="miDiv" data-empresa="Estrada Web Group" data-rol="Desarrollo Web"></div>

Incluso podemos asignar datos con objetos Javascript para reutilizarlos más adelante:

<div id=" miDiv " data- empresa =" Estrada Web Group " data-opciones='{ "site" : "estradawebgroup.com", "categorias" : "javascript, jquery, asp.net, html5, css3" }'></div>

Obteniendo el valor de data.* con jQuery

Desde la versión 1.4.3 de jQuery, el atributo HTML data se integra directamente con la librería lo cual nos facilita poder leer los valores de los atributos data.

Ejemplo leer los valores de data, tomando en cuenta los ejemplos anteriores.

console.log( $('#miDiv).data('empresa')); //Resultado: Estrada Web Group
console.log( $('#miDiv).data(' opciones').site); //Resultado:  estradawebgroup.com