Diferència entre revisions de la pàgina «NF2 - JQUERY»
(→Selectors) |
|||
| Línia 7: | Línia 7: | ||
fa referència a tots els enllaços (elements <nowiki><a></nowiki>) que estan dintre d'un element <nowiki><p></nowiki>. Jquery utilitza els mateixos selectors CSS i a més a més, inclou alguns dels selectors més poderosos de CSS3. | fa referència a tots els enllaços (elements <nowiki><a></nowiki>) que estan dintre d'un element <nowiki><p></nowiki>. 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: | Amb Jquery, utilitzarem la següent sintaxi: | ||
| − | ''$(selector)'' o ''jquery(selector))''. | + | '''$(selector)''' o '''jquery(selector))'''. |
Per exemple, per obtenir tots els enllaços que estan dintre d'un element <nowiki><p></nowiki> farem: | Per exemple, per obtenir tots els enllaços que estan dintre d'un element <nowiki><p></nowiki> farem: | ||
<pre> | <pre> | ||
Revisió del 21:40, 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:
| 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") | Selecciona el/s fill/s directe/s <div> de <body> |
| $("a[href$= 'pdf ']") | Selecciona els enllaços a fitxers pdf |
| $("body > div:has(a)") | Selecciona el/s fill/s directe/s <div> de <body> que contenen enllaços |
Assegurant que la pàgina és 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 ...'); });
