Veiga en 12:06 1 oct 2008

2008-10-01T12:06:07Z

Página nueva

Cando se introduciu CSS nas tecnoloxías web fíxose co fin de separar o deseño de contido, de forma que puideramos facer referencia ós elementos da páxina dende as follas de estilo.

O método foi desenvolvido facendo uso de '''selectores''', que '''referencian os elementos en base os seus atributos ou a súa posición''' no documento HTML.

Por exemplo o selector
<pre>
p a

fai referencia ó grupo dos enlaces (elementos <a>) que están dentro dun elemento p.

</pre>

jQuery fai uso dos mesmos selectores, dando soporte ós selectores máis comúns empregados en CSS, e tamén a moitos selectores que aínda non están soportados por moitos navegadores.

Por exemplo o selector '''nth-child''' que vimos nun exemplo anterior é un bo exemplo da potencia de selección en jQuery.

Para facer referencia a un grupo de elementos, usaremos unha sintaxis moi simple:
<source lang=javascript>

$(selector)

ou

jQuery(selector)

</source>

O máis cómodo é empregar a notación $(), aínda que resulte un pouco estraña ó principio.

Por exemplo, para recuperar o grupo de enlaces que está dentro dun elemento p, usaríamos o seguinte:

<source lang=javascript>
$("p a")
</source>

A función '''$()''' (alias de '''jQuery()''') devolve un obxecto especial JavaScript que contén un array de todos os elementos DOM que cumplen o selector.

En termos de programación, estáse a producir un encapsulamento xa que estamos accedendo a todos os elementos seleccionados e estamos aplicándolle unha funcionalidade extendida.

Por exemplo se queremos ocultar todos os elementos div dun documento que empregan a clase "colorido", en jQuery faríamos o seguinte:
<source lang=javascript>
$("div.colorido").fadeOut();
</source>

Unha característica especial en moitos comandos de jQuery é que unha vez que ese comando terminou a súa acción (como por exemplo a operación anterior de ocultar fadeout()),ese mesmo comando devolve o mesmo grupo de elementos, listos para usar nunha nova acción.

Por exemplo, se queremos engadir unha nova clase os elementos que ocultamos recentemente poderíamos facer:

<source lang=javascript>
$("div.colorido").fadeOut().addClass("eliminados");
</source>

Este encadeamento de accións podería continuar indefinidamente.

Outro exemplo:

<source lang=javascript>
$("#unelemento").html("Engadimos texto ó elemento");

ou

$("#unelemento")[0].innerHTML ="Engadimos texto ó elemento");
</source>

No exemplo anterior empregamos un selector de ID ("#id"), polo que soamente un obxecto do documento cumplirá ese selector.
No primeiro caso empregamos o método html(), o cal reempraza o contido do elemento co novo contido HTML.

Se queremos face-lo mesmo pero con varios elementos poríamos:

<source lang=javascript>
$("div.novotexto").html("Engadimos texto a un grupo de div que están usando a clase novotexto");

ou

var elements = $("div.novotexto");
for(i=0;i<elements.length;i++)
elements[i].innerHTML ="Engadimos texto a un grupo de div que están usando a clase novotexto";

</source>

Outros exemplos:

<source lang=javascript>
$("p:even"); //Este selector selecciona todos os párrafos que sexan pares.
$("tr:nth-child(1)"); //Este selector selecciona a primeira fila de tódalas táboas do documento.
$("body > div"); //Este selector selecciona os <div> fillos que colgan directamente de <body>.
$("a[href$=pdf]"); //Este selector selecciona enlaces a ficheiros PDF.
$("body > div:has(a)"); //Este selector selecciona <div> que son fillos directos de <body> e que ademáis conteñan enlaces.
</source>

O encapsulamento en jQuery - Historial de revisiones

Veiga en 12:06 1 oct 2008