NF2 - JQUERY
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. 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, utilitzariem la següent sintaxi: $(selector) o jquery(selector)).
Per exemple, per obtenir tots els enllaços que están dintre d'un elementfariem:
$("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 pasaria si el 'selector' retornès més d'un element? Doncs que si utilitzem la 1a manera, es posaria el text "Acabo d'agegir 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 útim 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:
| Selector | Explicació |
|---|---|
| $("p:even") | Selecciona tots els elements <p> amb el pseudo element even |
| $("tr:nth-child(1)") | Selecciona la primera fila de cada taula |
| $("body > div") | Selcciona el/s fill/s directe/s <div> de <body> |
| $("a[href$= 'pdf ']") | Selecciona els enllaços a fitxers pdf |
| $("body > div:has(a)") | Selcciona el/s fill/s directe/s de body que contenen enllaços
|
