Benutzerdefinierte Pseudo-Selektoren erstellen
Lernen Sie, mit jQuery.expr[':'] eigene benutzerdefinierte Pseudo-Selektoren zu registrieren, um komplexe Logik zur Elementauswahl zu vereinfachen und die Lesbarkeit des Codes zu verbessern.
Benutzerdefinierte Pseudo-Selektoren erstellen ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum benutzerdefinierte Selektoren?
Die integrierten Selektoren von jQuery sind äußerst leistungsfähig. Manchmal müssen Sie jedoch bestimmte Filteranforderungen erfüllen, die komplex oder wiederkehrend sind.
Hier kommen benutzerdefinierte Pseudo-Selektoren ins Spiel! Sie ermöglichen es Ihnen, eigene spezialisierte Filter zu definieren. Dadurch wird komplexe Auswahl-Logik vereinfacht und Ihr Code übersichtlicher und besser lesbar.
Wenn Standardselektoren nicht ausreichen
Stellen Sie sich vor, Sie müssen häufig alle <div>-Elemente auswählen, die nicht nur eine bestimmte Klasse besitzen, sondern auch ein data-status-Attribut mit dem Wert 'active' haben.
Sie können zwar Standardselektoren kombinieren, aber bei komplexerer Logik oder häufiger Verwendung in Ihrer Anwendung kann dies lang und weniger intuitiv werden.
jQuery.expr[':'] kennenlernen
jQuery.expr[':'] ist das Objekt, in dem Sie Ihre benutzerdefinierten Pseudo-Selektoren registrieren. Sie können es sich als Erweiterung der zentralen Auswahl-Engine von jQuery vorstellen.
Wenn jQuery auf einen Selektor wie :myCustomSelector stößt, sucht es myCustomSelector in diesem Objekt. Sie weisen einem Schlüssel (dem Namen Ihres Selektors) eine Funktion zu, die jQuery anschließend für jedes geprüfte Element ausführt.
`:has-tooltip` definieren
Definieren wir einen einfachen benutzerdefinierten Selektor, :has-tooltip, der Elemente mit einem title-Attribut erkennt. So fügen Sie ihn zu jQuery.expr[':'] hinzu.
Die von Ihnen bereitgestellte Funktion erhält das aktuelle geprüfte DOM-elem. Sie sollte true zurückgeben, wenn das Element Ihren Kriterien entspricht, andernfalls false.
jQuery.expr[':'].hasTooltip = function(elem) {
// Check if the element has a 'title' attribute
return !!$(elem).attr('title');
};Ihren benutzerdefinierten Selektor verwenden
Nachdem der Selektor :has-tooltip definiert ist, können Sie ihn wie jeden anderen jQuery-Pseudo-Selektor verwenden! Versuchen Sie, das folgende Beispiel auszuführen.
Es hebt alle Elemente mit einem title-Attribut hervor und zeigt damit die Leistungsfähigkeit Ihres neuen benutzerdefinierten Filters.
<!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>Die Argumente `elem`, `i` und `match`
Beim Ausführen Ihrer benutzerdefinierten Selektorfunktion erhält diese drei wichtige Argumente:
elem: Das aktuell geprüfte DOM-Element.i: Der Index voneleminnerhalb der Menge von Elementen, die jQuery gerade durchläuft.match: Ein Array mit den Ergebnissen des regulären Ausdrucks, der zum Analysieren des Selektors verwendet wird. Dies ist für Selektoren, die Argumente akzeptieren, unerlässlich.
Bei einfachen Selektoren verwenden Sie hauptsächlich das Argument elem.
Selektor anhand von Datenattributen
Erstellen wir einen Selektor :data-status(active), um Elemente zu finden, deren data-status-Attribut den Wert 'active' hat. Dies zeigt, wie Sie das Argument match verwenden.
Der Wert 'active' (das Argument innerhalb der Klammern) befindet sich in match[3]. Dadurch wird Ihr Selektor dynamisch!
<!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>`match[3]` verstehen
Das match-Array ist ein Ergebnis der internen Verarbeitung Ihres Selektor-Strings durch den regulären Ausdruck von jQuery. Bei einem Selektor wie :yourSelector(argument) wird der Teil argument typischerweise in match[3] erfasst.
Dieser Mechanismus ist entscheidend, um dynamische und flexible benutzerdefinierte Selektoren zu erstellen, die Parameter akzeptieren können. Dadurch lassen sie sich in verschiedenen Filterszenarien wiederverwenden und sind leistungsfähiger.
Erweiterte Logik: `:containsExact`
Erstellen wir einen erweiterten Selektor: :containsExact(text). Anders als jQuerys standardmäßiger Selektor :contains() findet dieser nur Elemente, deren gesamter Textinhalt (ohne untergeordnete Elemente) exakt dem angegebenen Text entspricht.
Dazu wird häufig $(elem).text().trim() sorgfältig verglichen, um eine exakte Übereinstimmung sicherzustellen.
<!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>Tipps für benutzerdefinierte Selektoren
Beachten Sie beim Erstellen eigener Selektoren die folgenden bewährten Vorgehensweisen:
- Performance: Komplexe Logik kann die Performance beeinträchtigen, insbesondere bei großen DOMs. Optimieren Sie Ihre Selektorfunktionen.
- Übersichtlichkeit: Benennen Sie Ihre Selektoren eindeutig, damit ihr Zweck für alle, die Ihren Code lesen, sofort ersichtlich ist.
- Wiederverwendbarkeit: Gestalten Sie sie so allgemein, dass sie in verschiedenen Kontexten nützlich sind und nicht nur in einem bestimmten Szenario.
- Konflikte vermeiden: Wählen Sie eindeutige Namen, um Kollisionen mit zukünftigen jQuery-Selektoren oder anderen von Ihnen verwendeten Plugins zu verhindern.
Herausforderung: Benutzerdefinierter Selektor
Sie möchten einen benutzerdefinierten Selektor :is-empty erstellen, der Elemente auswählt, die weder Textinhalt noch untergeordnete Elemente besitzen. Dies ähnelt jQuerys integriertem Selektor :empty.
Welche der folgenden Code-Ausschnitte definiert diesen benutzerdefinierten Pseudo-Selektor korrekt?
Zusammenfassung: Benutzerdefinierte Selektoren
In dieser Lektion haben Sie gelernt, wie Sie jQuerys leistungsfähige Auswahlmöglichkeiten erweitern, indem Sie mit jQuery.expr[':'] eigene benutzerdefinierte Pseudo-Selektoren erstellen.
Sie haben untersucht, wie einfache Selektoren definiert werden, wie ihnen über das match-Array Argumente übergeben werden und wie sie zur Vereinfachung komplexer Filterlogik eingesetzt werden. Dadurch wird Ihr jQuery-Code lesbarer, wartbarer und effizienter.
Häufig gestellte Fragen
Ist die Lektion „Benutzerdefinierte Pseudo-Selektoren erstellen“ kostenlos?
Ja — der vollständige Text von „Benutzerdefinierte Pseudo-Selektoren erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Benutzerdefinierte Pseudo-Selektoren erstellen“?
Lernen Sie, mit jQuery.expr[':'] eigene benutzerdefinierte Pseudo-Selektoren zu registrieren, um komplexe Logik zur Elementauswahl zu vereinfachen und die Lesbarkeit des Codes zu verbessern. Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.
Wie lange dauert die Lektion „Benutzerdefinierte Pseudo-Selektoren erstellen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Benutzerdefinierte Pseudo-Selektoren erstellen
- Erweitertes Filtern mit .filter()
- Elemente mit .not() ausschließen