Ardilla Quio Ardilla Quio

05 de Mayo de 2011

Introducción a jQuery

Javascript es un lenguaje de programación muy controvertido desde su creación, principalmente por su incompatibilidad con los distintos navegadores y sus versiones. En sus comienzos javascript sólo se usaba para la modificación de sencillos efectos desde el lado del cliente o validación de formularios, pero con la aparición del AJAX este lenguaje empezó a adquirir una gran importancia en el uso de aplicaciones web. La dificultad que tiene javascript para crear códigos complejos frenaba la total expansión del lenguaje, hasta la aparición de los frameworks de javascript.

Los frameworks de javascript son librerías de código que hacen más sencilla la compatibilidad entre navegadores (cross-browser), manejo del DOM o gestión de eventos. El framework que más se ha popularizado en los últimos tiempos es jQuery y sobre él hablaremos a continuación.

¿Qué es jQuery?

Como ya dijimos jQuery es un conjunto de utilidades y funciones de javascript que facilita la producción de código, modificando la forma de escribirlo. Sus principales características son:

Es javascript no obstructivo
Separa el código (X)HTML de las funciones javascript, lo que produce un código más limpio, eficiente y accesible.
Es muy ligero
Menos de 30Kb en la versión 1.5.2.
Extensible
Debido a su popularidad cada día aparecen nuevas extensiones que aumentan las posibilidades de jQuery, sobre todo en cuanto a efectos gráficos.

Instalación

jQuery no necesita instalación, simplemente tendremos que incluir la librería base en nuestro código. Podemos obtenerla desde la página oficial de jQuery.

<script type="text/javascript" src="jquery.js"></script>

También podemos enlazar este fichero remotamente desde los servidores de Google Code de la siguiente manera:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

Cómo usarlo

La selección de elementos en jQuery se hace a través de la función jQuery([selector]), que también podemos llamar usando el símbolo $([selector]). A esta función le pasaremos un selector válido, y nos devolverá un objeto desde el cual manejaremos las propiedades del DOM. jQuery admite como selectores válidos los siguientes:

  • Una cadena de texto compatible con la definición de selector válido para CSS. ($("#id") indica un id, $(".clase") indica una clase)
  • Elemento de DOM ($("body"), $("p"))
  • Un conjunto de elementos del DOM ($("div, span, p.clase"))
  • Un objeto jQuery; se crea un clon del objeto que tendrá los mismos objetos del DOM

Podemos decir que esta asignación viene a corresponderse con la que antes hacíamos con las funciones document.getElementById("id_elemento"), document.getElementByClass("clase").

Y de la misma forma que accedíamos a los atributos con elemento.atributo ahora usaremos las funciones definidas en jQuery para este fin. Aquí van algunos ejemplos:

  • Obtener el valor de un atributo: $([selector]).attr("nombre_atributo")
  • Establecer el valor de un atributo: $([selector]).attr("nombre_atributo", "valor_atributo")
  • Añadir una clase a un elemento: $([selector]).addClass("clase")
  • Modificar estilos de CSS: $([selector]).css("propiedad_css", "valor")
  • Obtener el contenido de una etiqueta: $([selector]).html()
  • Manejar eventos: $([selector]).click([función])
  • Efectos definidos en las librería de jQuery como slide, fadeIn, fadeOut, slideUp

Veamos un ejemplo funcionando. Con este script podremos mostrar y ocultar la imagen y manejar la velocidad a la que hace el efecto.

El (X)HTML:

<div>
	<p>
		<input type="button" id="fadeOut" value="Ocultar imagen" />
		<input type="button" id="fadeIn" value="Mostrar imagen" />
	</p>
	<p>
		<img id="image" src="jquery.png" alt="jQuery" />
	</p>
</div>

El javascript:

$("#fadeOut").click(function() {
	$("#image").fadeOut("slow");
});
$("#fadeIn").click(function() {
	$("#image").fadeIn("fast");
});

jQuery

En próximas entradas profundizaremos más en cómo aplicar los beneficios que jQuery nos proporciona así como el uso y creación de funciones.

Sigue en introducción a jQuery (parte 2).

Más infomación

4 comentarios

Anonimo

21/06/2015 00:23:39

me gusta el diseño de tu pagina deverias hacer mas grandes las letras ..o ponerle negrita

pepito

04/08/2014 23:43:47

Saludos

Anónimo

28/10/2012 02:52:46

Excelente articulo

Julio

05/09/2012 17:18:03

Me parece perfecto el articulo

Comentario anónimo
Comentar como usuario