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.
Primeros pasos 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.
Insertar script jQuery en nuestro 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>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>Importar nuestro 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.
