Revisió del 21:41, 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'unica manera fiable era esperar que es carreguès la pàgina sencera abans que poguèssim executar qualsevols script. JQuery té un event 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 mès 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 ...'); });