Diferència entre revisions de la pàgina «NF2 - JQUERY»
(→Fonaments) |
|||
| Línia 4: | Línia 4: | ||
Per exemple, el selector | Per exemple, el selector | ||
*p a | *p a | ||
| − | fa referència a tots els enllaços (elements <a>) 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, utilitzariem la següent sintaxi: | Amb Jquery, utilitzariem la següent sintaxi: | ||
''$(selector)'' o ''jquery(selector))''. | ''$(selector)'' o ''jquery(selector))''. | ||
| − | Per exemple, per obtenir tots els enllaços que están dintre d'un element <p> fariem: | + | Per exemple, per obtenir tots els enllaços que están dintre d'un element <nowiki><p></nowiki> fariem: |
<pre> | <pre> | ||
$("p a"); | $("p a"); | ||
| Línia 48: | Línia 48: | ||
| $("a[href$= 'pdf ']") || Selecciona els enllaços a fitxers pdf | | $("a[href$= 'pdf ']") || Selecciona els enllaços a fitxers pdf | ||
|- | |- | ||
| − | | $("body > div:has(a)") || Selcciona el/s fill/s directe/s <div> de body que contenen enllaços | + | | $("body > div:has(a)") || Selcciona el/s fill/s directe/s <nowiki><div> de <body></nowiki> que contenen enllaços |
|} | |} | ||
Revisió del 21:11, 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, utilitzariem la següent sintaxi: $(selector) o jquery(selector)). Per exemple, per obtenir tots els enllaços que están dintre d'un element <p> 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 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 <div> de <body> que contenen enllaços |
