¿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

4 formas de vaciar un array en JavaScript

4 formas de vaciar un array en JavaScript

Resumen: en este tutorial, aprenderás cuatro formas de vaciar un array en JavaScript.

Ver artículo completo
Solución al problema de los acentos en JavaScript

Solución al problema de los acentos en JavaScript

En este tutorial aprenderás a solucionar el problema de los acentos en JavaScript, cuando intentamos enviar una alerta o un mensaje con JavaScript, este nos remplaza los acentos por otros caracteres, a continuación, te mostrare como solucionar este problema.

Ver artículo completo
Conoce los operadores unarios de JavaScript

Conoce los operadores unarios de JavaScript

Resumen: en este tutorial, aprenderás a usar operadores unarios de JavaScript que toman un solo operando y realizan una operación.

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