Cómo funciona jQuery

Entenderemos cómo funcionan jQuery y otras librerías similares seleccionando elementos.

Si sabéis CSS, la forma de seleccionar elementos de jQuery os resultará muy intuitiva.

Si no sabéis CSS, os recomendamos consultar el curso Desarrollo web con estándares antes de continuar.

CSS

Para modificar la apariencia de un elemento con el identificador "ejemplo" en CSS usamos el siguiente selector:

#ejemplo

Eso nos permitiría, por ejemplo, hacer que su texto sea rojo:

#ejemplo {
    color : red;
}

JavaScript

Si queremos seleccionar ese elemento con JavaScript, tendremos que hacer uso de document.getElementById:

document.getElementById("ejemplo")

Si queremos hacer que sea de color rojo:

var elemento = document.getElementById("ejemplo");
if (elemento) {
    elemento.style.color = "red";
}

Antes de intentar cambiar su color comprobamos si existe para evitar errores.

jQuery

Así accederíamos al elemento con jQuery:

jQuery("#ejemplo")

O así (sustituyendo "jQuery", por "$"):

$("#ejemplo")

¡Mucho más corto!

Y para cambiar su color:

$("#ejemplo").css("color","red");

Como vemos, jQuery nos permite usar selectores CSS para acceder a los diferentes elementos de nuestra página, y la propia librería se encarga de hacer las comprobaciones oportunas para evitar errores.

De jQuery a JavaScript

Nosotros escribimos esto:

$("#ejemplo").css("color","red");

Y la librería, sin que tengamos que escribir más código, hace que esto funcione ("traduce" nuestras ordenes sencillas a JavaScript a veces no tan sencillo). El código anterior en JavaScript sería:

var elemento = document.getElementById("ejemplo");
if (elemento) {
    elemento.style.color = "red";
}

Así es como funcionan jQuery y otras librerías JavaScript similares.

Otro ejemplo

En el ejemplo anterior no hay mucha diferencia, pero en otros casos...

Cambiemos el color de todos los párrafos con la clase "impar" en jQuery:

$("p.impar").css("color","red");

Hagamos lo mismo en JavaScript:

var parrafos = document.getElementsByTagName("P");
for (var i=0; i<parrafos.length; i++) {
    if (parrafos[i].className=="impar") {
        parrafos[i].style.color = "red";
    }
}

Y aún así este sigue sigue siendo un ejemplo que necesita un código JavaScript muy sencillo.

Por otra parte, además de gestionar errores, jQuery también se encarga de optimizar el código JavaScript para que sea más rápido, etc.