Introducción a JQuery

Llevo varios años utilizando JQuery en mis proyectos web y por primera vez quiero publicar una entrada sobre cómo usar ésta magnífica biblioteca Javascript. Su lema es "Write less, do more" (escriba menos, haga más) y realmente lo cumple al permitirnos agregar fácilmente grandes funcionalidades a nuestras páginas web.

Entre las ventajas de su uso está la compatibilidad con todos los navegadores web (los más populares), posee funciones para modificar el comportamiento de los eventos, el contenido de los elementos de la página, validar formularios en el cliente, comunicación asíncrona con el servidor (AJAX), aplicación de animaciones, efectos especiales, interfaces gráficas como calendarios, selectores de color, permite extenderla agregando plug-ins, es la biblioteca Javascript más usada del mundo, entre muchas otras ventajas.

Su uso al principio puede parecer confuso, pero aprendiendo la lógica inicial todo se vuelve muy fácil, para empezar debemos saber que JQuery usa los selectores de CSS (Hojas de estilos en cascada) para seleccionar los elementos de la página, sin confundirnos con la complicada API DOM aprobada por la W3C.
Para comenzar a usar JQuery en nuestra página web, es necesario incluir la etiqueta script así:

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

Lo anterior suponiendo que desea cargar la biblioteca del CDN de la página de JQuery, aunque también puede descargar el código fuente, colocarlo en algún directorio accesible por su proyecto web y escribir su ruta correctamente. Para probar que la referencia sea correcta, deberá agregar su propio script de prueba, ya sea directamente en la página o mediante otro archivo Javascript (se recomienda), finalmente pruebe el siguiente código:

$(function() {
  alert("¡JQuery cargó correctamente!");
});

Si lo anterior es correcto, aparecerá el mensaje de alerta después de que el navegador ha cargado todos los elementos de la página, se recomienda hacerlo así debido a que regularmente creamos referencias a los nodos de la página que ya deberían estar cargados, si usáramos Javascript convencional necesitaríamos el evento onload, pero JQuery lo facilita mediante el objeto y función $, el cual se utiliza para casi todo.

Para finalizar la introducción a JQuery les menciono una lista rápida de las cosas que pueden hacer con código de ejemplo o capturas de pantalla, nos leemos en la próxima entrada.

• Cuando hagas clic en cualquier párrafo de la página aparecerá un mensaje con ¡auch!:

$(function() {
  $('p').click(function() {
    alert("¡auch!");
  });
});

• Agregar un calendario a todos los campos con la clase (class) fecha (requiere JQuery UI):

$(function() {
  $(".fecha").datepicker();
});

• Realizar una petición asíncrona enviando una variable por get (sin procesar la respuesta):

$(function() {
  $.get("ruta/algo.php", {variable:contenido});
});

• Cargar contenido dinámicamente del servidor e inyectarlo en el elemento con id="receptor":

$(function() {
  $("#receptor").load("ruta/dinamico.php");
});