jQuery es un framework muy poderoso de JavaScript. Con jQuery, podemos usar do chaining, lo que significa enstringr varios métodos en una sola declaración en un solo elemento.
Hemos estado usando una sola declaración a la vez, pero ahora, usando el método de enstringmiento, podemos vincular varios métodos para acortar el código. De esta manera, los navegadores no tienen que encontrar los mismos elementos más de una vez.
Ventaja:
al usar el enstringmiento de métodos en jQuery, asegura que no hay necesidad de usar el mismo selector más de una vez. El uso excesivo de un selector puede ralentizar seriamente su código, ya que cada vez que llama a un selector, obliga al navegador a buscarlo. Al combinar o «enstringr» varios métodos, puede reducir considerablemente la cantidad de veces que hace que su navegador busque los mismos elementos sin tener que establecer ninguna variable.
Implementación de enstringmiento() usando JavaScript y jQuery para una mejor comprensión:
Código n. ° 1: uso de las funciones del método Deslizar hacia arriba y deslizar hacia abajo para enstringr-
<!DOCTYPE html>
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<p id="para">Chaining method in jQuery</p>
<button>Click me</button>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
//assigning the color blue
$("#para").css("color", "blue")
//using slide up method
.slideUp(2000)
//using slide down method
.slideDown(2000).
slideUp(2000).
slideDown(4000);
});
});
</script>
</body>
</html>
Producción:
Código n. ° 2: usar la función de animación en jQuery para enstringr el efecto-
<!DOCTYPE html>
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<p id="para">Chaining method in jQuery</p>
<button>Click me</button>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#para").css("color", "blue").animate({
width: "100%"
})
//it adds animation to the program by styling it
.animate({
fontSize: "46px"
})
.animate({
borderWidth: 30
});
});
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por revantjain y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA