Ola, somos Arume

Desenvolvemos páxinas web, aplicacións para móbiles, capas de realidade aumentada e aplicacións para Facebook. Apaixónanos a informática e somos uns perfeccionistas incurables; por eso nos nosos proxectos utilizamos estándares.

tel. 625 519 694

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

Autenticarse

Rexistrarse. Esqueceches o teu contrasinal?

Etiquetas

Saltar as etiquetas

Subscríbete ás RSS

Estás en:

Introdución a jQuery (parte 2)

31 Mai 2011 por Jose

Comentarios: 0

jQuery

Na entrada introdución a jQuery xa vimos como empezar a utilizar esta librería. Hoxe veremos algúns aspectos máis avanzados desta potente ferramenta.

Empezaremos repasando como se pode cargar o código na páxina web, logo veremos como se pode estender a funcionalidade da librería con plugins, o fácil que resulta AJAX con jQuery e, para rematar, como evitar conflitos con outras librerías.

Como aspecto a destacar da librería jQuery diciamos que era javascript non obstructivo, para isto debemos asegurarnos que os obxectos DOM da páxina estean totalmente cargados antes de poder realizar calquera acción con eles. Isto facíase de forma tradicional co obxecto onload, pero con isto o navegador esperará a que non só a árbore DOM estea lista senón que o fará ata que todos os elementos da páxina estean cargados, o que pode provocar un atraso na resposta.

Para isto jQuery proporciónanos a función .ready(); esta función permite a activación do código javascript unha vez que a árbore DOM estea cargada, sen esperar ás imaxes ou os demais recursos. Usaríase así:

$(document).ready(function(){
	alert("O documento foi cargado");
});

Aínda que existe outra forma de producir o mesmo resultado, que sería usar a función $() pasándolle como argumento a función que queiramos executar unha vez cargada a árbore. Esta chamada pode usarse varias veces nun mesmo documento e o navegador executaraa pola orde na que foron declaradas.

$(function(){
	alert("O documento foi cargado");
});

Plugins en jQuery

Un plugin de jQuery é un anaco de código que nos permitirá aproveitar ou estender as funcionalidades propias de jQuery.

Para empezar temos que coñecer dous obxectos básicos que podemos estender $() e $.fn. O primeiro utilizarase para funcións globais mentres que o segundo aproveitará as utilidades xa definidas do selector asociado.

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

$.alertaTexto("Isto funciona");

O resultado sería que nos mostra por pantalla a mensaxe "Isto funciona".

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

$("elemento").alertaElemento();

Neste exemplo debemos pararnos a pensar no elemento this. A primeira aparición fai referencia ó conxunto de todos os selectores con id="elemento", entón percorremos cada un deles coa función each e agora this referirase a cada un dos elementos.

AJAX en jQuery

Outra das moitas facilidades que este framework nos ofrece é para o uso de AJAX posto que cunha única liña de código poderemos establecer unha conexión asíncrona. Obviamente esta sería a forma máis simple pero jQuery ofrécenos máis opcións para a configuración das nosas conexións.

Vexamos un exemplo onde engadiremos cun click o elemento do contido do ficheiro remoto con id="proba":

O código do exemplo:

$("#chamada-ajax").click(function(){
	$("#resultado-ajax").load("resultado_ajax.php #proba", function(){
		alert("O contido está cargado.");
	});

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

As funcións .post() e .get() teñen un funcionamento similar entre elas e coa función .load(), pero estas deciden a forma de envío de datos (POST ou GET).

A función a través da cal podemos configurar máis amplamente as nosas funcións é .ajax(). A lista completa de parámetros que acepta a función podemos atopala na documentación oficial de jQuery.

A función .noConflict

O uso da función $() é dunha gran comodidade por iso foi aceptada por múltiples librerías, o cal levou a crear conflitos entre elas cando se usa máis dunha. Para evitar estes conflitos e dar unha maior flexibilidade nestes casos, jQuery creou a función .noConflict(). En palabras sinxelas esta función crea un alias para as chamadas a elementos jQuery.

O que facemos é cargar a librería jQuery, a cal define $() e despois aplicamos .noConflict(), o que crea un novo alias e libera $() para o seu uso noutras librerías.

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

Máis información

Comentarios

0 comentarios. Comentar.

Comentar

Comentar de forma anónima

Podes comentar poñendo calquera nome ou alcume, exceptuando os nomes de usuarios rexistrados. Máximo de 50 caracteres.

Comentar como usuario rexistrado

Rexistrarse. Esqueceches o teu contrasinal?