GUIDE PER ASPIRANTI PROGRAMMATORI
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…
Lezione 8 / 36
Vuoi avviare una nuova carriera o fare un upgrade?
Trova il corso Digital & Tech più adatto a te nel nostro catalogo!
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
Sei indeciso sul percorso? 💭
Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.
CONTENUTI GRATUITI IN EVIDENZA
Guide per aspiranti programmatori 👨🏻🚀
Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.
