Tutorial de jQuery para principiantes

En este tutorial de jQuery para principiantes aprenderemos los conceptos básico de esta librería y veremos algunos ejemplos muy sencillos para poner en práctica nuestras habilidades de programadores.

¿Qué es jQuery?

jQuery es una librería creada inicialmente por John Resig para Java Script que trabaja de forma rápida, es sencilla y tiene muchas funcionalidades para explorar. Sus tareas principales son la manipulación de código HTML, manejo de eventos, animaciones, peticiones AJAX mucho más simples y una API fácil de usar, la cual es compatible con muchos navegadores. Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben Java Script.

Es importante mencionar que jQuery es software libre y de código abierto, además utiliza las licencias Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en cualquier tipo de proyecto.

Plugins para jQuery

Podemos decir que jQuery es una librearía orientada a plugins, esto quiere decir que cualquier persona con muchos o pocos conocimientos puede agregar nuevas funcionalidades mediante plugins de forma muy rápida y sencilla.

Debido a que jQuery es utilizado en todo el mundo, hay millones de desarrolladores que se encargan de crear nuevos plugins, a continuación un listado de los más importantes:

1. jQuery UI: Este plugin ofrece un conjunto de widgets y efectos visuales para mejorar la usabilidad e interfaz gráfica de nuestros sitios.
2. jQuery Form: Permite serializar formularios y mandar la información al servidor rápidamente, entre muchas cosas más.
3. Fullcalendar: Nos permite mostrar y manipular un calendario con diferentes vistas y la posibilidad de registrar eventos.
4. jqGrid: Nos permite manipular y crear grillas de forma rápida y sencilla. Además es compatible con dispositivos móviles.
5. jQuery Mobile: Este plugin tiene similares características que jQuery UI, con la diferencia de que se puede adaptar a dispositivos móviles.
6. Fancybox: El mejor plugin para crear galerías de imágenes usando el atributo rel.

Incluir jQuery en HTML

Antes de comenzar es un requisito indispensable descargar esta librería desde su sitio oficial: https://jquery.com/download, en nuestro caso vamos a utilizar la versión 2.1.4.

Una vez que tenemos en nuestro poder la librería debemos incluirla en nuestro archivo HTML usando la etiqueta script dentro del head:

<script type="text/javascript" src="path/to/jquery.min.js"></script>

Introduccion a jQuery

Llegamos a la parte más interesante de este tutorial de jQuery para principiantes, en esta sección aprenderemos a utilizar las funciones básicas que nos ofrece esta librería.

Ante de comenzar a manipular el DOM es importante que la página se cargue completamente, para asegurarnos que esto pase, debemos utilizar la función $(document).ready();, la cual recibe por parámetro un callback donde irá nuestro código:

$(document).ready(function(){
  // Aquí va nuestro código para manipular el DOM
});

La característica más interesante de esta librería es que permite cambiar el contenido de una página sin tener que recargarla (esto si pasa en PHP) a través de peticiones AJAX y manipulación del código HTML.
La función $() es la más importante, ya que nos facilita la forma de obtener elementos HTML con solamente indicar la clase o el identificador:

$(document).ready(function(){
  midiv = $('#midiv'); // Devolverá el elemento HTML con id="midiv"
  mispan = $('.mispan'); // Devolverá el elemento HTML con class="mispan"
});

Una vez obtenidos los elementos o nodos podemos aplicarles una gran variedad de funciones que nos ofrece la librería:

alert(midiv.text()); //  Obtengo el texto de midiv y lo muestro en pantalla
midiv.html('<h1>' + midiv.text() + '</h1>') // Pongo el contenido de midiv en un tag H1
mispan.css('color', 'red'); // Le agrego color rojo al texto de mispan

Incluso podemos realizar animaciones gráficas para ocultar o mostrar una etiqueta HTML:

mispan.slideToggle("slow"); // Oculto mispan con una animación

AJAX en jQuery

Otra interesante característica que nos ofrece jQuery es la posibilidad de realizar peticiones AJAX fácilmente y con un código compatible en la mayoría de los navegadores. Esta característica se puede realizar con varias funciones, a continuación un ejemplo sencillo:

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201
  },
  success: function( data ) {
    $( "#weather-temp" ).html( "<strong>" + data + "</strong> degrees" );
  }
});

Para saber un poco más sobre peticiones AJAX los invito a pasar por el tutorial: Cómo realizar una petición AJAX con jQuery.

A continuación les dejo el código completo que hemos visto en este tutorial:

<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial de jQuery</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="path/to/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        midiv = $('#midiv'); // Devolverá el elemento HTML con id="midiv"
        mispan = $('.mispan'); // Devolverá el elemento HTML con class="mispan"
      
        alert(midiv.text()); //  Obtengo el texto de midiv y lo muestro en pantalla
        midiv.html('<h1>' + midiv.text() + '</h1>') // Pongo el contenido de midiv en un tag H1
        mispan.css('color', 'red'); // Le agrego color rojo al texto de mispan
      
        mispan.slideToggle("slow"); // Oculto mispan con una animación
      
      });
    </script>
  </head>
  <body>
    <div id="midiv">Contenido de un div</div>
    <span class="mispan">Contenido de un span</span>
  </body>
</html>

Bueno gente, hemos llegado al final de este tutorial de jQuery, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.