jQuery -Selektoren
jQuery-Selektoren sind einer der wichtigsten Teile der jQuery-Bibliothek.
jQuery-Selektoren
Mit jQuery-Selektoren können Sie HTML-Elemente auswählen und bearbeiten.
jQuery-Selektoren werden verwendet, um HTML-Elemente basierend auf ihrem Namen, ihrer ID, ihren Klassen, Typen, Attributen, Werten von Attributen und vielem mehr zu „finden“ (oder auszuwählen). Es basiert auf den vorhandenen CSS-Selektoren und verfügt zusätzlich über einige eigene benutzerdefinierte Selektoren.
Alle Selektoren in jQuery beginnen mit dem Dollarzeichen und Klammern: $().
Der Elementselektor
Der jQuery-Elementselektor wählt Elemente basierend auf dem Elementnamen aus.
<p>Sie können alle Elemente auf einer Seite wie folgt auswählen :
$("p")
Beispiel
Wenn ein Benutzer auf eine Schaltfläche klickt, werden alle <p>Elemente ausgeblendet:
Beispiel
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Der #id-Selektor
Der jQuery -Selektor verwendet das id-Attribut eines HTML-Tags, um das spezifische Element zu finden.#id
Eine ID sollte innerhalb einer Seite eindeutig sein, daher sollten Sie den #id-Selektor verwenden, wenn Sie ein einzelnes, eindeutiges Element finden möchten.
Um ein Element mit einer bestimmten ID zu finden, schreiben Sie ein Hash-Zeichen, gefolgt von der ID des HTML-Elements:
$("#test")
Beispiel
Wenn ein Benutzer auf eine Schaltfläche klickt, wird das Element mit id="test" ausgeblendet:
Beispiel
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Der .class-Selektor
Der jQuery .class-Selektor findet Elemente mit einer bestimmten Klasse.
Um Elemente mit einer bestimmten Klasse zu finden, schreiben Sie einen Punkt, gefolgt vom Namen der Klasse:
$(".test")
Beispiel
Wenn ein Benutzer auf eine Schaltfläche klickt, werden die Elemente mit class="test" ausgeblendet:
Beispiel
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Weitere Beispiele für jQuery-Selektoren
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Verwenden Sie unseren jQuery Selector Tester , um die verschiedenen Selektoren zu demonstrieren.
Eine vollständige Referenz aller jQuery-Selektoren finden Sie in unserer jQuery-Selektoren-Referenz .
Funktionen in einer separaten Datei
Wenn Ihre Website viele Seiten enthält und Sie möchten, dass Ihre jQuery-Funktionen einfach zu warten sind, können Sie Ihre jQuery-Funktionen in einer separaten .js-Datei speichern.
Wenn wir in diesem Tutorial jQuery demonstrieren, werden die Funktionen direkt in den <head>
Abschnitt eingefügt. Manchmal ist es jedoch vorzuziehen, sie wie folgt in einer separaten Datei zu platzieren (verwenden Sie das src-Attribut, um auf die .js-Datei zu verweisen):
Beispiel
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>