En jQuery, el enstringmiento nos permite realizar múltiples operaciones en un elemento en una sola declaración.
La mayor parte de la función jQuery devuelve un objeto jQuery y, debido a esto, cuando el primer método completa su ejecución, devuelve un obj, ahora se llamará al segundo método en este objeto.
Ejemplo 1: Con la ayuda del enstringmiento, desarrollamos nuestro código de manera concisa. El enstringmiento también hace que nuestro script sea más rápido porque ahora el navegador no tiene que encontrar el mismo elemento para realizar operaciones en él. Cada método del objeto ‘gfg’ devuelve un objeto.
Primero, se llama al método geek() , y luego se llama al método write() , luego se llama al método destroy() .
HTML
<!DOCTYPE html>
<head>
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<script>
let gfg = {
geek: function(){
alert('called geek method');
return gfg;
},
write: function(){
alert('called write method');
return gfg;
},
destroy: function(){
alert('called destroy method');
return gfg;
}
}
gfg.geek().write().destroy();
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra el enstringmiento de los métodos fadeOut() y fadeIn() . Cada vez que haga clic en el botón, el texto primero se desvanecerá y luego se desvanecerá.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<p id="first">GeeksForGeeks</p>
<button>click me</button>
<script>
$(document).ready(function(){
$('button').click(function(){
$('#first').fadeOut(100).fadeIn(100);
})
})
</script>
</body>
</html>
Producción:
