¿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

 

Artículos relacionados
Javascript ¿Para qué sirve getElementsByName?
Javascript ¿Para qué sirve getElementsByName?

El m&eacute;todo getElementsByName es uno de l

How to validate that the password that your users capture is strength with jQuery?
How to validate that the password that your users capture is strength with jQuery?

In this post, I show to you how to validate an

¿Para qué sirve el método attr() de jQuery?
¿Para qué sirve el método attr() de jQuery?

El m&eacute;todo jQuery attr() sirve para acce

0 Comentarios
Enviame un comentario