CONTATTACI

Guide per aspiranti programmatori

Sviluppatrice seduta a gambe incrociate accanto ad un enorme etichetta
Lezione 8 / 36

Selezionare per attributi in jQuery

La selezione di elementi basata sugli attributi è una delle caratteristiche più potenti di jQuery, poiché permette di individuare elementi nel DOM in base a specifici attributi e loro valori. 

Questo tipo di selezione è estremamente utile in una varietà di contesti, da formulari a elementi interattivi. In questa sede, esploreremo i diversi tipi di selettori di attributi in jQuery e come utilizzarli, fornendo esempi pratici per illustrare il loro uso.

NB. ricordiamo che la sintassi generale per selezionare tramite attributi in jQuery è la seguente:

$("[attributo='valore']")

Questo selettore troverà tutti gli elementi che hanno un attributo specifico con un determinato valore.

Ciò detto, ribadiamo che jQuery fornisce diversi modi per selezionare elementi basandosi sugli attributi; scopriamoli insieme!

 

Selettore esatto

Il selettore esatto in jQuery seleziona elementi che hanno un attributo con un valore esatto.

$("input[type='text']")

Questo esempio seleziona tutti gli input di tipo testo.

 

Selettore che contiene un valore

Questo selettore seleziona elementi il cui attributo contiene un certo valore.

$("[class*='test']")

Questo troverà tutti gli elementi che hanno una classe contenente la parola “test”.

 

Selettore che inizia con un valore

Questo selettore seleziona elementi con attributi che iniziano con un valore specifico.

$("input[name^='user']")

Seleziona tutti gli input il cui nome inizia con “user”.

 

Selettore che finisce con un valore 

Questo selettore trova elementi con attributi che terminano con un certo valore.

$("[id$='icon']")

Seleziona tutti gli elementi con un ID che termina in “icon”.

 

Selettore che seleziona elementi con un attributo specifico

Questo selettore, indipendentemente dal valore, seleziona elementi che hanno un determinato attributo.

$("[disabled]")

Questo esempio seleziona tutti gli elementi che sono disabilitati.

 

Come utilizzare i vari tipi di selettori di attributi in jQuery: esempio pratico

Ecco un esempio pratico che mostra come utilizzare i vari tipi di selettori di attributi in jQuery. Creeremo un semplice snippet di codice HTML con diversi elementi e poi applicheremo diversi selettori jQuery per manipolare questi elementi.

<!DOCTYPE html>
<html>
<head>
    <title>Esempio Selettori di Attributi jQuery</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <input type="text" name="username" placeholder="Nome utente">
    <input type="text" name="useremail" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <div id="alert-icon" class="icon round-test">Icona di avviso</div>
    <button type="submit" disabled>Invia</button>

    <script>
        // Il tuo codice jQuery va qui
    </script>
</body>
</html>

Il seguente codice jQuery verrà inserito all’interno del tag <script> alla fine del corpo del documento.

$(document).ready(function() {
    // Selettore Esatto: Cambia il colore di bordo degli input di tipo testo
    $("input[type='text']").css("border", "2px solid green");

    // Selettore che Contiene un Valore: Aggiunge un bordo a tutti gli elementi con una classe che contiene 'test'
    $("[class*='test']").css("border", "3px dashed red");

    // Selettore che Inizia con un Valore: Aggiunge sfondo giallo a tutti gli input il cui nome inizia con 'user'
    $("input[name^='user']").css("background-color", "yellow");

    // Selettore che Finisce con un Valore: Aggiunge padding agli elementi con un ID che termina in 'icon'
    $("[id$='icon']").css("padding", "10px");

    // Selettore che Seleziona Elementi con un Attributo Specifico: Cambia il testo dei bottoni disabilitati
    $("[disabled]").text("Non disponibile");
});

Descrizione del Codice

  • Selettore Esatto: Cambia il colore del bordo degli input di tipo testo in verde.
  • Selettore che Contiene un Valore: Aggiunge un bordo rosso tratteggiato a tutti gli elementi che hanno una classe contenente la parola “test”.
  • Selettore che Inizia con un Valore: Applica uno sfondo giallo a tutti gli input il cui name inizia con “user”.
  • Selettore che Finisce con un Valore: Aggiunge un padding di 10px a tutti gli elementi con un ID che termina in “icon”.
  • Selettore che Seleziona Elementi con un Attributo Specifico: Cambia il testo dei bottoni disabilitati in “Non disponibile”.

Risultato

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.