BREVE INTRODUCCIÓN A JQUERY

jQuery, que es y como instalarlo:

Gracias a esta librería nos hará falta escribir menos código para obtener el mismo resultado que si desarrollamos nuestros scripts directamente en javaScript. Las ventajas que nos aporta trabajar con jQuery son básicamente tres: Nos permitirá seleccionar y modificar de una forma más directa y efectiva los diferentes elementos del DOM. Nos permitirá olvidarnos de las diferencias de interpretación de código por parte de los principales navegadores del mercado, ya que será la propia librería la que se encargará de comunicarse de forma adecuada con cada tipo de navegador. Y por último, cabe destacar otra de sus grandes ventajas, y es que jQuery es una librería ampliamente testeada, que consta con una gran comunidad de colaboradores que la actualizan y amplian continuamente, lo cual nos aportará mucha fiabilidad a la hora de crear nuestros sitios y aplicaciones web. Por lo tanto podemos contar con la tranquilidad de encontrar la información necesaria para afrontar todos los desarrollos que nos planteemos hacer.

Para utilizar esta librería tendremos que descargar el correspondiente archivo jquery.js desde la página oficial de jQuery e incluirlo en nuestro proyecto. Una vez descargado guardaremos dicho archivo en una de las carpetas de nuestro proyecto web, normalmente en una carpeta que llamaremos js. y después lo vincularemos al archivo html que es donde escribiremos todos los contenidos de nuestra página web.

Para vincular la librería jQuery a nuestro documento html lo único que tenemos que hacer es escribir la siguiente instrucción dentro de nuestro documento html, en la que indicaremos el tipo de archivo que queremos vincular y la ruta en la que está ubicado dicho archivo dentro de nuestro proyecto:

En esta instrucción podemos remarcar que el archivo jquery.js se encuentra ubicado, como ha sido recomendado previamente, dentro de una carpeta denominada js.

A la hora de descargar la librería jquery.js seguramente encontraremos varias versiones disponibles, asi que simplemente escogeremos la última versión que sea estable. Sobre todo tenemos que prestar atención que no se trate de una versión beta (en proceso de pruebas). A fecha de hoy la última versión estable disponible es la 3.2.1.

Al efectuar la descarga también vamos a encontrar dos tipos de archivos diferentes dentro de cada versión disponible: Para la versión 3.2.1 encontraremos el archivo jquery-3.2.1.js, que es un archivo sin comprimir, el cual usaremos mientras desarrollamos el código de nuestra web. Y el archivo jquery-3.2.1.min.js, que es un archivo comprimido, el cual usaremos cuando publiquemos la página web, una vez terminado todo el desarrollo del código, y cuando nuestra página funcione correctamente. Tenemos que tener claro que estos dos archivos son exactamente iguales, con la única diferencia que la version comprimida ocupa bastante menos, siendo más rápida de cargar, permitiendo que nuestra página sea un poco más rápida. Además esta versión comprimida es mucho más difícil de leer por los humanos ya que su código está escrito sin espacios, saltos de linea ni tabulaciones.

A la hora de publicar nuestro sitio web también será muy recomendable vincular el archivo jQuery desde un CDN (Content Delivery Network), ya que se trata de servidores de grandes empresas como Google o Microsoft que tienen una alta capacidad de respuesta. De esta forma haremos que nuestras páginas web sean más rápidas que si ubicaramos dicho archivo jquery.js dentro de una de las carpetas del servidor donde albergamos nuestro sitio. Y por lo tanto, a la vez de ganar en velocidad también liberaremos ancho de banda de nuestro servidor. No obstante siempre será recomendable ubicar una copia del archivo jQuery en nuestro servidor para tenerlo disponible en caso de que el CDN falle, para lo cual utilizaremos el siguiente código:

Después de estas breves instrucciones ya podremos empezar a escribir nuestro propio archivo javaScript, escrito en jQuery, con el código y las funciones necesarias para aportar interactividad a nuestras páginas web.

Observación: Cuando usamos jQuery todo el código y todas las funciones que vamos a desarrollar en nuestro archivo .js estarán ubicadas dentro de la siguiente función anónima: $(funcition() {//Aquí dentro irá todo nuestro código jQuery};. Esta función permite esperar a que todos los elementos del DOM estén disponibles antes de comenzar a ejecutar el código que hay en su interior.