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

Estrada Web Group
Administrador
¿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

 

Compartir artículo:

Más artículos geniales

Qué es jQuery CDN y cómo cargar jQuery desde un CDN o desde servidor

Qué es jQuery CDN y cómo cargar jQuery desde un CDN o desde servidor

Cuando inicias un proyecto web te puede surgir la duda a la hora de incluir la biblioteca jQuery (o alguna otra conocida), ¿es mejor hacerlo desde un CDN o desde nuestro propio servidor?

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;