A partir de HTML5 fueron creados los atributos data.
Estos atributos nos sirven para guardar cualquier cosa y su utilización es la siguiente:
<div id="divDireccion"
data-direccion="Calle Lorenzo Higareda"
data-numero="18"
data-colonia="tetlan">
Un div lleno de datas</div>
Recuerda poner la palabra data seguida de un guión (data-*) y despues el nombre de tu atributo.
Con jquery, existen una manera fácil de obtener los valores, y para ello utilizaremos la función data() y dentro el nombre de nuestro atributo.
El siguiente ejemplo explica de una manera rápida y fácil como podemos obtener los valores:
//utilizando el div anterior obtenemos los valores con la función data y el selector sobre el div que los contiene
direccion=$("#divDireccion").data("direccion")
numero=$("#divDireccion").data("numero")
colonia=$("#divDireccion").data("colonia")
//mostramos los 3 valores
alert(direccion+" "+numero+" "+colonia)
El nombre que se pone dentro de la función data(), es sin el data- que lo precede
Para asignar un valor a los atributos data por medio de jquery, es de la siguiente manera:
//utilizando el mismo div puesto con anterioridad
$("#divDireccion").data("direccion","Calle Sta Ana")
//obtenemos el valor de data nuevamente
direccion=$("#divDireccion").data("direccion")
//mostramos en un alert, veremos el nuevo valor
alert(direccion)
