Saltar la navegación

3.1.- Introducción a jQuery.

JQuery.
JQuery (Dominio público)

jQuery es un framework JavaScript, que nos va a simplificar muchísimo la programación. Como bien sabes, cuando usamos JavaScript tenemos que preocuparnos de hacer scripts compatibles con varios navegadores y, para conseguirlo, tenemos que programar código compatible.

jQuery nos puede ayudar muchísimo a solucionar todos esos problemas, ya que nos ofrece la infraestructura necesaria para crear aplicaciones complejas en el lado del cliente. Basado en la filosofía de "escribe menos y produce más", entre las ayudas facilitadas por este framework están: la creación de interfaces de usuario, uso de efectos dinámicos, AJAX, acceso al DOM, eventos, etc. Además esta librería cuenta con infinidad de plugins, que nos permitirán hacer presentaciones con imágenes, validaciones de formularios, menús dinámicos, drag-and-drop, etc.

Esta librería es gratuita, y dispone de licencia para ser utilizada en cualquier tipo de plataforma, personal o comercial. El fichero tiene un tamaño mínimo y su carga es realmente rápida. Además, una vez cargada la librería, quedará almacenada en caché del navegador, con lo que el resto de páginas que hagan uso de la librería, no necesitarán cargarla de nuevo desde el servidor.

Página Oficial de descarga de la librería jQuery.

Para poder programar con jQuery, lo primero que tenemos que hacer es cargar la librería. Para ello, podemos hacerlo de dos formas:

Cargando la librería directamente desde la propia web de jQuery con la siguiente instrucción:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

De esta forma, siempre nos estaremos descargando la versión más actualizada de la librería. El único inconveniente, es que necesitamos estar conectados a Internet para que la librería pueda descargarse.

Cargando la librería desde nuestro propio servidor:

<script type="text/javascript" src="jquery-3.5.1.min.js"></script>

De esta forma, el fichero de la librería estará almacenado como un fichero más de nuestra aplicación, por lo que no necesitaremos tener conexión a Internet (si trabajamos localmente), para poder usar la librería. Para poder usar este método, necesitaremos descargarnos el fichero de la librería desde la página de jQuery .

La clave principal para el uso de jQuery radica en el uso de la función $(), que es un alias de jQuery(). Esta función se podría comparar con el clásico document.getElementById(), pero con una diferencia muy importante, ya que soporta selectores CSS, y puede devolver arrays. Por lo tanto $() es una versión mejorada de document.getElementById().

Esta función $("selector"), acepta como parámetro una cadena de texto, que será un selector CSS, pero también puede aceptar un segundo parámetro, que será el contexto en el cuál se va a hacer la búsqueda del selector citado. Otro uso de la función, puede ser el de $(function){..}); equivalente a la instrucción $(document).ready (function() {...}); que nos permitirá detectar cuando el DOM está completamente cargado.

Aquí podemos ver un pequeño ejemplo de cómo utilizar la librería y lo que fácil que es su uso.

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>DWEC07.- Ejemplo con jQuery</title>
    <style type="text/css">
      .colorido{
        background-color:#99FF33;
      }
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
      $().ready(() => {
        $("#mitabla tr:nth-child(even)").addClass("colorido");
      });
    </script>
  </head>
  <body>
    <table width="200" border="1" align="center" id="mitabla">
      <tr>
        <td align="center"><b>País</b></td>
        <td align="center"><b>Habitantes</b></td>
        <td align="center"><b>Renta</b></td>
      </tr>
      <tr>
        <td>España</td>
        <td>15600000</td>
        <td>25000</td>
      </tr>
      <tr>
        <td>Italia</td>
        <td>45105500</td>
        <td>45000</td>
      </tr>
      <tr>
        <td>Francia</td>
        <td>58454545</td>
        <td>45645</td>
      </tr>
      <tr>
        <td>Uk</td>
        <td>78799788</td>
        <td>88547</td>
      </tr>
      <tr>
        <td>USA</td>
        <td>98878787</td>
        <td>45124</td>
      </tr>
    </table>
  </body>
</html>