venerdì 9 settembre 2011

jQuery - I selettori

Nel framework jQuery i selettori degli elementi del codice HTML possono per comodità essere suddivisi in due gruppi.
selettori di base utlizzano il tag name, l'id o la classe per individuare gli elementi.
I selettori gerarchici utilizzano l'organizzazione gerrchica delle pagina per individuare gli elementi.

Esempio di selettore di base:
$("a"); // selezione tutti i tag "a" della pagina;
$("#id_elemento"); // seleziono l'elemento con id "id_elemento";
$(".classe_elemento"); // seleziono gli elementi con classe "classe_elemento";

Esempio di selettori gerarchici:
$("#header a"); // seleziono tutti i tag a interni al div con id "header";
$("ul#navglob > li"); // seleziono tutti gli elementi li direttamente discendenti dal tag ul con id "navglob";
$("h1 + h2"); // seleziono tutti i tag h2 preceduti da h1:
$("id_elemento ~ div") // seleziono tutti i div adiacenti all'elemento con id "id_elemento"

In considerazione del fatto che il selettore più interno viene attivato prima e quindi che la selezione avviene da destra verso sinistra (scartando dall'insieme trovato con il primo criterio gli elementi che non soddisfano il secondo criterio) è bene impostare i selettori più significativi all'interno o a destra in modo da velocizzare le operazioni di selezione.

$("p#header strong"); // NO - Seleziono prima tutti gli elementi "strong" della pagina e poi li scarto tutti ad eccezione di "p#header".
$("strong ", $("p#header")); // SI - Seleziono l'elemento "p#header" e scarto tutti gli elementi interni non racchiusi in tag "strong".
$("p#header").find("strong"); // SI -

Nessun commento:

Posta un commento