Primeros pasos con jQuery

Primeros pasos con jQuery

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

primeros pasos con 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="http://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="http://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="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    <!-- Nuestros scripts JS -->
    <script src="http://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.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *