Método data() Core jQuery - III

Como se puede ver, primero se recibe el texto del campo de texto que había en el formulario. Para ello se muestran dos maneras de hacerlo: 

• A través de la jerarquía de objetos del navegador, con document.formul.valor.value 

• A través de su identificador, con un método de jQuery llamado attr() que sirve para recuperar el valor de un atributo HTML pasado por parámetro sobre el elemento que recibe el método. 

Este modo de obtener el atributo value del campo de texto está comentado, pues sólo lo quería señalar, para que se vea el modo de acceder a un elemento de formulario utilizando las funciones del framework Javascript jQuery. 

Luego, se guarda el dato "midato" con el valor que se recuperó del atributo value del campo de texto. Para ello utilizamos el método data() tal como comentábamos. 

Por último se muestra un mensaje en el HTML del elemento con id="division", por medio del método html() de jQuery, para informar sobre la acción que acabamos de realizar. Ahora mostramos el código para asignar un comportamiento al evento click sobre el segundo botón:

$("#leer").click(function(evento){

valor = $("#division").data("midato");

$("#division").html('En este elemento (id="division") leo un dato llamado "midato" con el valor

"' + valor + '"');

});

Como se puede ver, se recupera el valor del dato "midato" guardado sobre el elemento "#division" (etiqueta HTML con id="division"), y se almacena en una variable. Luego se crea un mensaje para mostrar el valor del dato. Para acabar, tenemos el código del evento click sobre el botón de eliminar el contenido de un dato, que hace uso de removeData().

$("#eliminar").click(function(evento){

$("#division").removeData("midato");

$("#division").html('Acabo de eliminar del elemento (id="division") el dato llamado "midato"');

});

Como se verá, el método removeData() se invoca sobre el elemento que tiene el dato que pretendemos eliminar. Más tarde se muestra un mensaje informando sobre la acción que se ha realizado. 

Para comprobar el funcionamiento de estos métodos habría que crear un dato, escribiendo el valor en el campo de texto y pulsando el botón "guardar dato". Luego podríamos leer ese dato con el botón "leer dato". Por último podríamos eliminar el dato con el botón "eliminar dato". Si, una vez eliminado pulsamos sobre el botón de "leer dato" veremos que el valor del dato aparece como "undefined", puesto que ese dato ha sido borrado (esto también ocurre si no se ha guardado ningún dato todavía, por ejemplo cuando se acaba de cargar la página).