Aprender jQuery, 1: Qué és y por qué usarlo.

Qué és

jQuery es una librería de JavaScript, rápida y concisa que simplifica el tratamiento de documentos HTML, el control de eventos, animaciones, e interacciones AJAX para un desarrollo web rápido. jQuery está diseñado para cambiar la manera en que se escribe JavaScript.

Así (pero en inglés traducido por mi, espero que bien) es como se describe jQuery en la portada de su página oficial.

Aunque haya quien diga que no, yo creo que jQuery es una de las herramientas (por llamarlo de alguna manera) mejor documentadas que hay. Con un mínimo de interés y un poco de imaginación se puede entender rápidamente para qué sirve e imaginar en qué se podría aplicar. Eso sin contar la gran cantidad de recursos y ejemplos que existen, incluso en la misma documentación oficial de la librería. Así que en realidad, ni siquiera hace falta imaginación para entenderlo.

Por qué usarlo

Después de usar jQuery, pensar en dejar de utilizarlo y tener que escribir JavaScript sin algún framework (ya sea jQuery, mootools o cualquier otro) me parece una locura. En sério, sólo de pensar en verme obligado a usar XMLHttpRequest para los temas de AJAX y no poder recurrir a jQuery empiezo a idear excusas para evitarlo.

Y sii no te fias, puedes tener la certeza de que es una librería de calidad, y para demostrarlo en su portada nos recuerdan que Google, Dell, Digg, Technorati, Mozilla, WordPress, Drupal y una infinidad más de sitios utilizan su framework.

Por ejemplo, para hacer una carga de página externa con ajax, usando jQuery sería algo así:

$("#idcapa").load('url/relativa/fichero.php');

Y hacer algo parecido con JavaScript llano sería:

XHConn - Simple XMLHTTP Interface - bfults@gmail.com - 2005-04-08
Code licensed under Creative Commons Attribution-ShareAlike License
http://creativecommons.org/licenses/by-sa/2.0/
*/
function XHConn(){
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, sVars, fnDone) {
    if (!xmlhttp) return false;
    bComplete = false;
    sMethod = sMethod.toUpperCase();
    try {
      if (sMethod == "GET"){
        xmlhttp.open(sMethod, sURL+"?"+sVars, true);
        sVars = "";
      }else{
        xmlhttp.open(sMethod, sURL, true);
        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
        xmlhttp.setRequestHeader("Content-Type",
          "application/x-www-form-urlencoded");
      }
      xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && !bComplete){
          bComplete = true;
          fnDone(xmlhttp);
        }};
      xmlhttp.send(sVars);
    }
    catch(z) { return false; }
    return true;
  };
  return this;
}

var myConn = new XHConn();
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
var include_terminado = function (oXML) { document.getElementById('include').innerHTML = oXML.responseText; };
function include_dinamico (url){
	document.getElementById('include').innerHTML = "";
	myConn.connect("include.php", "GET", "variable="+url, include_terminado);
}

<a onclick="include_dinamico('hola');" href="#">Link</a>

Además de AJAX, jQuery trabaja con animaciones, DOM, eventos, y permite el uso de plug-ins. Y aunque la sintaxis pueda parecer extraña al principio, es bastante sencilla de entender y cuando se hacen un par de ejercicios en plan «copiar, pegar y modificar» se entiende rápidamente como funciona.

Y cuando me apetezca (dentro de un rato, mañana o quizá nunca), explicaré la sintaxis y otras cosas «importantes».