Curso de JavaScript (y jQuery)

Tema 5. Introducción a jQuery

Introducción y objetivos

La amplia utilización de Javascript en las páginas web actuales ha hecho que surjan bibliotecas de funciones cuyo uso se ha estandarizado enormemente. Las funcionalidades que incorporan son tantas que suelen denominarse entornos de trabajo (frameworks) ya que, de hecho, sirven como base para numerosos plugins que podemos añadir con bastante facilidad a nuestras páginas web.

De entre las muchas existentes (Dojo, MooTools, ExtJS) destaca sin duda jQuery, diseñada para “escribir menos, y hacer más” como sus propios creadores proclaman.

Nuestro objetivo en este tema será iniciarnos en el uso de jQuery, cubriendo los siguientes aspectos:

Cómo incluirlo en nuestras páginas web
Saber hacer uso de algunas de las funciones que incluye
Comprobar cómo puede servir de base para código de terceros que podemos incluir en nuestros desarrollos.

5.1. Qué es jQuery

Según su página oficial (http://jquery.com/) :

“jQuery es una biblioteca Javascript rápida y concisa que simplifica el tratamiento de los objetos de un documento HTML, la gestión de eventos, animaciones e interacciones AJAX agilizando el desarrollo de webs. jQuery está diseñado para cambiar la forma en que escribimos en Javascript.”

Por tanto, lo primero que hemos de saber es que es una biblioteca, esto es, un fichero .js que podemos descargar en nuestro ordenador/servidor e incluir en nuestras páginas web. Por supuesto, como cualquier otro fichero .js también podemos acceder a él en un servidor remoto.

Aunque jQuery incluye numerosas funcionalidades, en esencia, podemos decir que su filosofía se basa en seleccionar conjuntos de nodos del DOM para aplicarles, posteriormente, alguna acción.

Obviamente, todo ello se hace en Javascript. De hecho, no sería necesario usar jQuery para conseguir las mismas funcionalidades pero esta biblioteca nos va a simplificar enormemente el trabajo y, lo que es más importante, lo hace de forma compatible con la inmensa mayoría (por no decir todos) de navegadores existentes. Es decir, jQuery nos permite despreocuparnos de incompatibilidades entre navegadores, permitiendo centrarnos en nuestra tarea de crear nuestra página web.

jQuery está especialmente indicado para la creación de efectos visuales en el navegador, es decir, para proporcionar al usuario de nuestra web una forma de uso mucho más cómoda, muy similar a la que ofrecen los programas de escritorio.

5.2. Cómo funciona

Como hemos indicado, la filosofía general es: selecciona un conjunto de nodos y aplícales alguna acción.

Veamos un primer ejemplo donde:

Incluimos la biblioteca jQuery en nuestra página web
Cambiamos el color de fondo a todos los párrafos del documento.

<!--
      
Fichero: 5.1.html
      =================
      -->
      <html> 
      <head>
      <meta charset="UTF-8">	  
      <title>Primer ejemplo en jQuery</title>
 
      <!-- Incluimos la biblioteca jQuery -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script&gt
 
      </head> 
      <body> 
      <p> Primer párrafo </p> 
      <p> Segundo párrafo </p> 
      <p> Tercer párrafo </p> 
      <!-- Cambiamos el color de fondo a los párrafos del documento -->
      
        <script>

           jQuery( 'p' ).css( 'background-color', 'green' );

        </script>
      
      </body> 
      </html>

<!--

Fichero: 5.1.html

=================

-->

<html>

<head>

<title>Primer ejemplo en jQuery</title>

</head>

<body>

<p> Primer párrafo </p>

<p> Segundo párrafo </p>

<p> Tercer párrafo </p>

jQuery( 'p' ).css( 'background-color', 'green' );

</script>

</body>

</html>

sobre dicho ejemplo explicaremos a continuación las bases de jQuery y algunas mejoras posteriores.

Una breve explicación del código anterior (hemos dejado lineas en blanco alrededor de algunas sentencias solo para destacarlas y que se muestren mejor en el ejemplo):

Hemos accedido a la biblioteca desde un sitio remoto: https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js, pero podíamos haberla descargado a nuestro ordenador y utilizarla como fichero local
Hemos seleccionado los párrafos y aplicado la acción en una sola sentencia:
jQuery( ‘p’ ).css( ‘background-color’, ‘green’ );

Así: jQuery( ‘p’ ) selecciona todos los párrafos del documento, y devuelve dichos párrafos en forma de conjunto de nodos del DOM.
Posteriormente, a cada uno de esos nodos se le aplica la acción .css( ‘background-color’, ‘green’ ) que modifica su estilo cambiando su color de fondo a verde.

El resultado debe ser:

Resultado aplicación jQuery en cambio de estilos CSS

Versiones de jQuery

La libreria de jQuery se va continuamente actualizando. En abril de 2021, la última versión disponible es la 3.6.0. Para utilizar esta versión se debe incluir el código:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js»></script>

En ejemplos de este curso puede que veas que se incluyen versiones anteriores de jQuery. No es importante ya que los cambios de versión han sido continuos pero los scripts funcionan básicamente igual, ya que en este tema de introducción no utilizamos funcionalidades avanzadas.

Lo normal es que si empiezas a desarrollar con jQuery, estés al tanto de dichas actualizaciones y tú ya decidas que versión de la librería incluir en tus scripts. Por ejemplo, puede haber versiones más modernas que ya no soporten navegadores antiguos como IE.

Puedes ver las diferentes versiones en el sitio: code.jquery.com y los ‘snippets’ para incluir la libreria desde un servidor Google (en vez de descargarla y alojarla en tu servidor web) en esta página

Destacaremos la simplicidad y eficiencia con que funciona jQuery (algunos le llamarían ‘elegancia’): por un lado no hemos tenido que usar ningún bucle para cambiar los tres párrafos, sino que la acción indicada se ha ejecutado, automáticamente, sobre todos y cada uno de los elementos del conjunto.

Por otro lado, es de destacar que hayamos podido usar en la misma sentencia una secuencia de funcionalidades; esto se debe a que están definidas como métodos de objetos, lo cual nos permite utilizar el operador punto (.). De hecho, podríamos haber seguido concatenando funcionalidades, por ejemplo:

jQuery( ‘p’ ).css( ‘background-color’, ‘green’ ).css( ‘text-align’, ‘center’ );

y todos los párrafos habrían salido con fondo verde y y centrados en pantalla.

Un último detalle: supongamos que modificamos el código anterior para que en vez de seleccionar los párrafos seleccione todas las cabeceras de tipo h1, es decir:

jQuery( ‘h1’ ).css( ‘background-color’, ‘green’ );

No podemos esperar que ninguno de los párrafos cambie su color de fondo a verde; de hecho, como no tenemos ninguna etiqueta h1 en nuestra página, ningún elemento debería cambiar su color de fondo a verde. Sin embargo, tampoco se ha producido ningún error (podemos comprobarlo en la consola de errores). Y esto es lo realmente interesante de este ejemplo porque, como hemos dicho, jQuery devuelve un conjunto de nodos. Por definición, un conjunto puede tener cero o más elementos, por lo que si el conjunto de nodos devuelto está vacío, no se aplicará ninguna acción, pero tampoco se generará ningún error.

5.3. El estilo de codificación jQuery

Aunque el ejemplo anterior funciona, hay un par de cambios que vamos a realizar para acomodarlo a la forma estándar en que se suele programar con jQuery. Por dos motivos: primero para realizar código no intrusivo, de modo que no mezclemos nuestro código Javascript con el HTML; y segundo para economizar algunas pulsaciones de teclas, como a continuación veremos. El código mejorado de nuestro primer ejemplo es el siguiente:

<!--
      Fichero: 5.2.html
      ================================
      -->
      <html> 
      <head> 
      <title>Primer ejemplo en jQuery mejorado</title> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
      
        <script>
      
          $(document).ready( function() { 
            
          $( 'p' ).css( 'background-color', 'green' ); 
            
          }); 
            
       </script>
      
      </head> 
      <body> 
      <p> Primer párrafo </p> 
      <p> Segundo párrafo </p> 
      <p> Tercer párrafo </p> 
      </body> 
      </html>

<!--

Fichero: 5.2.html

================================

-->