Introducción a jQuery 2013-08-24

Tutorial de introducción a jQuery donde podrás aprender la implementación, sintaxis de selectores y eventos principales. Sin duda el framework JavaScript por excelencia.

Introducción a jQuery

jQuery sin duda es el framework JavaScript por excelencia, simplificando la programación de rutinas, manipulación el DOM e interacción con los elementos HTML en tu página. Es también utilizado para animaciones, solicitudes asíncronas mediante AJAX entre otros.

Cuando se piensa en web hay tres componentes importantes: HTML, CSS y JavaScript. jQuery permite hacer uso de JavaScript de forma inobtrusiva, es decir, no hay mas necesidad de utilizar los atributos HTML onclick, onmouseout, onsubmit, entre otros, lo cual da una sensación de limpieza en el código HTML de nuestra pagina web.

Otra característica muy importante es el soporte para múltiples navegadores, lo cual para cualquier desarrollador web, reduce el tiempo de implementación y te hace olvidar por momentos que existe el IE.

Implementando jQuery en una página web

Lo primero que debes hacer es escoger la versión de jQuery a utilizar. Esto puedes saberlo visitando la página oficial de jQuery

Existen dos formas implementar jQuery en una pagina web:

Desde el CDN Oficial de jQuery

Un CDN o Content delivery network son un conjunto de servidores que contiene la misma información y están distribuidos alrededor del mundo, para servir eficientemente el contenido desde el punto mas cercano al cliente que lo solicita.

Desde el CDN Oficial de jQuery

Debemos copiar la ruta del archivo que nos brinda el CDN y agregar una etiqueta script a nuestro código de esta manera:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Desde tu propio archivo

Desde tu propio archivo

Desde el CDN, simplemente guardamos el contenido del enlace en nuestro equipo y añadimos la etiqueta script en nuestra pagina HTML así:

<script src="jquery-1.10.2.min.js"></script>

Un ejemplo de una pagina HTML con jQuery incluido puede ser este:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Introducción a jQuery</title>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
      $(document).ready(function(){
        //tu código va aqui
      });
    </script>
  </head>
  <body>
    <h1 id="header">jQuery</h1>
    <p>Un <strong>texto</strong> importante</p>
    <p>Otro <strong>texto</strong> más</p>
    <ul class="menu">
      <li>
        <a href="http://www.nanotutoriales.com" class="link">NanoTutoriales</a>
      </li>
      <li>
        <a href="http://www.google.com" class="link" rel="nofollow">Google</a>
      </li>
      <li>
        <a href="http://search.yahoo.com" class="link" rel="nofollow">Yahoo</a>
      </li>
      <li>
        <a href="http://www.bing.com" class="link" rel="nofollow">Bing</a>
      </li>
      <li>
        <a href="http://www.duckduckgo.com" class="link" rel="nofollow">DuckDuckGo</a>
      </li>
    </ul>
    <button id="btn-click">Clic aquí</button>
    <br />
    <button id="btn-dblclick">Doble clic aquí</button>
    <br />
    <label>focus()</label>
    <input type="text" id="txt-focus" />
    <br />
    <label>blur()</label>
    <input type="text" id="txt-blur" />
    <br />
    <label>hover()</label>
    <input type="text" id="txt-hover" />
    <br />
    <label>keyup()</label>
    <input type="text" id="txt-keyup" />
    <br />
    <label>keydown()</label>
    <input type="text" id="txt-keydown" />
    <br />
    <label>keypress()</label>
    <input type="text" id="txt-keypress" />
    <br />
    <label>change()</label>
    <input type="text" id="txt-change" />
    <br />
    <img src="http://www.nanotutoriales.com/assets/nanotutoriales-logo.jpg" id="logo" />
  </body>
</html>

$( document ).ready()

Esta sentencia nos permite ejecutar nuestros scripts una vez todo el DOM de la pagina ha sido cargado. Imagina que a través de jQuery quieres aplicar un efecto a tu menú principal, si tu linea de código esta dentro de esta sentencia puedes asegurar que dicho efecto ha sido aplicado a todos los elementos sin excepciones.

$(document).ready(function(){
  //tu código va aquí
});

Selectores

Los selectores en jQuery son el mecanismo principal para seleccionar elementos del DOM. Existen tres principales selectores en jQuery:

Etiqueta

Retorna una colección de elementos correspondiente a la etiqueta deseada.

$("p")

Un ejemplo practico seria:

$("p").each(function(){
  alert($(this).html());
});

En este ejemplo hemos seleccionado todos los elementos <p> y luego recorremos dicha colección imprimiendo en una ventana de alerta su contenido.

Clase

Este selector retorna una coleccion de elementos cuya clase sea la especificada.

$(".link")

Un ejemplo puede ser:

$(".link").each(function(){
  alert($(this).html());
});

En este ejemplo hemos seleccionado todos los elementos cuya clase sea link y luego recorremos dicha colección imprimiendo su contenido en una ventana de alerta.

Podemos también combinar los selectores. Por ejemplo:

$("a.link").each(function(){
  alert($(this).html());
});

Al definir a.link estamos diciendo que solamente las etiquetas a cuya clase sea link.

Identificador

Al igual que en CSS, podemos también seleccionar por identificador. Con este selector estamos delimitando el retorno a un elemento especifico.

$("#header")

Veamos el siguiente ejemplo:

var header = $("#header");
alert(header.html());

Aquí estamos imprimiendo en la ventana de alerta el contenido del elemento cuyo identificador sea header.

Atributo

Podemos llegar a ser mas específicos y detallar atributos en las etiquetas.

$("a[rel=nofollow]")

Aquí un ejemplo:

$("a[rel=nofollow]").click(function(){
  alert("Ud. saldrá de esta pagina");
});

Existen diferentes tipo de evaluación de atributos, los cuales detallaremos a continuación:

//valor de atributo igual a el contenido
$("a[rel=nofollow]");

//valor de atributo inicia con el contenido
$("a[href^=http://]");

//valor de atributo termina con el contenido
$("a[href$=.pdf]");

//valor de atributo contiene el contenido
$("a[href*=nanotutoriales.com]");

Filtros

Los filtros en jQuery nos permiten acceder rápidamente a elementos dentro de la selección definida. Con ellos podemos obtener el primer elemento de la colección, el ultimo, los pares e impares, entre otros.

Veamos detenidamente algunos de ellos.

:first

Devuelve el primer elemento de la colección.

$("a.link:first")

:last

Devuelve el ultimo elemento de la colección.

$("a.link:last")

:odd

Filtra solamente los elementos de posición impar en la selección. Útil para efectos zebra.

$("li:odd").css("background-color", "gray");

:even

Filtra solamente los elementos de posición par en la selección. Útil para efectos zebra.

$("li:even").css("background-color", "white");

:not

Excluye elementos de la coleccion.

$("a:not(.nofollow)")

Eventos

jQuery permite implementar todos los eventos existentes en JavaScript. Los eventos pueden ser asignados a los elementos inobtrusivamente es decir, sin utilizar los atributos conocidos como onclick, onblur, onfocus, entre otros.

Veamos algunos de los mas utilizados.

click()

Se ejecuta al dar clic en el elemento.

$("#btn-click").click(function(){
  alert("haz hecho clic en el elemento");
});

dblclick()

Se ejecuta al dar doble clic en el elemento.

$("#btn-dblclick").dblclick(function(){
  alert("haz hecho doble clic en el elemento");
});

focus()

Se ejecuta cuando el elemento recibe foco.

$("#txt-focus").focus(function(){
  alert("el elemento ha recibido foco");
});

blur()

Se ejecuta cuando el elemento pierde foco.

$("#txt-blur").blur(function(){
  alert("el elemento ha perdido foco");
});

hover()

Se ejecuta al pasar el cursor sobre el elemento.

$("#txt-hover").hover(function(){
  alert("haz puesto el cursor sobre el elemento");
});

keyup()

Se ejecuta cuando se suelta la tecla luego de presionarla.

$("#txt-keyup").keyup(function(){
  alert("haz soltado la tecla");
});

keydown()

Se ejecuta mientras se presiona la tecla.

$("#txt-keydown").keydown(function(){
  alert("tienes presionada la tecla");
});

keypress()

Se ejecuta cuando se inserta el carácter en el elemento luego de presionar la tecla.

$("#txt-keypress").keypress(function(){
  alert("se ha ingresado un carácter");
});

change()

Se ejecuta cuando el elemento pierde el foco y el valor ha cambiado.

$("#txt-change").change(function(){
  alert("el valor del elemento ha cambiado");
});

load()

Se ejecuta cuando el elemento ha cargado por completo. Aplica para elementos tipo imagen.

$("#logo").load(function(){
  alert("la imagen ha cargado por completo");
});

Acerca del autor

Hugo Gilmar Erazo Full Stack Web Developer

Soy un desarrollador web con más de 10 años de experiencia. Me considero fanático de GNU/Linux, lo cual me ha permitido complementar mis conocimientos en el desarrollo web con la administración de servidores.

Aunque manejo todo lo relacionado al Front-End, me inclino más por el desarrollo Back-End. También desarrollo aplicaciones móviles híbridas. Me gusta lo que hago.

Compartir este artículo