NF2 - JQUERY

De wikiserver
La revisió el 21:04, 16 març 2014 per Asalinas (Discussió | contribucions) (→‎Fonaments)
Dreceres ràpides: navegació, cerca

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 alguins 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 element

fariem: 

$("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
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