4. Selettori di base e gerarchici

jQuery permette di selezionare gli elementi all'interno del documento, così da applicarvi
proprietà, metodi.
I selettori vengono passati come paramentro della funzione jQuery() o del suo alias $().

La sintassi utilizzata è la stessa per i selettori CSS, più alcune scorciatoie tipiche di jQuery.

Dividiamo i selettori in due categorie:

• Selettori di base


• Selettori gerarchici

Selettori di base
I selettori di base sono quelli che ci permettono di selezionare un elemento in base
al tipo di tag, alla classe a cui esso appartiene o in base all'ID.

Vediamo un esempio di utilizzo:

$("div").css("font-size","14px");
//seleziona tutti i div e imposta il font

$(".class1").hide();
//nasconde tutti gli elementi con la classe class1

var elhtml = $("#id_ele").php();
//preleva l'html dell'elemento tramite id

La sintassi utilizzata è come quella dei selettori CSS:
per selezionare gli elementi per tag si scrive solamente il nome del tag,
per la classe si precede il nome della classe da un punto (.)
e per l'id si precede l'id da un cancelletto (#).

I primi due tipi di selezione ritornano uno o più elementi del documento;
la selezione tramite id invece ritorna uno ed un solo elemento,
quindi se si danno più id uguali (è sbagliato farlo nella stessa pagina!)
viene preso solamente il primo elemento.

Vediamo in questo esempio come si possono
selezionare tutti i paragrafi con una determinata classe:

$("p.class1").css("background-color","yellow");
//cambia il colore di sfondo dei paragrafi con classe class1
  

Passiamo ora a vedere i selettori gerarchici.

Selettori gerarchici

A differenza dei selettori precedenti, con i selettori gerarchici è possibile selezionare degli elementi rispetto ad altri elementi della pagina.

$("ul#menu li");
 //seleziona tutti gli elementi del menu

$("ul#menu > li");
//seleziona tutti gli elementi direttamente discendenti

La differenza sta nel fatto che il secondo seleziona le voci del menù
direttamente discendenti dal padre (il menù stesso) e non ulteriori annidamenti, come nel primo esempio.

Un altro utile selettore è quello che definisce l'ordine di selezione tra elementi dello stesso livello.
Vediamo due esempi che chiariscono meglio:

$("label + input");
//input appena seguenti ad una label

$("label ~ input");
//tutti gli input fratelli di una label

La sostanziale differenza è che nel primo caso viene selezionato l'input
immediatamente dopo i tag <label>,
nel secondo caso invece gli input selezionati sono tutti quelli successivi al tag <label>,
anche non immediatamente.

5. Filtri di selezione

Dopo aver parlato dei selettori di base e gerarchici,
passiamo a vedere come "raffinare" le selezioni utilizzando dei filtri
che ci vengono messi a disposizione da jQuery.

Questi filtri possono essere combinati con i selettori visti nella lezione precedente.
Facciamo un esempio:

$("div:hidden");
//seleziona tutti i div nascosti

$("div:not(.testo)");
//seleziona tutti i div ad esclusione di quelli aventi la classe .testo

Nel primo esempio proposto mediante il filtro hidden abbiamo limitato la selezione degli elementi ai soli div nascosti;
nel secondo esempio abbiamo selezionato (mediante il filtro not) tutti i div
tranne quelli che hanno una specifica classe.

Ancora, la selezione degli input dei form può essere raffinata mediante dei filtri basati sugli attributi (ad esempio type o name) degli elementi.

Vediamo degli esempi:

$("input[name='nome_text']");
//seleziona tutti gli input con name=nome_text
 
$("input[name^='nome']");
//tutti gli input il cui name inizia con 'nome'
 
$("input[name$='text']");
//tutti gli input il cui name finisce con 'text'
 
$("input[name!='nome_password']");
//tutti gli input con name diverso da nome_password

Un altro set di filtri forniti da jQuery sono quelli relative alla
selezione di elementi in base al loro ordine (cd. filtri d'ordinamento).

Di seguito degli esempi relativi alle righe di una tabella:

$("#id_table tr:first");
//la prima riga della tabella con id=id_table
  
$("#id_table tr:last");
//l'ultima riga

$("#id_table tr:odd");
//le righe dispari

$("#id_table tr:eq(5)");
//la riga numero 5

La stessa cosa che abbiamo fatto sulla nostra ipotetica tabella avremmo potuto farla anche su un elenco puntato, ecc.

Un ultimo esempio è quello relativo alla selezione di elementi all'interno di una form.
In una form, gli elementi sono degli <input> e variano il loro attributo "type"
in base a quello che si vuole utilizzare.
Questi si potrebbero selezionare, come visto in precedenza:

$("input[type='password']");
  //seleziona l'input type="password"

ma jQuery fornisce una scorciatoia: vi è infatti la possibilità di utilizzare la
keyword dell'attributo type preceduta dai due punti
per identificare velocemente l'elemento:

$(":password");
  //seleziona l'input type="password"

Selezionare quindi un elemento all'interno di una pagina o in determinati punti di essa risulterà più semplice per raggiungere l'elemento desiderato.

Nota: Per approfondimenti si consiglia di visitare la documentazione ufficiale di jQuery

6. Muoversi all'interno del DOM

jQuery mette a disposizione numerosi metodi per muoversi all'interno di un documento effettuando ricerche all'interno di un elemento oppure sfruttando legami di tipo padre-figlio e così via.

Ora ne prenderemo in considerazioni alcuni:


contents()
Questo metodo consente di accedere a tutti gli elementi figli dell'elemento su cui è applicato; questo metodo, inoltre, può essere applicato ad un iframe contenuto nella pagina. Vediamo un esempio:

<iframe src="testo.php" width="50%" height="400" id="frametesto"></iframe>

<script>
$("#frametesto").contents().find("p").css("color","red");
</script>

Nell'esempio visto sopra estraggo il contenuto dall'iframe (utilizzando il metodo in oggetto) e poi coloro di rosso tutto il testo presente nei paragrafi.


find()
Questo metodo (che abbiamo già utilizzato nell'esempio precedente) ci permette di selezionare gli elementi interni ad un elemento.
La differenza con il precedente metodo è che questo seleziona gli elementi desiderati in base ad un selettore (o meglio, un'espressione di selezione come quelli utilizzati con la funzione $()), mentre contents() ritorna tutti i figli dell'elemento su cui è applicato e solo successivamente è possibile effettuare una selezione.
Vediamo un semplice esempio:

$("#intro").find("p").hide();

Con questo codice vengono nascosti tutti i paragrafi presenti all'interno dell'introduzione (contrassegnata dall'ID #intro).

Dopo aver visto come si trovano gli elementi interni tramite find() passiamo ad usare metodi che si basano sulle relazioni gerarchiche tra elementi.


children()
Come si può intuire dal nome, questo metodo restituisce i figli della selezione su cui è applicato. I figli considerati sono solo quelli immediati; non vengono selezionati gli elementi annidati. Vediamo un semplice esempio. Si supponga di avere nella pagina un'indice dei contenuti così strutturato:

<ul id="indice">
 <li>Primo capitolo</li>
 <li>Secondo capitolo
  <ul>
   <li>Sottocapitolo</li>
  </ul>
 </li>
 <li>Terzo capitolo</li>
</ul>

Si supponga ora di utilizzare il seguente codice jQuery:

$("#indice").children().css("background-color", "red");

Mediante queste semplici istruzioni viene colorato di rosso lo sfondo dei capitoli, ma non del sottocapitolo perchè non è un figlio diretto dell'elenco puntato con ID #indice.
Come per find(), anche per children() è possibile passare un selettore come parametro.


parent() e parents()
Il metodo parent() assolve alla funzione contraria di children(), cioè seleziona il genitore dell'elemento considerato. La sintassi è speculare a quella di children().

Un metodo simile a parent, ma da non confondere con questo, è parents() (notate la "s" finale).
Questo metodo ci permette di attuare un effetto a cascata del metodo parent(), ovvero di selezionare il genitore di un elemento, il genitore di quest'ultimo e così via.
Un piccolo esempio aiuterà a chiarirci le idee. Si supponga di avere un codice HTML del genere:

<ul class="livello-1">
  <li class="item-a">A</li>
  <li class="item-b">B
    <ul class="livello-2">
      <li class="item-x">X</li>
      <li class="item-y">Y</li>
      <li class="item-z">Z</li>
    </ul>
  </li>
  <li class="item-b">C</li>
</ul>

Ora si inserisca nella pagina questo codice jQuery:

$("li.item-x").parents("li").css("background-color", "red");

Con questo codice verranno colorati di rosso tutti gli elementi dell'elenco puntato cui appartiene l'elemento di partenza (item-x) e l'elemento padre (item-b).


next(), nextAll(), prev() e prevAll()
Questi metodi servono per selezionare l'elemento successivo a quello selezionato. Il primo metodo (next()) seleziona solamente il successivo elemento dello stesso livello gerarchico; il secondo metodo (nextAll()) invece seleziona tutti i successivi elementi, sempre dello stesso livello.

Specularmente jQuery mette a disposizione anche l'operazione inversa, ovvero i metodi prev() e prevAll(), con le medesime differenze viste sopra.
Per chiarirci meglio le idee vediamo un esempio di utilizzo del metodo next() (l'esempio vale anche per gli altri metodi indicati). Si supponga di avere il seguente elenco puntato:

<ul>
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li class="corrente">elemento 3</li>
  <li>elemento 4</li>
  <li>elemento 5</li>
</ul>

Ora si inserisca nella pagina questo codice jQuery:

$("li.corrente").next().css("background-color", "red");

Mediante questo codice verrà colorato di rosso l'elemento successivo a quello con classe "corrente", cioè l'elemento n.4 della lista. Se avessimo utilizzato il metodo nextAll() si sarebbe colorato anche l'elemento n.5 della lista.
Risultati speculari se avessimo ottenuto, rispettivamente, prev() e prevAll<().


siblings()
Questo metodo è complementare a quelli visti poco sopra in quanto ritorna tutti gli elementi dello stesso livello di quello preso in considerazione ad esclusione dell'elemento corrente.
Vediamo un esempio. Si prenda il medesimo elenco puntato visto per next(). Dopodichè si inserisca nella pagina questo codice jQuery:

$("li.corrente").siblings().css("background-color", "red");

Mediante queste istruzioni verrano colorati di rosso tutti gli elementi dello stesso livello (cioè tutti gli elementi della lista) ad eccezione dell'elemento con classe "corrente".

7. Manipolare gli elementi del DOM

Nelle lezioni precedenti abbiamo visto come si selezionano gli elementi desiderati in base a differenti criteri di ricerca. Ora, finalmente, passiamo a vedere cosa fare con questi elementi una volta selezionati.

Il questa lezione affronteremo l'argomento della manipolazione del DOM, ovvero l'inserimento di nuovi elementi in determinati punti del documento, la modifica di quelli esistenti e tutto quello che riguarda la gestione di una pagina html.

Partiamo subito con il mostrare come si gestisce il contenuto di un elemento della pagina.

html() e text()
Per prima cosa bisogna sapere che jQuery distingue (e gestisce diversamente) il codice HTML dal semplice testo. Il primo è il codice che otterremmo dalla funzione Javascript innerHTML(), il secondo invece è il contenuto depurato dall'HTML.

I metodi che consentono di recuperare, sotto forma di codice HTML o testo, il contenuto di un dato elemento della pagina sono html() e text().
Come accade spesso, jQuery utilizza lo stesso nome anche per i metodi contrari, ovvero i metodi che permettono di impostare un nuovo valore per l'elemento: questi metodi sono appunto html(codice_html) e text(stringa_di_testo).
Vediamo alcuni semplici esempi del loro utilizzo. Supponiamo di avere il seguente codice HTML:

<ul class="nomi">
  <li>Giovanni</li>
  <li>Luca</li>
  <li>Claudio</li>
</ul>

// recupero il contenuto dell'elenco con classe "nomi"
// il contenuto comprenderà i tag HTML
var codice = $("ul.nomi").php();

// recupero il contenuto depurato da tutti i tag HTML
// il contenuto sarà "Giovanni Luca Claudio"
var testo = $("ul.nomi").text();

Vediamo ora come assegnare un contenuto HTML ad un elemento della pagina

// assegno il codice HTML ad un DIV con classe "nuovo"
$("div.nuovo").php("<p>Questo è codice <b>HTML</b></p>");

attr()
Se invece del testo o del codice HTML vogliamo recuperare o impostare il valore di un attributo sono presenti due utili metodi: attr(nome_attributo) o attr(nome_attributo, valore).
Vediamo degli esempi:

// recupero il valore dell'attributo src dell'immagine con ID #foto
var fotourl = $("#foto").attr("src");

// imposto un nuovo valore per l'attributo alt della stessa immagine
$("#foto").attr("alt", "Una bella foto del tramonto!");

// imposto più attributi in un colpo solo
$("#foto").attr({
  alt: "Una bella foto del tramonto!",
  title: "foto di Mario Rossi"
});

val()

Per interagire con i valori degli elementi di un form (input, textarea, select,...) è presente il metodo val() che permette all'utente sia di recuperare che di impostare tali valori. Di seguito degli esempi:

// recupero il valore selezionato nella selectbox con ID #provincia
$("#provincia").val();

// imposto una valore per la stessa selectbox
$("#provincia").val("Milano");

// imposto un valore per un campo input con ID #nome
$("#nome").val("Mario");

addClass()
Mediante questo metodo è possibile aggiungere una classe ad un dato elemento o set di elementi. Questo metodo è specularea removeClass()> di cui parleremo più avanti in questa lezione.
Vediamo un semplice esempio:

// aggiungo due classi a tutti i paragrafi del documento
$("p").addClass("testopiccolo testoevidenziato");

Per adesso abbiamo solamente visto come lavorare con il contenuto degli elementi. Ora passiamo a vedere come si modifica realmente il DOM, ovvero come si effettuano operazioni di inserimento o di modifica degli elementi. Per prima cosa vediamo l'aggiunta di un nuovo elemento.

Aggiungere un nuovo elemento al DOM

I metodi utili per questa operazione differiscono in base alla posizione in cui si vuole inserire il nuovo elemento, rispetto ad uno già esistente.
Alcune delle possibili opzioni forniteci da jQuery sono le seguenti:

• before(): prima di un elemento;
• after(): dopo un elemento tramite;
• prepend(): al'inizio di un elemento;
• append(): alla fine di un elemento.

Vediamo un esempio dell'utilizzo di before().
Questo è la parte di pagina prima dell'applicazione del metodo.

<div class="categorie">
  <h1>Sport</h1>
  <div class="sub_cat">Calcio</div>
  <div class="sub_cat">Nuoto</div>
</div>

Aggiungiamo un paragrafo con la scritta "Test"

$(".sub_cat").before("<h2>Intestazione Sottocategorie</h2>");

Questo è il risultato ottenuto:

<div class="categorie">
  <h1>Sport</h1>
  <h2>Intestazione Sottocategorie</h2>
  <div class="sub_cat">Calcio</div>
  <h2>Intestazione Sottocategorie</h2>
  <div class="sub_cat">Nuoto</div>
</div>

Il funzionamento degli altri metodi citati è, ovviamente, il medesimo di before().

Eliminare attributi, classi o un intero elemento

Oltre all'aggiunta, ovviamente, è possibile anche effettuare l'operazione di eliminazione di un elemento o di una delle sue caratteristiche.
A tal proposito è presente una serie di metodi che permette appunto di rimuovere attributi, classi o anche tutto l'elemento selezionato.

• removeAttr(): rimuove l'attributo dall'elemento selezionato;
• removeClass(): rimuove la classe dall'elemento selezionato;
• remove(): rimuove l'elemento dal DOM.

Vediamo qualche semplice esempio:

// rimuovo l'attributo disabled da un campo input
$("input#nome").removeAttr("disabled");

// rimuovo una classe dall'elemento con ID #articolo
$("#articolo").removeClass("testopiccolo");

// spesso removeClass è utilizzata in combinazione con addClass
// ad esempio per effettuare qualche effetto su un bottone
$("#bottone").removeClasse("spento")
.addClass("attivo");

// rimuovo tutti gli elementi con classe .testo
$(".testo").remove();

Tramite opportune combinazioni dei metodi visti in questa lezione è possibile effettuare qualsiasi tipo di operazione all'interno del DOM.