jQuery

Selettori jQuery : come accedere agli elementi del DOM facilmente

jQuery

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.

Selettori jQuery : come accedere agli elementi del DOM facilmente
Vota questo articolo

Articoli simili

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.