Tutorial – Puesta en marcha de jQuery

Iniciamos el tutorial de jQuery, con la descarga y puesta en marcha ‘sencilla’. Veamos dónde descargarla, dónde colocarla en el proyecto y cómo llamarla para poder utilizarla.

Tutorial jquery

Primer contacto con jQuery

Como indican en la web oficial, jQuery es una librería para JavaScript que facilita la programación en las tareas de eventos, crear animaciones y efectos, manejar AJAX, etc.

En definitiva, es una librería en forma de fichero JS que llamaremos desde nuestra página y nos proporcionará multitud de opciones para hacer de nuestra página mas funcional y atractiva. Cuál es uno de los potenciales de esta librería ?

  • Ocupa muy poco
  • Compatible con la mayoría de navegadores
  • Compatible con CSS3
  • Admite plugins
  • Muy documentado
  • Multitud de ejemplos y tutoriales por Internet

En el blog tenéis muchos ejemplos de código creado con jQuery:

Y también algunos librerías que amplían las capacidades de jQuery

Un ejemplo sería el tutorial de jQuery de la librería jQuery File Upload que permite hacer subidas de ficheros al servidor con un poco de jQuery y PHP.

Descarga librería jQuery

En primer lugar, debemos ir al web oficial de jQuery y descargarlo. Para quien no domine el tema, es un fichero .js que se puede descargar desde la página inicial de jQuery ( lo pone claramente Download jQuery ).

Al descargarlo, debéis alojarlo en una carpeta de proyecto web que tengáis. Ejemplo:

/miproyecto/libreria/jquery-3.6.0.min.js
/miproyecto/index.php

Como podéis ver, tenermos la carpeta miproyecto donde alojamos los ficheros de nuestro proyecto, y dentro una carpeta libreria donde alojamos la libreria jQuery.

Nótese el .min.js que nos da a entender que es la versión comprimida que ocupa mucho menos que la normal utilizan los desarrolladores de jQuery.

Y ahora, cómo la utilizo en mis archivos ?

En los ficheros que vayamos a utilizar la librería, añadiremos la siguiente linea entre las etiquetas head:

<head>
<script type="text/javascript" src="./libreria/jquery-3.6.0.min.js"></script>
</head>

En este caso he añadido el código en el fichero index.php y ya estamos en disposición de utilizar la librería.


Más información