jQuery offre un modo semplice e potente per selezionare e manipolare gli elementi del DOM di una pagina web tramite i suoi selettori. Questa guida aggiornata espande i concetti base con esempi pratici, selettori avanzati e codice pronto all’uso per migliorare le tue applicazioni web.

Selettori Base

I selettori di jQuery si basano sulla sintassi CSS e usano la funzione $() per targeting preciso degli elementi HTML.

• $( 'p' ): Seleziona tutti i tag <p>.
• $( 'div' ): Seleziona tutti i tag <div>.
• $( '.mia-classe' ): Seleziona elementi con classe “mia-classe”.
• $( '#mio-id' ): Seleziona l’elemento con ID “mio-id”.

Esempio pratico: cambia il colore di tutti i paragrafi.

Selettori Avanzati

jQuery supporta selettori complessi per scenari reali, come gerarchie o attributi.

• $( 'div p.mia-classe' ): Seleziona <p> con classe “mia-classe” dentro <div>.
• $( 'input[type="text"]' ): Seleziona input di tipo testo.
• $( 'ul > li' ): Seleziona <li> figli diretti di <ul>.
• $( '.classe:not(.altra-classe)' ): Esclude elementi con classe extra.

Per contare elementi: $( 'a' ).length restituisce il numero di link.

Esempi Pratici

Applica stili o eventi a elementi selezionati per interattività dinamica.

Nascondi paragrafi al click:

$('p').click(function() {
   $(this).hide();
});

Aggiungi classe attiva a un menu:

$('#menu li').click(function() {
    $(this).addClass('attivo').siblings().removeClass('attivo');
});

Filtra elementi per attributo:

('a[href^="https"]').attr('target', '_blank');  // Link esterni in nuova tab

Metodi Comuni per Manipolazione

Dopo la selezione, usa questi metodi per agire sugli elementi.

Esegui sempre il codice dentro $(document).ready() per attendere il caricamento del DOM.