Detaillierte Erklärung des JQuery-Selektors

Detaillierte Erklärung des JQuery-Selektors

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

Artikel empfehlen

Mehrere Möglichkeiten zum Verbinden von Tabellen in MySQL

Die Verbindungsmethode in der MySQL-Tabelle ist e...

Docker verwendet Git, um den detaillierten Prozess der Jenkins-Release- und Testprojekte zu implementieren

Inhaltsverzeichnis 1. Docker installieren 2. Erst...

Detaillierte Erklärung des wunderbaren CSS-Attributs MASK

Dieser Artikel stellt eine sehr interessante Attr...

Analyse der Ideen zur Implementierung vertikaler Tabellen auf zwei Arten im Vue-Projekt

Problembeschreibung In unseren Projekten sind hor...

So installieren Sie mysql8.0.23 unter Win10 und lösen das Problem „Der Dienst reagiert nicht auf die Steuerfunktion“

Installieren Sie MySQL unter Win10 1. Laden Sie M...

Detaillierte Installation und Konfiguration von hadoop2.7.2 unter Ubuntu15.10

Im Internet und in vielen Büchern gibt es viele T...

Verstehen Sie einfach die Schreib- und Ausführungsreihenfolge von MySQL-Anweisungen

Es gibt einen großen Unterschied zwischen der Sch...

Der Alibaba Cloud ECS-Cloud-Server (Linux-System) kann nach der Installation von MySQL keine Remoteverbindung herstellen (Falle)

Gestern habe ich einen Alibaba Cloud-Server gekau...

Erstellen einer einfachen Game-Engine mit React Native

Inhaltsverzeichnis Einführung Erste Schritte Eine...

Stimmt es, dass der Webdesign-Stil umso besser ist, je einfacher er ist?

Ursprüngliche Adresse: http://www.webdesignfromsc...

Schritte zur Verwendung der nicht installierten Version von MySQL und Lösungen zum Vergessen des Kennworts

Der erste Schritt besteht darin, das komprimierte...

20 CSS-Codierungstipps für mehr Effizienz (sortiert)

In diesem Artikel möchten wir eine Sammlung von 2...

Node.js gibt je nach Anforderungspfad unterschiedliche Daten zurück.

Inhaltsverzeichnis 1. Lernen Sie, je nach Anforde...

Beispiel für die Einrichtung eines Third-Level-Domain-Namens in nginx

Problembeschreibung Durch die Konfiguration von n...

Einführung und Verwendung des Javascript-Generators

Was ist ein Generator? Ein Generator ist ein Code...