jQuery para principiantes

Javascript jquery css

jQuery es un proyecto que nace de la idea de John Resig, que buscaba una manera fácil para usar las funcionalidades de Javascript aprovechando los selectores CSS. Su objetivo era el de simplificar la programación Lado Client para así evitar escribir código detallado y difícil de mantener. Otro de sus objetivos era estandarizar los diferentes buscadores en el uso de Javascript, dados los grandes problemas de compatibilidad que existían en ese momento.

El primer lanzamiento oficial de jQuery data de 2006 y desde entonces ha tenido un gran éxito que lo ha llevado a ser elegido y utilizado por un número cada vez mayor de proyectos, gracias a la fácil curva de aprendizaje y el funcionamiento intuitivo. Podéis echar un vistazo a su historia en el sitio oficial siguiendo este LINK.

¿Por qué jQuery?

El mote de jQuery “write less, do more”, que podríamos traducir literalmente como “escribe menos, haz más”, describe la filosofía detrás de esta biblioteca.

A través de las funcionalidades de jQuery es posible manipular los elementos del DOM, actuando directamente sobre él con muy pocas líneas de código, crea animaciones, gestiona eventos y aprovecha la gran cantidad de Plugins existentes para implementar lo que quieras.

Para poder usar jQuery es necesario incluir la biblioteca en el proyecto, esto puede suceder de dos maneras:

A través del uso de una CDN (Content Delivery Network). Es decir, de un link que apunta directamente a la biblioteca.

<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

Incluirla de manera local, descargando las fuentes desde el sitio oficial, para después vincularlas a nuestros archivos HTML.

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

Una vez añadida, jQuery se guardará en el objeto global de window, de modo que se pueda acceder a él desde cualquier lugar de la aplicación.

Para verificar esto bastará con abrir la consola del buscador, digitar la keyword jQuery y pulsar envío.

En el siguiente ejemplo copio completamente el código fuente de jQuery, desde el sitio oficial, y hago la verificación descrita anteriormente.

P.D. Pegar el código en la consola del buscador tiene el mismo resultado de un simple import en html.

Desde este momento es posible empezar a usar sus funcionalidades, por ejemplo; aprovechando sus selectores. Para poderlos usar se necesita digitar el signo de dólar $ seguido de los paréntesis redondos: $(), esto es un shorthand para las funciones jQuery().

Dentro de los paréntesis, como parámetros, pasaremos al elemento que nos interesa recargar y sucesivamente pasaremos al método que hay que aplicar.

El elemento se puede buscar con los mismos selectores que habremos usado para escribir código CSS. Por ejemplo, para seleccionar el elemento o los elementos con una determinada clase CSS pasaremos como parámetro el nombre de la clase, precedida de un punto: $(‘.someCssClass’). Si quisiéramos aprovechar el ID usaremos el símbolo almohadilla: $(‘#someID’).

EJEMPLOS DE SELECTORES JQUERY

Búsqueda con una clase CSS:

<h2 class="subtitle">h2 con classe subtitle</h2>

Selector jQuery

$(".subtitle").css("color", "red"); // colora di rosso il contenuto

En el caso de que quisiéramos usar el selector ID el código no cambia mucho…

<h2 id="subtitle">h2 con id subtitle</h2>

Selector jQuery

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

Selectores más avanzados: Filtros

jQuery permite aprovechar selectores mucho más avanzados, permitiendo hacer filtros. Generalmente estos selectores comienzan con dos puntos. Supongamos querer seleccionar el primer elemento de una lista:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>

</ul>

Selector jQuery

$("li:first").css("color", "grey");

Es muy similar al caso en el que se quiere seleccionar el último, en ese caso el selector será: last.

Otro selector muy útil es el:: contains, que busca y selecciona los elementos que contienen un cierto texto.

<p>Hello World</p>
<span>My name is John</span>

Selector jQuery

$("span:contains(John)").css("color", "red");

Estos son solo algunos de los ejemplos de selectores que muestran la potencia de jQuery y su facilidad de uso. Sin embargo, esta facilidad lleva consigo uno de los mayores riesgos…

Riesgos en el uso de jQuery

Como he adelantado, el uso desenfrenado de jQuery puede llevar a sobrecargar excesivamente la aplicación, haciéndola a veces lenta y entrecortada.

Cada selector jQuery no más que crear un puntero al navegador, es decir, una variable que ocupa espacio y que requiere energía computacional para ser gestionada. Imaginad que trabajáis en grandes proyectos, con cientos de selectores diferentes entre ellos y tener que modificar el mismo elemento, como en el siguiente código:

$("#title").show();
$("#title").addClass("someClass");
$("#title").addClass("anotherClass");

$("#title").on("click", function(){
//codice da eseguire…

});
//...

$("#title").find("ul > li > input[type=checkbox]").addClass("anotherClass");

En este ejemplo, cada vez que llamamos al elemento #title se creará un nuevo puntero con posibles ralentizaciones… sería una buena práctica crear variables que guarden la referencia a ese elemento para recuperarlo solo una vez, como en este caso:

var title = $(‛#title');

Otra práctica muy común entre los que utilizan jQuery es la de añadir código CSS con los métodos disponibles, generando tiempo de ejecución con la biblioteca, descuidando totalmente el normal HTML y CSS en la fuente. Si se abusa de esta práctica, puede sobrecargar el proyecto, ralentizando los tiempos de carga y dañando el posicionamiento sobre los motores de búsqueda, en cuanto los buscadores tendrán grandes dificultades para encontrar la información que les sea útil ya que la jQuery la genera dinámicamente.

Entonces, ¿cuándo usarlo?

jQuery se presta mucho a ser utilizado para proyectos de pequeña y mediana grandeza, donde se pueden explotar los numerosos Puglins existentes y la lógica del proyecto no tiende a escalar hasta volverse muy complejo. En caso de que el proyecto comience a pedir interacciones cada vez más complejas con el servidor, y por lo tanto una manipulación de datos más eficiente, se aconseja aprovechar las múltiples bibliotecas o frameworks javascript que existen actualmente y optimizarlas para ese fin. Como por ejemplo Vue.js, React o Angular, que están optimizados para representar y actualizar constantemente los datos presentes en el DOM.

Una mirada al presente...

Hay que reconocer que jQuery sigue siendo ampliamente utilizado por una gran cantidad de proyectos, a pesar de los grandes avances realizados por Javascript y los problemas anteriores de compatibilidad entre navegadores. Esta popularidad se debe a su facilidad de uso (bastan 10 minutos para entender cómo usarlo), a la sintaxis intuitiva y también al hecho de que está incorporado en algunos de los CMS más famosos del mundo como Wordpress y Drupal.

A pesar de los competidores de jQuery son muchos y suelen ofrecer un mejor rendimiento y su eliminación como dependencia de otros framework famosos (mira Bootstrap 5 que al eliminar el soporte para internet explorer ha eliminado también jQuery de sus dependencias), jQuery sigue sobreviviendo y pasará mucho tiempo antes de su salida definitiva del mercado.

Conviértete en Desarrollador weben 6 meses

Descubre el bootcamp de programación Hackademy

Programa Completo