Il DOM, ovvero il Document Object Model, come ripetuto più volte, può contenere centinaia di elementi di varie tipologie, ma spesso é necessario accedere e selezionare uno o più elementi in modo semplice e veloce.
I selettori di jQuery, per questo, non hanno decisamente rivali.
Premettiamo, che selezionare e manipolare un elemento in jQuery é decisamente facile :
Ad esempio, per accedere ad un elemento univoco tramite ID :
$(‘#myid’).css(‘color’,’white’);
oppure per accedere a tutti gli elementi che hanno in comune la stessa classe :
$(‘.myclass’).css(‘font-weight’,’bold’);
oppure per accedere a tutti gli elenchi puntati
$(‘ul’).css(‘margin-top’,’40px’);
e così via.
Questo, in ogni caso, non è sufficiente per una soluzione veloce e snella soprattutto quando vogliamo selezionare ‘figli’ o ‘fratelli’ dei vari elementi senza dover scrivere righe di codice inutili.
Per fortuna, jQuery offre delle soluzioni facili tramite i suoi selettori. Vediamo quelli più utili e importanti.
Child
Volendo selezionare ed accedere agli elementi “figli” di un oggetto del DOM, ecco come jQuery ci consente di risolvere il problema. Supponiamo, come esempio, di voler accedere a tutti gli elementi <p> di un div con id univoco myid (#mydiv)
Ecco quale sarebbe il codice:
$(‘#mydiv > p’).css(‘margin’,’40px’);
Ma non è tutto perché, jQuery consente anche di selezionare tutti i figli di un elemento indipendentemente dal tipo. Tutto semplicemente con una sintassi del tipo :
$(‘ul > *’).css(…)
Descendant
Tecnica più semplice di quella appena vista perché permette di accedere direttamente al discendente di un elemento del DOM :
$(‘div p’).css(‘margin’,’40px’);
Siblings
Dopo aver visto la situazione ‘padre/figli’, passiamo a quella che riguarda ‘elemento/fratelli’. Fondamentalmente, le regole sono identiche e cambia solo il carattere speciale che, in questo caso, è il carattere ~
Esempio :
< div id=”myid” >
< h1 >titolo < /h1 >
< p id=”one”> paragrafo 1 < /p >
< p id=”two” > paragrafo 2 < / p >
< span > Prova< /span >
< / div >
e
$(‘h1 ~ span’); selezionerà l’elemento span che è allo stesso livello del tag h1
mentre
$(‘h1 ~ *’); selezionerà tutti gli elementi/fratelli (ovvero allo stesso livello) del tag h1 ovvero i due p (con id one e two) e span
Next
Ultima, ma non meno importante tecnica é quella del next per accedere a tutti gli elementi che sono successori dell’elemento specifico. Qualcuno parla di elementi adiacenti, ma sostanzialmente il concetto non cambia. Restando all’esempio di prima, volendo accedere all’elemento p con id pari a one potrete usare il carattere speciale +.
$(‘h1+p’);
Logicamente, da questa selezione, resta fuori l’elemento p con id pari a two.
