Primeros pasos con jQuery. Aprende a importar jQuery, la biblioteca de javaScript. Importa también un archivo .js para futuras ampliaciones de código jQuery.
¿Cómo empezar con jQuery?
Estos son los primeros pasos con jQuery, para empezar a utilizar jQuery es necesario incluir un script que cargue la librería de javascript, el enlace a la librería la podemos encontrar en la web de jQuery en la parte inferior de la web: //code.jquery.com/jquery-1.10.2.min.js.
¿Cómo insertar script jQuery en HTML?
Para importar la librería, pegaremos el siguiente código en el <head> tal cual aparece en el siguiente código:
<head>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
¿Cómo crear un alert en jQuery?
Ahora podemos probar a ejecutar un alert y comprobar que nos funciona correctamente el jQuery, para ello podemos hacerlo directamente debajo del script que acabamos de implementar en el head.
El código javascript se implementa dentro de etiquetas <scritp></script> y la función $(document).ready(function(){ se ejecutará cuando la página esté cargada en el navegador. Así pues, cuando se cargue nuestra web aparecerá una ventana de alerta diciendo «Hola Mundo«.
<head>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
alert ("Hola Mundo");
});
</script>
</head>
¿Cómo importar un archivo JavaScript?
Para nuestra comodidad a la hora de implementar código, importaremos nuestro código .js igual que hemos hecho con la librería javascript. Para ello necesitamos crear un archivo .js por ejemplo scripts.js y lo guardaremos en una nueva carpeta que la llamaremos js ( la ruta sería: /raiz/js/scripts.js ). Quedando el siguiente código:
<head>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
<!-- Nuestros scripts JS -->
<script src="https://nuestraweb.es/js/scripts.js"></script>
</head>
Y en nuestro scripts.js tendremos el siguiente código:
$(document).ready(function() {
alert ("Hola Mundo");
});
A partir de aquí podremos ir implementando nuestros scripts jQuery en nuestro archivo scripts.js.
Cómo iniciar con jQuery
- Incluye el script de jQuery en la sección head del HTML usando la URL oficial de la librería
- Usa $(document).ready() para ejecutar código cuando la página se carga completamente
- Crea un archivo .js separado en la carpeta /js para organizar y mantener tu código jQuery
- Importa tu archivo JavaScript personalizado en el head después de cargar la librería jQuery
