jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript. Al elaborar los términos, jQuery simplifica el recorrido y la manipulación de documentos HTML, el manejo de eventos del navegador, las animaciones DOM, las interacciones Ajax y el desarrollo de JavaScript entre navegadores.
En este artículo, vemos cómo almacenar datos relacionados con un elemento HTML usando jQuery , además de comprender su implementación a través de los ejemplos.
Esta tarea se puede realizar con la ayuda del método data() en jQuery. El data() es un método incorporado que almacena los datos arbitrarios relacionados con los elementos coincidentes o se devolverá el valor de los datos nombrados, que contiene el primer elemento en el conjunto de elementos coincidentes.
Sintaxis:
$(selector).data(element);
Enfoque: aquí, jQuery almacena los datos en un elemento div HTML . Hay dos botones disponibles, uno de los cuales adjunta datos al elemento div con la identificación «divID». Otro botón recupera datos mostrándolos en otro div HTML, a saber, con id «resultID».
Ejemplo 1: El siguiente ejemplo ilustra jQuery almacenando el nombre de los datos y luego recuperándolos para el elemento seleccionado.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#btnID1").click(function() {
$("#divID").data("data1", "value1");
$("#divID").show().html("Data is attached to div<br>");
});
$("#btnID2").click(function() {
var resultData = $("#divID").data("data1");
$("#resultID").show().html(
"<b>You retrieved value is:</b> "
+ resultData);
});
});
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
jQuery storing of Data related to an element
</h3><br/>
<div id="divID"> </div>
<button id="btnID1">
Attach data to div element
</button>
<button id="btnID2">
Retrieve the attached data
</button><br/>
<div id="resultID"></div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el almacenamiento jQuery de datos en un elemento div de HTML utilizando una declaración de cambio de JavaScript . Los diferentes botones están disponibles para obtener o establecer los valores del elemento HTML div usando el método data().
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div,
button,
p {
margin: 5px;
}
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
jQuery storing of Data related to an element
</h3>
<div id="resultID"></div>
<button>
Get "mydata" from the HTML div
</button>
<button>
Set "mydata" to "helloWorld" value
</button>
<br>
<button>
Set "mydata" to number 75
</button>
<p>
<b>The "mydata" value is:</b>
<span></span>
</p>
<script>
$("button").click(function() {
var value;
switch($("button").index(this)) {
case 0:
value = $("#resultID").data("mydata");
break;
case 1:
$("#resultID").data("mydata", "helloWorld");
value = "Stored";
break;
case 2:
$("div").data("blah", 75);
value = "Num stored";
break;
}
$("span").text("" + value);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA