El data() es un método incorporado en jQuery que se usa para adjuntar datos u obtener datos para los elementos seleccionados.
Sintaxis:
$(selector).data(para1);
Parámetro: Acepta un parámetro opcional “para1” que especifica el nombre de los datos a recuperar para el elemento seleccionado.
Valor devuelto: Devuelve los datos recuperados para el elemento seleccionado.
Código jQuery para mostrar el funcionamiento del método data():
Código #1:
En el siguiente código, los datos se adjuntan al elemento seleccionado.
html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<style>
div {
display: block;
width: 500px;
font-size: 37px;
padding: 50px;
background-color: lightgrey;
}
span {
color: green;
}
</style>
</head>
<body>
<div>
Welcome to
<span></span>for<span></span>!
</div>
<script>
<!-- jQuery code to perform data method -->
$("div").data("test", {
first: "Geeks",
last: "Geeks !"
});
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
</script>
</body>
</html>
Producción:
Código n.º 2:
en el siguiente código, los datos se adjuntan y recuperan del elemento «div» mediante botones.
html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
<!--Here data is attaching to the div element -->
$("#b1").click(function() {
$("div").data("g", "GeeksforGeeks !!!");
});
<!-- Here data is retrieving from the div element -->
$("#b2").click(function() {
alert($("div").data("g"));
});
});
</script>
<style>
#b1,
#b2 {
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<!-- This button will attach data to the div element -->
<button id="b1">This will attach data to div
element</button>
<br>
<!-- This button retrieve the attached data
from the div element -->
<button id="b2">This will retrieve the attached data
to div element</button>
<div></div>
</body>
</html>
Salida:
Justo después de hacer clic en el botón Ejecutar-
Después de hacer clic en el botón «Esto recuperará los datos adjuntos al elemento div» justo después de hacer clic en el botón «Esto adjuntará datos al elemento div»-
Después de hacer clic en el botón «Esto recuperará los datos adjuntos al elemento div» sin hacer clic en el botón «Esto adjuntará datos al elemento div»-
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA