Selettori avanzati per attributi
Esplorare selettori complessi per attributi e individuare gli elementi in base alla presenza, al valore o alle corrispondenze parziali degli attributi, migliorando la precisione della selezione.
Selettori avanzati per attributi è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Salve, selettori di attributo!
Benvenuto in un modo potente per selezionare gli elementi in jQuery! Approfondiremo i selettori di attributo, che consentono di scegliere gli elementi in base ai loro attributi HTML.
Pensi agli attributi come a dati aggiuntivi associati a un tag HTML, come id, class, href, data-* e altri.
Selezione in base alla presenza dell'attributo
Il selettore di attributo più semplice trova gli elementi che possiedono un attributo specifico, indipendentemente dal suo valore. Si scrive come [attributeName].
È molto utile quando occorre solo sapere se un attributo esiste in un elemento. Ad esempio, $('[title]') trova tutti gli elementi con un attributo title.
Provi: presenza dell'attributo
Utilizziamo il selettore di presenza per trovare tutti gli elementi che hanno un attributo title e visualizzarne i nomi dei tag.
<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
$(document).ready(function() {
$('[title]').each(function(index, element) {
$('#output').append('<p>Found: <' + $(element).prop('tagName').toLowerCase() + '> with title="' + $(element).attr('title') + '"</p>');
});
});
</script>Corrispondenza dei valori esatti degli attributi
Per selezionare gli elementi in cui un attributo ha un valore esatto, utilizzi [attributeName="value"].
Questo selettore è preciso! Corrisponderà solo se il valore dell'attributo è identico a quello specificato, incluse le maiuscole e le minuscole (la corrispondenza dei valori degli attributi in jQuery distingue tra maiuscole e minuscole).
Corrispondenza esatta in azione
Trovi gli elementi con un attributo data-type che sia esattamente "primary".
<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('[data-type="primary"]').each(function(index, element) {
$('#output').append('<p>Exact match: <' + $(element).prop('tagName').toLowerCase() + '> (Type: ' + $(element).data('type') + ')</p>');
});
});
</script>Valori degli attributi che iniziano con...
Il selettore [attributeName^="value"] trova gli elementi in cui il valore di un attributo inizia con una stringa specifica.
- È utile per raggruppare elementi con convenzioni di denominazione simili.
- È ideale per filtrare i collegamenti, ad esempio tutti quelli che iniziano con
/products.
Valori che terminano con e contengono
Questi selettori offrono maggiore flessibilità per le corrispondenze parziali:
[attributeName$="value"]: corrisponde se il valore dell'attributo termina con la stringa specificata.[attributeName*="value"]: corrisponde se il valore dell'attributo contiene la stringa specificata in qualsiasi posizione.
Demo interattiva: corrispondenze parziali
Osservi come ^=, $= e *= individuano elementi diversi in base ai valori parziali degli attributi href.
<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#output').append('<h3>Starts with "/products":</h3>');
$('[href^="/products"]').each(function() {
$('#output').append('<p>' + $(this).text() + '</p>');
});
$('#output').append('<h3>Ends with "contact":</h3>');
$('[href$="contact"]').each(function() {
$('#output').append('<p>' + $(this).text() + '</p>');
});
$('#output').append('<h3>Contains "item":</h3>');
$('[href*="item"]').each(function() {
$('#output').append('<p>' + $(this).text() + '</p>');
});
});
</script>Selettori di parole e trattini
Altri due selettori specializzati:
[attributeName~="value"]: corrisponde se il valore dell'attributo contiene una specifica parola delimitata da spazi. Viene utilizzato spesso con gli attributiclass.[attributeName|="value"]: corrisponde se il valore dell'attributo è esattamente"value"oppure inizia con"value-"seguito da un trattino. Viene utilizzato comunemente per i codici di lingua, comelang="en-US".
Verifica rapida: selettori
Quale selettore o quali selettori jQuery identificherebbero correttamente l'elemento <div> riportato di seguito?
<div class="card active-item" data-role="admin-panel" lang="en-US">
Admin Area
</div>Riepilogo: selettori di attributo
Ottimo lavoro! Ha acquisito padronanza dei selettori di attributo avanzati:
[attr]: verifica la presenza dell'attributo.[attr="val"]: corrisponde ai valori esatti.[attr^="val"]: corrisponde ai valori che iniziano con.[attr$="val"]: corrisponde ai valori che terminano con.[attr*="val"]: corrisponde ai valori che contengono.[attr~="val"]: corrisponde ai valori che contengono una parola separata da spazi.[attr|="val"]: corrisponde ai valori esatti o a quelli che iniziano con 'val-'.
Utilizzi questi selettori per scrivere codice jQuery estremamente preciso ed efficiente!
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 48
Domande Frequenti
La lezione «Selettori avanzati per attributi» è gratuita?
Sì — il testo completo di «Selettori avanzati per attributi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Selettori avanzati per attributi»?
Esplorare selettori complessi per attributi e individuare gli elementi in base alla presenza, al valore o alle corrispondenze parziali degli attributi, migliorando la precisione della selezione. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.
Quanto tempo richiede la lezione «Selettori avanzati per attributi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Selettori avanzati per attributi
- Pseudo-classi e selettori personalizzati
- Tecniche efficienti di attraversamento del DOM