Creazione di pseudo-selettori personalizzati
Imparare a registrare i propri pseudo-selettori personalizzati con jQuery.expr[':'] per semplificare la logica di selezione complessa degli elementi e migliorare la leggibilità del codice.
Creazione di pseudo-selettori personalizzati è 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.
Perché usare selettori personalizzati?
I selettori integrati di jQuery sono incredibilmente potenti, ma a volte è necessario applicare filtri specifici complessi o ripetitivi.
È qui che entrano in gioco i pseudo-selettori personalizzati! Consentono di definire filtri specializzati, semplificando la logica di selezione complessa e rendendo il codice più pulito e leggibile.
Quando i selettori predefiniti non bastano
Immagini di dover selezionare spesso tutti gli elementi <div> che non solo hanno una classe specifica, ma anche un attributo data-status impostato su 'active'.
Sebbene sia possibile combinare i selettori standard, il codice può diventare lungo e meno intuitivo se la logica è più complessa o se è necessario applicarla frequentemente nell'applicazione.
Conoscere jQuery.expr[':']
jQuery.expr[':'] è l'oggetto in cui si registrano i pseudo-selettori personalizzati. È come un'estensione del motore di selezione principale di jQuery.
Quando jQuery incontra un selettore come :myCustomSelector, cerca myCustomSelector in questo oggetto. Si assegna una funzione a una chiave (il nome del selettore), che jQuery esegue quindi per ogni elemento sottoposto a verifica.
Definire `:has-tooltip`
Definiamo un semplice selettore personalizzato, :has-tooltip, che identifica gli elementi con un attributo title. Ecco come aggiungerlo a jQuery.expr[':'].
La funzione fornita riceve l'elemento DOM corrente elem sottoposto a verifica. Deve restituire true se l'elemento soddisfa i criteri e false in caso contrario.
jQuery.expr[':'].hasTooltip = function(elem) {
// Check if the element has a 'title' attribute
return !!$(elem).attr('title');
};Usare il selettore personalizzato
Ora che il selettore :has-tooltip è definito, possiamo usarlo come qualsiasi altro pseudo-selettore jQuery! Provi a eseguire l'esempio seguente.
Verranno evidenziati tutti gli elementi che hanno un attributo title, mostrando la potenza del nuovo filtro personalizzato.
<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.highlight {
border: 2px solid green;
background-color: #e0ffe0;
}
</style>
</head>
<body>
<p title="This is a tooltip">Paragraph with tooltip</p>
<div id="no-tooltip">Just a div</div>
<span title="Another tooltip here">Span with tooltip</span>
<script>
jQuery.expr[':'].hasTooltip = function(elem) {
return !!$(elem).attr('title');
};
$(document).ready(function() {
$('p:has-tooltip, span:has-tooltip').addClass('highlight');
});
</script>
</body>
</html>Gli argomenti `elem`, `i` e `match`
Quando viene eseguita la funzione del selettore personalizzato, riceve tre argomenti importanti:
elem: l'elemento DOM corrente sottoposto a verifica.i: l'indice dielemall'interno dell'insieme di elementi su cui jQuery sta iterando.match: un array contenente i risultati dell'espressione regolare usata per analizzare il selettore. È essenziale per i selettori che accettano argomenti.
Per i selettori semplici, utilizzerà principalmente l'argomento elem.
Selettore basato sugli attributi dei dati
Creiamo un selettore :data-status(active) per trovare gli elementi in cui un attributo data-status è uguale a 'active'. Questo mostra come usare l'argomento match.
Il valore 'active' (l'argomento tra parentesi) si trova in match[3]. In questo modo il selettore può essere dinamico!
<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.active-item {
background-color: lightgreen;
padding: 5px;
margin: 3px;
}
</style>
</head>
<body>
<div data-status="active">Item 1 (Active)</div>
<div data-status="inactive">Item 2 (Inactive)</div>
<p data-status="active">Item 3 (Active)</p>
<span>Item 4 (No Status)</span>
<script>
jQuery.expr[':'].dataStatus = function(elem, i, match) {
const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
const actualStatus = $(elem).data('status');
return actualStatus === expectedStatus;
};
$(document).ready(function() {
$(':data-status(active)').addClass('active-item');
});
</script>
</body>
</html>Comprendere `match[3]`
L'array match è il risultato dell'analisi interna della stringa del selettore tramite le espressioni regolari di jQuery. Per un selettore come :yourSelector(argument), la parte argument viene in genere catturata in match[3].
Questo meccanismo è fondamentale per creare selettori personalizzati dinamici e flessibili che accettano parametri, rendendoli più riutilizzabili e potenti in diversi scenari di filtraggio.
Logica avanzata: `:containsExact`
Creiamo un selettore più avanzato: :containsExact(text). A differenza del selettore predefinito :contains() di jQuery, questo selezionerà solo gli elementi il cui contenuto testuale *completo* (escludendo gli elementi figli) corrisponde esattamente al testo fornito.
Spesso è necessario confrontare con attenzione $(elem).text().trim() per garantire una corrispondenza esatta.
<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.exact-match {
font-weight: bold;
color: blue;
background-color: #e0f0ff;
padding: 5px;
margin: 3px;
}
</style>
</head>
<body>
<div>Hello World</div>
<div>Hello there!</div>
<p>Hello</p>
<span>World</span>
<script>
jQuery.expr[':'].containsExact = function(elem, i, match) {
const searchText = match[3]; // The text inside the parentheses
const elementText = $(elem).text().trim();
return elementText === searchText;
};
$(document).ready(function() {
$(':containsExact(Hello World)').addClass('exact-match');
});
</script>
</body>
</html>Suggerimenti per i selettori personalizzati
Quando crea i Suoi selettori personalizzati, tenga presenti queste buone pratiche:
- Prestazioni: una logica complessa può influire sulle prestazioni, soprattutto con DOM di grandi dimensioni. Ottimizzi le funzioni dei selettori.
- Chiarezza: assegni nomi chiari ai selettori, in modo che il loro scopo sia immediatamente evidente a chiunque legga il codice.
- Riutilizzabilità: li progetti in modo abbastanza generico da poter essere utili in diversi contesti, non solo in uno scenario specifico.
- Eviti i conflitti: scelga nomi univoci per evitare conflitti con futuri selettori jQuery o con altri plugin che potrebbe utilizzare.
Sfida sui selettori personalizzati
Desidera creare un selettore personalizzato :is-empty che selezioni gli elementi privi di contenuto testuale e di elementi figli. È simile al selettore integrato :empty di jQuery.
Quale dei seguenti frammenti di codice definisce correttamente questo pseudo-selettore personalizzato?
Riepilogo: selettori personalizzati
In questa lezione ha imparato a estendere le potenti funzionalità di selezione di jQuery creando pseudo-selettori personalizzati tramite jQuery.expr[':'].
Ha visto come definire selettori semplici, passarvi argomenti tramite l'array match e applicarli per semplificare una logica di filtraggio complessa, rendendo infine il codice jQuery più leggibile, manutenibile ed efficiente.
Domande Frequenti
La lezione «Creazione di pseudo-selettori personalizzati» è gratuita?
Sì — il testo completo di «Creazione di pseudo-selettori personalizzati» è 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 «Creazione di pseudo-selettori personalizzati»?
Imparare a registrare i propri pseudo-selettori personalizzati con jQuery.expr[':'] per semplificare la logica di selezione complessa degli elementi e migliorare la leggibilità del codice. 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 «Creazione di pseudo-selettori personalizzati»?
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
- Creazione di pseudo-selettori personalizzati
- Filtraggio avanzato con .filter()
- Esclusione degli elementi con .not()