Hola, somos Arume

Desarrollamos páginas web, aplicaciones para móviles, capas de realidad aumentada y aplicaciones para Facebook. Nos apasiona la informática y somos unos perfeccionistas incurables; por eso en nuestros proyectos utilizamos estándares.

tel. 625 519 694

Mendaña de Neyra, 34, 3º B, 15008, A Coruña

Autenticarse

Registrarse. ¿Has olvidado tu contraseña?

Etiquetas

Saltar las etiquetas

Suscríbete a las RSS

Estás en:

Introducción a jQuery

05 May 2011 por Jose

Comentarios: 4

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

Comentarios

4 comentarios. Comentar.

1. Julio el 05 Sep 2012 a las 17:18:03

Me parece perfecto el articulo

2. Anónimo el 28 Oct 2012 a las 02:52:46

Excelente articulo

3. pepito el 04 Ago 2014 a las 23:43:47

Saludos

4. Anonimo el 21 Jun 2015 a las 00:23:39

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

Comentar

Comentar de forma anónima

Puedes comentar poniendo cualquier nombre o apodo, exceptuando los nombres de usuarios registrados. Máximo de 50 caracteres.

Comentar como usuario registrado

Registrarse. ¿Has olvidado tu contraseña?