marzo 28, 2024

BitCuco

¡Hola Mundo!

De Javascript a jQuery: Introducción a jQuery

Aquí te mostramos una introducción a jQuery, biblioteca de Javascript desarrollada para simplificar la cantidad de código para éste último, por lo que jQuery se puede denominar de forma segura como un marco de JavaScript.

Introducción a JQuery

Pero a diferencia del largo estilo de codificación inherente a JavaScript, jQuery fue diseñado para ser sencillo, así el extenso código JavaScript se puede reemplazar fácilmente por el código compacto de jQuery.

Para demostrar su efecto, proponemos un ejemplo simple de uso de jQuery. Tenemos el siguiente código html:

Y queremos ejecutar el siguiente javascript

var pruebaDiv = document.getElementById("prueba");
pruebaDiv.setAttribute("class", "error");
pruebaDiv.innerHtml = "Hay un error aquí"; 

Así vemos que jQuery puede simplificar esas 3 líneas de código javascript en una sola con la instrucción

$("#prueba").addClass("error").html("Hay un error aquí")); 

Código más limpio – Introducción JQuery

Otra razón para cambiar a jQuery es el la facilidad de lectura que se agrega al código que se escribe. La legibilidad es esa característica del lenguaje de programación que permite a la siguiente persona que trabaja en un código (que está escrito por otra persona) poder leerlo y comprenderlo tanto como sea posible. Por lo tanto, jQuery agrega legibilidad al código.

La sintaxis es bastante simple: todos los elementos que tienen un atributo ID pueden seleccionarse de la misma manera. Del mismo modo, todos los elementos que tienen un atributo de clase especificado se pueden seleccionar de la misma manera. En resumen, un aspecto de jQuery es la facilidad con la que se puede seleccionar un elemento. Veamos el siguiente ejemplo. Dando el siguiente código html:

Hello world

Si queremos seleccionar el texto de adentro del div, con javascript se ejecuta:

document.getElementsByClassName("ejemplo")[0].innerHTML;

Y con jQuery, es más limpio:

$(".ejemplo").html(); 

Como otro ejemplo, si queremos cambiar el color de texto a azul, en javascript sería:

document.getElementsByTagName("div")[0].style.color = 'blue';

Y con jQuery tenemos que indicar la propiedad, que es un css

$("div").css({'color', 'blue'});

Y como jQuery permite declarar varias propiedades, ya que internamente maneja un Json con las propiedades a modificar, por ejemplo css, podemos resumirlo así:

$('html-selector').css('css-property', 'css-value '); //Agregar un atributo
$('html-selector').css({'css-property': 'css-value', ...}); //Agregar varios atributos
$('html-selector').css({cssProperty: 'css-value', ...}), ...}); 

Con el siguiente ejemplo podría quedar más claro éste concepto:

$("div").css({'color': 'red', 'border': '1px solid #000', 'background-color': '#fefefe'});

¿Cómo instalar JQuery?

Descargar la biblioteca jQuery del sitio web oficial es simple. Puede obtenerlo en http://jquery.com.

Antes de usarlo, es necesario importar la libería dentro del head. Si por ejemplo usamos la versión 1.11.1 de jQuery, la importación de la biblioteca se da usando las siguientes líneas de código:


...


O bien puede clonar el proyecto desde github e importarlo en el directorio de trabajo web o raíz del sitio.

git clone git://github.com/jquery/jquery.git

Evento de documento listo

Son eventos que se ejecutan en forma automática una vez que la página se ha terminado de cargar. En jQuery identificamos éste código de la siguiente forma:

$(document).ready(function(){ 
    // Aquí va el código... 
}); 

Como lo ves, es muy sencillo aprender jQuery. En otro tutorial veremos otros elementos útiles para dominar el uso de la librería jQuery y sobretodo aprovechar todas las características que ésta biblioteca nos ofrece.

Migración a Angular

La introducción a JQuery está diseñada especialmente para los que todavía utilizan Javascript. En la actualidad Angular ha reemplazado a JQuery y es uno de los mejores Frameworks para web apps, vale la pena que lo conozcas para utilizarlo en tu próximo desarrollo web.