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:

  • Inicio >
  • Blog >
  • Introducción a jQuery (parte 2)

Introducción a jQuery (parte 2)

31 May 2011 por Jose

Comentarios: 0

jQuery

En la entrada introducción a jQuery ya vimos cómo empezar a utilizar esta librería. Hoy veremos algunos aspectos más avanzados de esta potente herramienta.

Empezaremos repasando cómo se puede cargar el código en la página web, luego veremos cómo se puede extender la funcionalidad de la librería con plugins, lo fácil que resulta AJAX con jQuery y, por último, cómo evitar conflictos con otras librerías.

Como aspecto a destacar de la librería jQuery decíamos que era javascript no obstructivo, para esto debemos asegurarnos que los objetos DOM de la página estén totalmente cargados antes de poder realizar cualquier acción con ellos. Esto se hacía de forma tradicional con el objeto onload, pero con esto el navegador esperará a que no sólo el árbol DOM esté listo sino que lo hará hasta que todos los elementos de la página estén cargados, lo que puede provocar un retraso en la respuesta.

Para esto jQuery nos proporciona la función .ready(); esta función permite la activación del código javascript una vez que el árbol DOM esté cargado, sin esperar a las imágenes o los demás recursos. Se usaría así:

$(document).ready(function(){
	alert("El documento ha sido cargado");
});

Aunque existe otra forma de producir el mismo resultado, que sería usar la función $() pasándole como argumento la función que queramos ejecutar una vez cargado el árbol. Esta llamada puede usarse varias veces en un mismo documento y el navegador la ejecutará por el orden en el que fueron declaradas.

$(function(){
	alert("El documento ha sido cargado");
});

Plugins en jQuery

Un plugin de jQuery es un trozo de código que nos permitirá aprovechar o extender las funcionalidades propias de jQuery.

Para empezar tenemos que conocer dos objetos básicos que podemos extender $() y $.fn. El primero se utilizará para funciones globales mientras que el segundo aprovechará las utilidades ya definidas del selector asociado.

$.alertaTexto = function(texto) { alert(texto); };

$.alertaTexto("Esto funciona");

El resultado sería que nos muestra por pantalla el mensaje "Esto funciona".

$.fn.alertaElemento = function(texto) { this.each(function(){ alert(this); } };

$("elemento").alertaElemento();

En este ejemplo debemos pararnos a pensar en el elemento this. La primera aparición hace referencia al conjunto de todos los selectores con id="elemento", entonces recorremos cada uno de ellos con la función each y ahora this se referirá a cada uno de los elementos.

AJAX en jQuery

Otra de las muchas facilidades que este framework nos ofrece es para el uso de AJAX puesto que con una única línea de código podremos establecer una conexión asíncrona. Obviamente esta sería la forma más simple pero jQuery nos ofrece más opciones para la configuración de nuestras conexiones.

Veamos un ejemplo donde añadiremos con un click el elemento del contenido del fichero remoto con id="prueba":

El código del ejemplo:

$("#llamada-ajax").click(function(){
	$("#resultado-ajax").load("resultado_ajax.php #prueba", function(){
		alert("El contenido está cargado.");
	});

	$("#borrado").click(function(){
		$("resultado-ajax").empty();
	});
});

Las funciones .post() y .get() tienen un funcionamiento similar entre ellas y con la función .load(), pero éstas deciden la forma de envío de datos (POST o GET).

La función a través de la cual podemos configurar más ampliamente nuestras funciones es .ajax(). La lista completa de parámetros que acepta la función podemos encontrarla en la documentación oficial de jQuery.

La función .noConflict

El uso de la función $() es de una gran comodidad por eso fue aceptada por múltiples librerías, lo cual llevó a crear conflictos entre ellas cuando se usa más de una. Para evitar estos conflictos y dar una mayor flexibilidad en estos casos, jQuery creó la función .noConflict(). En palabras sencillas esta función crea un alias para las llamadas a elementos jQuery.

Lo que hacemos es cargar la librería jQuery, la cual define $() y después aplicamos .noConflict(), lo que crea un nuevo alias y libera $() para su uso en otras librerías.

var j = jQuery.noConflict();
j(document).ready(function(){
	j("#resultado-ajax").html();
});

Más información

Comentarios

0 comentarios. Comentar.

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?