Diferència entre revisions de la pàgina «NF2 - JQUERY»
(→Fonaments) |
|||
| Línia 5: | Línia 5: | ||
*p a | *p a | ||
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, | + | Amb Jquery, utilitzarem la següent sintaxi: |
''$(selector)'' o ''jquery(selector))''. | ''$(selector)'' o ''jquery(selector))''. | ||
| − | Per exemple, per obtenir tots els enllaços que | + | Per exemple, per obtenir tots els enllaços que estan dintre d'un element <nowiki><p></nowiki> farem: |
<pre> | <pre> | ||
$("p a"); | $("p a"); | ||
| Línia 24: | Línia 24: | ||
$("selector")[0].innerHTML = "Acabo d'afegir Text a un element"; | $("selector")[0].innerHTML = "Acabo d'afegir Text a un element"; | ||
</pre> | </pre> | ||
| − | Que | + | Que passaria si el 'selector' retornes més d'un element? |
| − | Doncs que si utilitzem la 1a manera, es posaria el text "Acabo d' | + | 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? | I amb la segona manera? | ||
Hauriem de fer: | Hauriem de fer: | ||
| Línia 34: | Línia 34: | ||
"Acabo d'afegir Text a un grup de nodes"; | "Acabo d'afegir Text a un grup de nodes"; | ||
</pre> | </pre> | ||
| − | Aquest | + | 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: | Exemples de selectors: | ||
{|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;" | {|border="2" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0; background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse; font-size: 95%;" | ||
| Línia 44: | Línia 45: | ||
| $("tr:nth-child(1)") || Selecciona la primera fila de cada taula | | $("tr:nth-child(1)") || Selecciona la primera fila de cada taula | ||
|- | |- | ||
| − | | $("body > div") || | + | | $("body > div") || Selecciona el/s fill/s directe/s <nowiki><div> de <body></nowiki> |
|- | |- | ||
| $("a[href$= 'pdf ']") || Selecciona els enllaços a fitxers pdf | | $("a[href$= 'pdf ']") || Selecciona els enllaços a fitxers pdf | ||
|- | |- | ||
| − | | $("body > div:has(a)") || | + | | $("body > div:has(a)") || Selecciona el/s fill/s directe/s <nowiki><div> de <body></nowiki> que contenen enllaços |
|} | |} | ||
Revisió del 21:13, 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. 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 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 |
