Anteriormente, los sitios web solían ser estáticos. Sin embargo, la introducción de Vanilla JavaScript revolucionó la apariencia y el funcionamiento de los sitios web. Vanilla JS ayudó a los desarrolladores a crear sitios web dinámicos. Luego vino jQuery, una biblioteca de herramientas creada por desarrolladores de todo el mundo, utilizando Javascript.
En palabras simples, jQuery es una biblioteca de JavaScript liviana y fácil de usar que ayuda a crear funcionalidades complejas con pocas líneas de codificación. jQuery ayuda en la manipulación de CSS, realiza requests AJAX, maneja datos JSON recibidos del servidor y también ayuda a agregar efectos de animación como ocultar, mostrar, etc. a los componentes. La mejor parte es que jQuery es flexible para el navegador. Esto significa que jQuery es compatible con todos los navegadores del mercado, por lo que el desarrollador no necesita preocuparse por el navegador que el usuario pueda estar usando.
jQuery simplifica muchas cosas. Es más fácil implementar algunas cosas usando jQuery que Vanilla JS. Echa un vistazo a este ejemplo. Aquí, tenemos que mostrar un mensaje emergente en la pantalla, una vez que el usuario hace clic en el 'click here for popup!"botón.
Código jQuery:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="styles.css">
<script src="app.js"></script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<input id="button1" type="button"
value="click here for popup!" />
<script>
$('#button1').click(function() {
alert("GeeksforGeeks");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Código JavaScript:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src = "app.js"></script>
</head>
<body>
<input id="button1" type="button"
value="click here for popup!"/>
<script>
document.getElementById("button1")
.addEventListener('click', function(){
alert("GeeksforGeeks");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Se puede ver fácilmente que la codificación jQuery es más corta y mucho más simplificada que el código JS vainilla. Veamos otro ejemplo para una mejor comprensión.
Supongamos que el programador desea seleccionar todos los elementos con nombre de clase = 'hello'.
JavaScript
document.getElementsByClassName("hello");
jQuery
$('.hello')
No hay un libro de reglas escrito que diga dónde usar jQuery y dónde usar JavaScript. Se dice que jQuery es mejor para la manipulación de DOM que Javascript, sin embargo, después de monitorear el rendimiento de ambos, se descubrió que Vanilla JS es más rápido que jQuery. Sin embargo, escribir funcionalidades complejas usando Javascript puede resultar difícil para los programadores novatos.
jQuery contra Javascript
| JavaScript | jQuery |
| Un lenguaje de programación dinámico débilmente tipado. | Una biblioteca de JavaScript rica, ligera y fácil de usar. |
| Un lenguaje de secuencias de comandos utilizado para crear interfaces fáciles de usar de sitios web dinámicos. | Marco JS utilizado para manejar requests AJAX, manipular CSS y crear animaciones como diapositivas, ocultar, etc. |
| Toda la codificación tiene que hacerse desde cero. Puede resultar difícil y llevar mucho tiempo para los programadores novatos. | jQuery tiene varias funciones escritas previamente. Solo se deben realizar las modificaciones necesarias. Ahorra un montón de tiempo. |
| Los desarrolladores deben cuidar la compatibilidad con múltiples navegadores. Es más probable que aparezcan errores relacionados con el navegador. | jQuery funciona con todos los navegadores modernos. No existe tal problema de compatibilidad con ningún navegador. |
| No se requieren complementos adicionales para ejecutar JS. No es necesario agregar complementos adicionales ya que todos los navegadores admiten JavaScript. | El enlace del script de la biblioteca jQuery debe incluirse dentro de la etiqueta principal de la página web. |
| Larga línea de código. Puede dar lugar a códigos spaghetti. | Se requiere menos codificación para hacer el mismo trabajo. |
| Se puede acceder a DOM más rápido. | Es mejor para operaciones complejas en las que los desarrolladores suelen cometer errores y escribir líneas de código deficientes. |
| No es fácil de aprender. La curva de aprendizaje es empinada. | Comparativamente más fácil de aprender. |
En pocas palabras, jQuery es una mejor opción cuando se trabaja con sitios web de CMS como WordPress, Weebly, etc. Facilita el desarrollo debido a la enorme biblioteca de complementos que ya tiene. Sin embargo, a pesar de que jQuery está hecho de Javascript, ignorar Javascript estándar no es una decisión acertada. Si desea convertirse en un desarrollador web front-end o full stack, entonces aprender Vanilla JS es una necesidad. Esto se debe a que Javascript también tiene otros marcos y bibliotecas como Angular, React y Vue, que tienen una gran cantidad de ventajas sobre jQuery. Es por eso que se recomienda aprender primero Vanilla JS en profundidad, ya que las bibliotecas y los marcos van y vienen, pero la base de todos ellos siempre será Vanilla JS. Esta es la razón por la cual en una entrevista, un candidato que sepa Javascript tendrá una ventaja sobre los otros candidatos que conocen jQuery.
También se debe saber que a una persona que está aprendiendo JS estándar le resultará más fácil cambiar a jQuery. Sin embargo, cambiar a Javascript desde jQuery puede no parecer fácil al principio. Según una encuesta reciente, se observó que alrededor del 77 por ciento de los 1 millón de sitios web principales en Internet usan jQuery, aprender primero el lenguaje vainilla siempre es la mejor manera de avanzar.
Publicación traducida automáticamente
Artículo escrito por sanchit496 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA