.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másContenido.
Contenido.
El método .data() de jQuery se utiliza para asociar datos personalizados a los elementos seleccionados. Es útil para almacenar información adicional en los elementos del DOM que no se refleja en el HTML directamente. También se puede usar para recuperar estos datos.
Definición:
El método .data() puede ser utilizado para:
- Asignar datos a un elemento: Establece un valor para un nombre de clave en el elemento.
- Obtener datos de un elemento: Recupera el valor asociado a una clave específica.
Sintaxis:
- Asignar datos:
index.js
JavaScript
$(selector).data(key, value)selector: Un selector de jQuery que selecciona el elemento al que se desea asociar datos.key: Unstringque representa el nombre de la clave para los datos que se desea almacenar.value: El valor que se desea asociar a la clave.
- Obtener datos:
index.js
JavaScript
$(selector).data(key)key: Unstringque representa el nombre de la clave para la cual se desea recuperar el valor asociado.
- Asignar múltiples datos:
index.js
JavaScript
$(selector).data({key1: value1, key2: value2, ...}){key1: value1, key2: value2, ...}: Un objeto que contiene pares de clave-valor para almacenar múltiples datos a la vez.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .data() en jQuery</title>
<style>
.elemento {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#botonEstablecer").click(function(){
$("#miElemento").data("info", "Valor de ejemplo");
$("#miElemento").data("otroDato", 12345);
alert("Datos establecidos");
});
$("#botonObtener").click(function(){
var info = $("#miElemento").data("info");
var otroDato = $("#miElemento").data("otroDato");
alert("info: " + info + "\notroDato: " + otroDato);
});
$("#botonEliminar").click(function(){
$("#miElemento").removeData("info");
alert("Dato 'info' eliminado");
});
});
</script>
</head>
<body>
<button id="botonEstablecer">Establecer Datos</button>
<button id="botonObtener">Obtener Datos</button>
<button id="botonEliminar">Eliminar Dato 'info'</button>
<div id="miElemento" class="elemento">Elemento para almacenar datos</div>
</body>
</html>
index.js
JavaScript
$("#botonEstablecer").click(function(){
$("#miElemento").data("info", "Valor de ejemplo");
$("#miElemento").data("otroDato", 12345);
alert("Datos establecidos");
});
$("#botonObtener").click(function(){
var info = $("#miElemento").data("info");
var otroDato = $("#miElemento").data("otroDato");
alert("info: " + info + "\notroDato: " + otroDato);
});
$("#botonEliminar").click(function(){
$("#miElemento").removeData("info");
alert("Dato 'info' eliminado");
});Explicación del Ejemplo:
En este ejemplo, hay tres botones que realizan diferentes acciones con el método .data():
- Establecer datos: Al hacer clic en el botón “Establecer Datos”, se asignan dos valores al
divcon el id “miElemento”. Uno de los valores se asigna a la clave “info” y el otro a la clave “otroDato”. - Obtener datos: Al hacer clic en el botón “Obtener Datos”, se recuperan y muestran los valores asociados a las claves “info” y “otroDato”.
- Eliminar un dato: Al hacer clic en el botón “Eliminar Dato ‘info'”, se elimina el dato asociado a la clave “info”.
Notas adicionales:
.removeData(): Puedes usar este método para eliminar datos asociados a una clave específica en lugar de utilizar .data() para obtener o establecer datos.Resultado.
Elemento para almacenar datos
jQuery.com
Contenido Relacionado.
.removeData()
.removeData() de jQuery elimina datos almacenados en un elemento con .data(). Es útil para limpiar información asociada que ya no se necesita, liberando memoria.
Leer más
