Cuando atiendo las preguntas de un programador junior en problemas con su código Javascript me doy cuenta de que muchas son debidas a la confusión entre jQuery y un objeto del DOM. Los que empezamos a tocar Javascript antes de la llegada de librerías como jQuery vemos la diferencia claramente, pero hoy en día, cuando un programador novel se lanza a desarrollar en el lado cliente código Javascript estará usando, como mínimo, una librería como jQuery, por lo que lo raro sería que no confundiera ambos.

Vamos a ver en qué consiste la confusión. Cuando trabajamos con la librería jQuery podemos pensar que seleccionar un elemento por su ID:

$('#myVideo').....


Es equivalente a como lo hacíamos antes, cuando no existía la librería jQuery:

document.getElementById('myVideo');

Pero realmente es completamente diferente. El segundo devuelve un puntero al elemento DOM seleccionado que nos permite acceder a las propiedades y métodos propios del elemento mientras que el primero, jQuery, nos proporciona una envoltura (wrapper) sobre el elemento seleccionado (o conjunto de elementos ). Esa envoltura proporciona al programador unos elementos (comunes a todos los elementos del DOM) que facilitan su manipulación.

Esto se ve claramente con el tag <video> que incorpora HTML5 y que usaré como ejemplo. Este tag incorpora métodos no comunes a otros elementos como play() y pause(). El siguiente código Javascript funcionará perfectamente si a dicho elemento le ponemos «myVideo» como identificador:

var player = document.getElementById('myVideo');
player.play();

En cambio, el siguiente código todo cuanto hará será imprimir un error en la consola del navegador:

$('#myVideo').play();

Otro ejemplo para clarificar mejor es cuando queremos acceder a los hijos de un elemento del DOM pero disfrutando de los métodos de jQuery. Veamos el siguiente código:

$('div[id^="panel"] ol').each(function () {

Sirve para recorrer todos los hijos <li>, de un tag <ol>, que pertenece a varios elementos div cuyo id empieza por «panel». Dentro de la función podemos referirnos a cada uno de ellos mediante this, pero el siguiente código sería incorrecto:

$('div[id^="panel"] ol').each(function () {
   this.hide();
}

El método hide lo incopora jQuery, por lo tanto, para poder invocarlo sería:

$(this).hide();

Mientras que para acceder al id sería:

$('div[id^="panel"] ol').each(function () {
   alert(this.id);
   $(this).hide();
}

Tengamos en cuenta además que $ es un alias para la función jQuery, función que nos da acceso a toda la librería jQuery. El dólar es equivalente y más rápido a escribir:

jQuery(this).hide();