Detaillierte Erklärung des JQuery-Selektors

Inhaltsverzeichnis

Grundlegende Selektoren:
Ebenenauswahl:
Attributselektoren:
Filterauswahl:
Formularattributselektoren:
Zusammenfassen

Der Selektor ähnelt dem CSS-Selektor und kann uns helfen, das Element zu erhalten

Grundlegende Selektoren:

Selektor: Ähnlich wie der CSS-Selektor kann er uns dabei helfen, Elemente zu erhalten.
Zum Beispiel: ID-Selektor, Klassenselektor, Elementselektor, Attributselektor usw.
Die Syntax des Selektors in jQuery: $();

Bildbeschreibung hier einfügen

Code-Implementierung:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Einfacher Selektor</title>
</Kopf>
<Text>
    <div id="div1">div1</div>
    <div Klasse="cls">div2</div>
    <div Klasse="cls">div3</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<Skript>
    //1. Elementselektor $("Elementname")
    divs = $("div");
    //alarm(divs.Länge);
    //2.id-Selektor $("#id's Attributwert")
    lass div1 = $("#div1");
    //alarm(div1);
    //3. Klassenselektor $(".class attribute value")
    Lassen Sie cls = $(".cls");
    Alarm (cls.Länge);
</Skript>
</html>

Ebenenauswahl:

Bildbeschreibung hier einfügen

Code-Implementierung:

<Text>
<div>
        <span>s1
            <span>s1-1</span>
            <span>S1-2</span>
        </span>
    <span>s2</span>
</div>
<div></div>
<p>p1</p>
<p>p2</p>
</body>
<script src="jquery-3.3.1.min.js"></script>
<Skript>
    // 1. Nachkommenselektor $("AB"); alle B unter A (einschließlich der Kinder von B)
    Lassen Sie spans1 = $("div span");
    // Alarm (spans1.length);
    // 2. Kindselektor $("A > B"); alle B unter A (außer den Kindern von B)
    Lassen Sie spans2 = $("div > span");
    // Alarm (spans2.length);
    // 3. Brother-Selektor $("A + B"); das nächste B neben A
    sei ps1 = $("div + p");
    // Alarm (ps1.Länge);
    // 4. Brother-Selektor $("A ~ B"); alle B neben A
    lass ps2 = $("div ~ p");
    Alarm (ps2.Länge);
</Skript>

Attributselektoren:

Bildbeschreibung hier einfügen

Code-Implementierung:

<Text>
<Eingabetyp="Text">
<input type="Passwort">
<input type="Passwort">
</body>
<script src="jquery-3.3.1.min.js"></script>
<Skript>
    //1. Attributnamen-Selektor $("element [attribute name]")
    let in1 = $("Eingabe[Typ]");
    //alarm(in1.Länge);
    //2. Attributwert-Selektor $("element [Attributname = Attributwert]")
    let in2 = $("Eingabe[Typ='Passwort']");
    Alarm (in2.Länge);
</Skript>

Filterauswahl:

Bildbeschreibung hier einfügen

Code-Implementierung

<Text>
<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>
<div>div4</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<Skript>
    // 1. Erster Elementselektor $("A:first");
    lass div1 = $("div:erstes");
    //alarm(div1.html());
    // 2. Tail-Element-Selektor $("A:last");
    lass div4 = $("div:letztes");
    //alarm(div4.html());
    // 3. Nicht-Element-Selektor $("A:not(B)");
    lass divs1 = $("div:nicht(#div2)");
    //alarm(divs1.length);
    // 4. Gerader Selektor $("A:even");
    Lassen Sie divs2 = $("div:even");
    //alarm(divs2.length);
    //alarm(divs2[0].innerHTML);
    //alarm(divs2[1].innerHTML);
    // 5. Selektor für ungerade Zahlen $("A:odd");
    lass divs3 = $("div:odd");
    //alarm(divs3.length);
    //alarm(divs3[0].innerHTML);
    //alarm(divs3[1].innerHTML);
    // 6. Gleicher Indexselektor $("A:eq(index)");
    lass div3 = $("div:eq(2)");
    //alarm(div3.html());
    // 7. Größer als Index-Selektor $("A:gt(index)");
    lass divs4 = $("div:gt(1)");
    //alarm(divs4.length);
    //alarm(divs4[0].innerHTML);
    //alarm(divs4[1].innerHTML);
    // 8. Kleiner als Index-Selektor $("A:lt(index)");
    Lassen Sie divs5 = $("div:lt(2)");
    Alarm (divs5.Länge);
    Alarm(divs5[0].innerHTML);
    Warnung(divs5[1].innerHTML);
</Skript>

Formularattributselektoren:

Bildbeschreibung hier einfügen

Code-Implementierung:

<Text>
    <Eingabetyp="Text" deaktiviert>
    <Eingabetyp="Text" >
    <input type="radio" name="gender" value="men" selected>Männlich<input type="radio" name="gender" value="women">Weiblich<input type="checkbox" name="hobby" value="study" selected>Studium<input type="checkbox" name="hobby" value="sleep" selected>Schlafen<select>
        <option>---Bitte wählen---</option>
        <Option ausgewählt>Bachelor</Option>
        <option>Diplom</option>
    </Auswählen>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<Skript>
    // 1. Verfügbarer Elementselektor $("A:enabled");
    let ins1 = $("Eingabe:aktiviert");
    //alarm(ins1.Länge);
    // 2. Nicht verfügbarer Elementselektor $("A:disabled");
    let ins2 = $("Eingabe:deaktiviert");
    //alarm(ins2.Länge);
    // 3. Radio/Kontrollkästchen ausgewähltes Element $("A:checked");
    let ins3 = $("Eingabe: geprüft");
    //alarm(ins3.length);
    //alarm(ins3[0].Wert);
    //alarm(ins3[1].Wert);
    //alarm(ins3[2].Wert);
    // 4. Das im Dropdown-Feld ausgewählte Element $("A:selected");
    let select = $("Auswahloption:ausgewählt");
    alarm(select.html());
</Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:

Einführung in die Verwendung von jQuery-Selektoren
Detaillierte Erläuterung des Anwendungsbeispiels für den JQuery-Tag-Selektor
jQuery implementiert einen Zeitselektor
Beispiel für die Grundlagen der Verwendung eines jQuery-Selektors
Analyse der häufig verwendeten Auswahlfunktionen und Anwendungsbeispiele von JQuery
Detaillierte Erklärung zur Verwendung des jQuery-Formularselektors
Analyse von Verwendungsbeispielen für jQuery-Attributselektoren
Detaillierte Erläuterung des jQuery-Selektorattribut-Filterselektors
Detaillierte Erläuterung des jQuery-Selektor-Formularelement-Selektors
Detaillierte Erklärung der Verwendung des JQuery-Selektors

<<: Detaillierte Erklärung der Anwendung und des Unterschieds zwischen Filterattribut und Hintergrundfilter in CSS

>>: Eine kurze Einführung in MySQL-Funktionen