Ahora veremos algunos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los métodos data() y removeData() de jQuery.
Admite cualquier tipo de dato: Podemos guardar lo que deseemos por medio del método data(). Los ejemplos anteriores hemos guardado simplemente cadenas de texto, pero soportaría cualquier tipo de variable, numérica, un array o incluso un objeto Javascript o jQuery.
Se guarda un dato por cada elemento del objeto jQuery selecionado: En caso que en el objeto jQuery sobre el que estemos almacenando cosas con data() haya referencias a varios elementos de la página, el dato se almacena en todos los elementos. (recordemos que, según lo explicado anteriormente en desarrolloweb.com, un objeto jQuery puede tener seleccionados varios elementos de la página, como todos los enlaces presentes, los elementos de una determinada clase CSS, etc. dependiendo del selector escogido al hacer uso de la función dólar)
Los objetos se almacenan por referencia: En el caso que estemos almacenando un objeto Javascript con data() sobre uno o varios elementos, no se copia el objeto, sino que se asigna por referencia. Esto quiere decir que no se harían copias independientes del objeto a guardar, sino que permanecería tal cual y lo que se asignaría como dato es una referencia a ese único objeto.
Ahora, para investigar un poco sobre estas posibilidades, hemos creado un par de ejemplos un poco más complejos que hacen uso de los métodos data() y removeData(). Son ejemplos más avanzados, que hacen uso de algunas cosas que no hemos explicado todavía en este manual de jQuery. No obstante, vendrá bien verlos para aprender algunos usos de estas funcionalidades.
Para empezar, quiero mostrar una página de ejemplo donde existen tres enlaces y dos botones. Al pulsar cualquiera de los enlaces mostraremos el contenido de un dato almacenado en ellos con data(). Los botones, por su parte, servirán para almacenar contenidos en datos sobre esos enlaces. Además tendremos una capa con id="mensaje" que nos servirá para mostrar cosas por pantalla.
Podemos ver el ejemplo en marcha en una página aparte.
El código de los elementos HTML será el siguiente:
<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
<br>
<button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button>
Ahora veamos cómo aplicar eventos a los elementos de la página, para almacenar datos y mostrarlos.
Comencemos por el código de los eventos de los botones.
$("#guardar").click(function(evento){
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor "mivalor"');
});
Con este código estamos almacenando datos en todos los enlaces. Cabe fijarse que con la función jQuery $("a") obtenemos un objeto jQuery donde están todos los enlaces de la página. Luego, al invocar data() sobre ese objeto, estamos almacenado ese dato en todos los enlaces existentes.
$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro valor"');
});
En este otro código del evento click para el segundo botón, almacenamos "otro valor" sobre el dato de antes, pero sólo lo hacemos sobre el enlace 1, dado que hemos utilizado el selector $("#enlace1"), con el identificador único del primer enlace.
Y ahora podríamos ver el código para asignar un evento a todos los enlaces, para que al pulsarlos nos muestre lo que haya en el dato almacenado con data(), si es que hay algo.
$("a").click(function(evento){
evento.preventDefault();
valorAlmacenado = $(this).data("midato");
$("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como " + valorAlmacenado);
});
Como se puede ver, estamos creando un evento click, pero lo estamos haciendo sobre los tres enlaces que hay en la página a la vez, dado el selector utilizado en la función jQuery $("a"). Luego el código del evento será el mismo para los tres enlaces.
Lo primero que se hace es un evento.preventDefault() que permite que el enlace no tenga el comportamiento típico (ir a la URL del href). A continuación hacemos:
valorAlmacenado = $(this).data("midato");
Como se puede ver, se está extrayendo el valor almacenado en el enlace actual, que recibe el evento. Con $(this) obtenemos el objeto jQuery del elemento que ha recibido el evento, que es el enlace sobre el que se ha pulsado y no todos los enlaces. Con el método data("midato"), invocado sobre $(this), obtenemos el valor del dato "midato" almacenado en el enlace que fue pulsado solamente.
Luego se muestra un mensaje para indicar el valor que había en el dato. Pero claro, este código, como es común para todos los enlaces, tiene que acceder también a $(this) para saber qué enlace en concreto fue el que se pulsó. Para identificar el enlace se hace $(this).attr("id"), que devuelve el atributo "id" del enlace sobre el que se hizo clic.
A continuación se puede ver el código completo de esta página.
<html>
<head>
<title>Ejemplos de uso de la función data del core de jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").click(function(evento){
evento.preventDefault();
valorAlmacenado = $(this).data("midato");
$("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como " + valorAlmacenado);
});
$("#guardar").click(function(evento){
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor "mivalor"');
});
$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro valor"');
});
});
</script>
</head>
<body>
<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
<br>
<button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button>
</body>
</html>
Si se desea, se puede ver el ejemplo en marcha en una página aparte. ht
Datos de tipo objeto asignados por referencia con data()
Sobre el punto que comentábamos antes, sobre los objetos Javascript que se asignan por medio de data(), que siempre se hace por referencia, hemos creado otro ejemplo, del que simplemente vamos a colocar un enlace para verlo en funcionamiento y su código. http://www.desarrolloweb.com/articulos/ejemplos/jquery/core/data3.htmlEl ejemplo es bastante similar al anterior, con la salvedad que se ha creado un par de acciones adicionales para almacenar en los elementos variables de tipo objeto.
Luego, al operar sobre esos datos de tipo objeto, comprobamos que en realidad sólo existe un objeto compartido por todos los elementos a los que fue asignado. Es decir, no se hicieron copias del objeto, sino que se asignaron en los datos simplemente su referencia.
Puede verse este ejemplo en marcha en una página aparte.
El código completo se puede ver a continuación.
<html>
<head>
<title>Ejemplos de uso de la función data del core de jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a.enlacealmacenar").click(function(evento){
evento.preventDefault();
var valorAlmacenado = $(this).data("midato");
var mensaje = "En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como " + valorAlmacenado;
var valorAlmacenado2 = $(this).data("miobjeto");
mensaje += "<br>Además, he leído un dato llamado 'miobjeto' con valor " + valorAlmacenado2;
$("#mensaje").html(mensaje);
});
$("#guardar").click(function(evento){
evento.preventDefault();
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor "mivalor"');
});
$("#guardarenlace1").click(function(evento){
evento.preventDefault();
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro valor"');
});
$("#guardarobjeto").click(function(evento){
evento.preventDefault();
$("a").data("miobjeto",$("#capapruebas"));
$("#mensaje").html('He guardado todos los enlaces un dato llamado "miobjeto" con el valor un objeto que es el objeto jquery de seleccionar la capa con id "capapruebas"');
});
$("#operarobjetoenlace1").click(function(evento){
evento.preventDefault();
$("#enlace1").data("miobjeto").html("cambio el html del objeto que hay en el dato 'miobjeto' del 'enlace1'");
});
$("#operarobjetoenlace2").click(function(evento){
evento.preventDefault();
$("#mensaje").html("Este es el HTML que hay en el objeto asociado a enlace2 en el dato 'miobjeto':<br>" + $("#enlace2").data("miobjeto").html());
});
});
</script>
</head>
<body>
<a href="#" id="enlace1" class="enlacealmacenar">Enlace 1</a>
<br>
<a href="#" id="enlace2" class="enlacealmacenar">Enlace 2</a>
<br>
<a href="#" id="enlace3" class="enlacealmacenar">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<ol style="line-height: 200%;">
<li>
<a id="guardar" href="#">guardar "midato" con valor "mivalor" en todos los enlaces</a>
</li>
<li>
<a id="guardarenlace1" href="#">guardar "midato" con valor "otro valor" en el enlace 1</a>
</li>
<li>
<a id="guardarobjeto" href="#">guardar "miobjeto" con una referencia a la capa de pruebas</a>
</li>
<li style="line-height: 100%;">
<a id="operarobjetoenlace1" href="#">Recuperar un objeto del enlace1 para hacer cosas con él
<SPAN style="font-size: 8pt; font-weight: bold">
PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE ESTA LISTA MARCADO COMO 3)
</SPAN>
</a></li>
<li style="line-height: 100%;">
<a id="operarobjetoenlace2" href="#">Recuperar un objeto del enlace2 para hacer cosas con él
<SPAN style="font-size: 8pt; font-weight: bold">
PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE ESTA LISTA MARCADO COMO 3)
</SPAN>
</a></li>
</ol>
<br>
<br>
<div id="capapruebas">
Este es el texto de una capa de pruebas... con id="capapruebas"
</div>
</body>
</html>
Hemos visto diversos ejemplos de uso de data() y removeData(), métodos básicos de jQuery. Puede que ahora no se les encuentre mucha utilidad, pero nos servirán para resolver problemas futuros y entender cómo funcionan diversos plugins o componentes más avanzados de jQuery.
Por lo que respecta al Core de jQuery, ya hemos visto diversas funcionalidades en desarrolloweb.com en artículos de este manual. Por ahora lo vamos a dejar por aquí, aunque hay diversos métodos del Core que no hemos llegado a ver. En los próximos artículos pasaremos página y comenzaremos a ver otros temas interesantes que nos permitirán explotar un poco más nuestra creatividad, poniendo en marcha utilidades más cercanas a lo que pueden ser nuestras necesidades del día a día.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...