Revisió del 22:42, 16 març 2014

JQuery

Fonaments

La potencia de Jquery radica en recuperar elements de les pàgines html i realitzar operacions amb ells d'una manera fàcil i ràpida. Si coneixes CSS, ets conscient del poder dels selectors que descriuen grups d'elements pel seu tipus, atributs o situació dins del document. Amb Jquery podem utilitzar aquest coneixement, i simplificar la manera d'utilitzar Javascript.

Selectors

Per exemple, el selector

• p a

fa referència a tots els enllaços (elements <a>) que estan dintre d'un element <p>. Jquery utilitza els mateixos selectors CSS i a més a més, inclou alguns dels selectors més poderosos de CSS3. Amb Jquery, utilitzarem la següent sintaxi: $(selector) o jquery(selector)). Per exemple, per obtenir tots els enllaços que estan dintre d'un element <p> farem:

$("p a");
//o bé:
jquery("p a");

Un altre exemple: Si volem ocultar tots els divs que pertanyen a la classe "ender":

$("div.ender").hide();

Un altre exemple molt comú és canviar el text que hi ha en un element html. Amb Jquery es pot fer de dues maneres que donen resultats idèntics:

// Primera Manera:
$("selector").html("Acabo d'afegir Text a un element");
// Segona Manera:
$("selector")[0].innerHTML = "Acabo d'afegir Text a un element";

Que passaria si el 'selector' retornes més d'un element? Doncs que si utilitzem la 1a manera, es posaria el text "Acabo d'afegir Text a un element" a tots els elements seleccionat. Molt útil quan volem canviar tot el HTML d'un grup d'elements. I amb la segona manera? Hauriem de fer:

var elements = $("selector");
for(var i=0;i<elements.length;i++)
elements[i].innerHTML =
"Acabo d'afegir Text a un grup de nodes";

Aquest últim exemple és MOLT POC RECOMANAT. És molt més pràctic i eficient utilitzar la 1a manera a l'hora de programar amb JQuery.

Exemples de selectors:

Assegurant-nos que la pàgina està a punt

Abans que podem interaccionar amb elements d'HTML en una pàgina, aquests han d'estar carregats: només els podem canviar una vegada que són ja allà. L'única manera fiable era esperar que es carregui la pàgina sencera abans que poguéssim executar qualsevol script. JQuery té un esdeveniment molt potent que ens permet executar el script tant aviat com sigui possible. Gràcies a això, les nostres aplicacions semblaran que es carreguen molt mes ràpid. Aquesta funció és: $(document).ready(....);

$(document).ready(function() {
    alert('Benvinguts a la pàgina JQuery ...');
});

Aquesta funció s'utilitza tant que existeix una drecera:

$(function() { alert('Benvinguts a la pàgina JQuery ...'); });

Utilitzant CSS

Després que hem seleccionat els elements som capaços d'afegir i treure estils, classes, i més. Exemple per obtenir un atribut css:

$(document).ready(function() {
	var fontSize = $('#productes tbody tr:first').css('font-size');
	alert(fontSize);
});

Exemple per canviar un atribut css:

$(document).ready(function() {
	$('#productes tbody tr:even').css('background-color','#dddddd');
});

Però i si es vol canviar o afegir dos o més atributs?

$('#productes tbody tr:even').css('background-color','#dddddd');
$('#productes tbody tr:even').css('color', '#666666');

Podem simplificar lo anterior amb una sola crida :

$('#productes tbody tr:even').css({
	'background-color': '#dddddd', 
	'color': '#666666',
	'font-size': '11pt',
	'line-height': '2.5em' 
});

Utilitzant Events (Event handler)

Si volem afegir esdeveniments als diferents elements que apareixen a la pàgina web utilitzant Jquery podem fer-ho molt fàcilment:

$('#boton').click(function() {
	$('#missatge').show(); //es mostra el missatge
});

Però quan s'executa un element moltes vegades volem utilitzar l'element on està l'esdeveniment per tal de fer alguna cosa amb els seus valors. Jquery ens permet utilitzar la paraula reservada this.

$('#Boton').click(function() {
	$(this).hide(); // el botó desapareix
});

$(this)proporciona una manera més maca d'accedir al botó en comptes de tornar a seleccionar-ho. Amb JQuery podem fer coses molt potents com el botó 'toggle':

$('#toggleBoto').click(function() {
	$('#missatge').toggle();
	if ($('#missatge').is(':visible')) {
		$(this).val('Amaga');
	} else {
		$(this).val('Mostra');
	}
});

Afegir elements al DOM

Podem afegir elements al HTMl utilitzant JQUERY:

$('<input type="button" value="toggle" id="toggleBoto">').insertAfter('#missatge');
$('#toggleBoto').click(function() {
	$('#missatge').toggle();
});

Altres funcions per afegir elements:

$('<strong>Començar!</strong>').prependTo('#missatge');
$('<strong>Acabar!</strong>').appendTo('#missatge');

Fins i tot, podem esborrar elements:

$('#missatge').remove();

Canviar el text d'un element

Si volem canviar el text d'un element tenim dos maneres:

$('p').html('<strong>Alerta!</strong> hi ha etiquetes html... ');
$('h2').text('<strong>Alerta!</strong> hi ha etiquetes html ...');

La funció $(selector).html(...) interpretarà les etiquetes html que s'introdueixin dintre del text a mostrar. En canvi, si no volem que s'interpretin les etiquetes html utilitzarem la funció $(selector).text(...) Podem utilitzar aquestes funcions per obtenir el text en comptes de modificar-ho? Sí!

alert($('h2:first').text());

Afegir efectes i animacions

Hi ha diverses funcions de jquery que tenen la habilitat de poder-se animar. Com l'efecte toggle de l'exemple anterior:

$('#toggleBoto').click(function() {
	$('#missatge').toggle('slow');
});

Quan l'animació ha acabat podem programar que s'executi una funció automàticament (callback function):

$('#missatge').slideToggle('slow', function() {
	alert('s'ha acabat l'animació!')
});

Però potser, el que volem és que desaparegui el botó:

$('#missatge').slideUp('slow', function() {
	$('#toggleBoto').fadeOut();
});

Molt més

Earle Castledine, Craig Sharkie, "jQuery: Novice to Ninja", Ed. Sitepoint, 2010, ISBN 978-0-9805768-5-6

Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0

Jquery i AJAX

Exercicis

Chat

Es vol crear un chat amb JQuery. El contingut del chat es guardarà en un fitxer al servidor php. Aquest fitxer es modificarà cada vegada que algú enviï informació. Els clients (navegadors) indicaran l'última línia del fitxer que han rebut per tal d'actualitzar els seus missatges

Pilota

• a) Es vol moure una pilota per la pantalla. Aquesta pilota es mou en tots els navegadors alhora. Per fer-ho, el servidor php té la posició de la pilota a la pantalla i els navegadors, mitjançant jquery, la mostren.
• b) La pilota no ha de parar de moure's, però la seva direcció la decideix el client mitjançant les tecles (up, down, left, rigth).