Detaillierte Erklärung der jQuery-Methodenattribute

Detaillierte Erklärung der jQuery-Methodenattribute

1. Einführung in jQuery

Was ist jQuery und was macht es?

  • jQuery wird verwendet, um JS-Operationen an DOM-Elementen zu vereinfachen
  • jQuery kann keine DOM-Methoden verwenden und DOM kann keine jQuery-Methoden verwenden

Verwendungsmerkmale verschiedener Selektoren:

Es gibt fünf grundlegende Selektoren: $(" .#*,空格");

Es gibt 4 Arten von relationalen Selektoren: $(“空格>+~ ”)

Es gibt 8 grundlegende Filterauswahlmöglichkeiten: $(" :first/:last/:even/:odd/eq(index)/:gt(index)/:lt(index)/:not(selector) ")

Es gibt 4 Inhaltsfilter-Selektoren: $(" :contains(text)/:empty/:has(selector)/:parent ")

Es gibt zwei Arten von Sichtbarkeitsfilter-Selektoren: $(" :hidden/:visible ")

Es gibt 8 Attributselektoren: ( " = = [ attribute ] , [ attribute = value ] , [ attribute ! = value ] , [ attribute = value ] , [ attribute ("==[attribute] , [attribute=value] [attribute!=value] , [attribute^=value]、[attribute ("==[attribute] , [attribute=value] [attribute!=value] [attribute=value] , [attribute=value] , [attribute*=value] , [attributeFilter1][attrbuteFilter2]==")

Unterelement-Filterauswahl (4 Typen) $( ":nth-child(index/even/odd) , :first-child , :last-child , :only-child" )

Formularattribut-Filterauswahl (4 Typen) ${" :enabled/:disabled/:checked/:selected "}

Formularauswahl (11 Typen) $(" :input/:text/:password/:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden ")

2. jQuery-Selektor

2.1 Fünf grundlegende Selektoren

    // 5 grundlegende Selektoren $(".div"); // Klassenselektor $("div"); // Tag-Selektor $("#box"); // ID-Selektor $("*"); // Platzhalterselektor $("div,p,img"); // Merge-Selektor

2.2 Vier Arten von Beziehungsselektoren

    //4 Arten von Beziehungsselektoren $("div p"); //Nachfolgeselektor $("div>p"); //Kindselektor $("div+p"); //direkter Geschwisterselektor $("div~p"); //einfacher Geschwisterselektor

2.3 8 grundlegende Filterselektoren

// 8 grundlegende Filterselektoren $(":first");//Erstes Element $(":last");//Letztes Element $(":not(selector)");//Selektor ausschließen $(":even");//Gerade Zeilen auswählen $(":odd");//Ungerade Zeilen auswählen $(":eq(index)");//Elemente mit Index gleich Index $(":gt(index)");//Elemente mit Index größer als Index $(":lt(index)");//Elemente mit Index kleiner als Index

2.4 4 Arten von Inhaltsfilter-Selektoren

        // 4 Arten von Inhaltsfilter-Selektoren $(":contains(text)"); //Entspricht Elementen, die den angegebenen Text enthalten $(":empty"); //Entspricht allen leeren Elementen, die keine untergeordneten Elemente oder Text enthalten $(":has(selector)"); //Entspricht Elementen, die den Selektor enthalten $(":parent"); //Entspricht Elementen, die untergeordnete Elemente oder Text haben

2.5 Zwei Arten von Sichtbarkeitsfilter-Selektoren

        // 2 Arten von Sichtbarkeitsfilter-Selektoren $(":hidden"); // entspricht allen unsichtbaren Elementen oder Elementen vom Typ hidden $(":visible"); // entspricht allen sichtbaren Elementen

2.6 8 Arten von Attributfilterselektoren

        // 8 Arten von Attributfilterselektoren $("[attribute]"); // Elemente mit Attributattributen abgleichen $("[attribute=value]"); // Elemente mit Attributwerten abgleichen, die gleich dem Wert sind $("[attribute!=value]"); // Elemente mit Attributwerten abgleichen, die ungleich dem Wert sind $("[attribute^=value]"); // Elemente mit Attributwerten abgleichen, die mit bestimmten Werten beginnen $("[attribute$=value]"); // Elemente mit Attributwerten abgleichen, die mit bestimmten Werten enden $("[attribute*=value]"); // Elemente mit Attributwerten abgleichen, die bestimmte Werte enthalten $("[attributeFilter1][attrbuteFilter2]"); // Zusammengesetzter Attributfilterselektor, der verwendet wird, wenn mehrere Bedingungen gleichzeitig erfüllt sein müssen

2.7 Filterauswahl für Unterelemente (4 Typen)

        //Unterelement-Filterauswahl (4 Typen)
            $(":nth-child(index/even/odd)") //Wählen Sie das index-te Kindelement unter jedem Elternelement aus $(":first-child"); //Wählen Sie das erste Kindelement jedes Elternelements aus $(":last-child"); //Wählen Sie das letzte Kindelement jedes Elternelements aus $(":only-child"); //Wenn ein Element das einzige Kindelement seines Elternelements ist, wird es abgeglichen

2.8 Filterauswahl für Formularattribute (4 Typen)

        //Formularattribut-Filterauswahl (4 Typen)
            $(":enabled");//Alle aktivierten Elemente auswählen$(":disabled");//Alle deaktivierten Elemente auswählen$(":checked");//Alle ausgewählten Elemente auswählen$(":selected");//Alle ausgewählten Elemente auswählen

2.9 Formularselektoren (11 Typen)

        // Formularauswahl (11 Typen)
            $(":input");//Alle Eingabe-/Textfeld-/Auswahl-/Schaltflächenelemente auswählen$(":text");//Alle einzeiligen Textfelder auswählen$(":password");//Alle Kennwortfelder auswählen$(":radio");//Alle Optionsfelder auswählen$(":checkbox");//Alle Kontrollkästchen auswählen$(":submit");//Alle Senden-Schaltflächen auswählen$(":image");//Alle Bildschaltflächen auswählen$(":reset");//Alle Reset-Schaltflächen auswählen$(":button");//Alle Schaltflächen auswählen$(":file");//Alle Upload-Felder auswählen$(":hidden");//Alle unsichtbaren Elemente auswählen

3. DOM-Manipulation in jQuery

3.1 Textoperation

        // Textoperation $("p").html(); // Entspricht p.innerHtml im DOM;
        $("p").text();//Entspricht p.innerText im DOM;

3.2 Wertoperationen

        // Wertoperation $("input:eq(5)").val(); //Entspricht input.value in DOM;
        $("input:eq(6)").val("aaa"); //Attributwert festlegen

3.3 Attributoperation

 		// Attributoperation $("#box").attr('name'); //Namensattribut abrufen $("#box").attr('name',"aaa"); //Namensattribut und -wert hinzufügen $("#box").removeAttr('name'); //Namensattribut löschen $("#box").prop('checked'); //Wenn Sie ein einzelnes Attribut abrufen, verwenden Sie prop, um false und true abzurufen

3.4 Klassenoperationen

    	// Klassenoperation $("#box").attr("class","");//Abrufen und Festlegen von $("#box").addClass("class","");//Klassennamen anhängen $("#box").removeClass("class","");//Klassennamen entfernen $("#box").removeClass();//Alle Klassennamen entfernen $("#box").toggleClass("main");//Hauptklassennamen wechseln $("#box").hasClass("main");//Gibt es einen bestimmten Klassennamen

3.5 Stilbedienung

	//Stiloperation $("#box").css("color"); //CSS-Stilwert lesen $("#box").css({"propertyname":"value","propertyname":"value"}); //Mehrere Stile gleichzeitig festlegen

4. Knotenbetrieb

4.1 Knoten durchlaufen

		 //Knoten durchlaufen$("#box").children();//Untergeordnete Knoten abrufen$("#box").children("div");//Untergeordnete Div-Knoten abrufen$("#box").prev();//Einen Bruder direkt darüber finden$("#box").prevAll();//Alle Brüder direkt darüber finden$("#box").prevAll("div");//Alle Div-Brüder direkt darüber finden$("#box").next();//Einen Bruder direkt darunter finden$("#box").nextAll();//Alle Brüder direkt darunter finden$("#box").nextAll("div");//Alle Div-Brüder direkt darunter finden$("#box").parent();//Übergeordneten Knoten finden

4.2 Filterknoten

    //Knoten filtern $("ul").find(".a");//Suche $("ul li").filter(".a");//Filter

4.3 Erstellen, Einfügen und Löschen

    // Erstellen, einfügen, löschen var lis=$("<li title='aaa'>aaa</li>");//Erstellen//Intern hinzufügen parent.append(lis);//Am Ende der übergeordneten Box hinzufügen parent.prepend(lis);//Am Kopf der übergeordneten Box hinzufügen//Extern hinzufügen box.after(lis);//Nach der Box hinzufügen box.before(lis);//Vor der Box hinzufügen//DOM-Elemente löschen $("ul").remove();//Komplett löschen, sowohl ul als auch li löschen $("ul").empty();//Nur den Inhalt von ul löschen, ul existiert noch $("li").remove(".one");//class="one" in li löschen

5. jQuery-Ereignisse

    // jQuery-Ereignis // Unterschied zu JS // window.onload und $(document).ready()
            //Unterschied 1: Ersteres wird ausgeführt, nachdem die Seite vollständig geladen ist, während Letzteres ausgeführt wird, nachdem das DOM geladen ist. Letzteres hat Vorrang vor Ersterem. //Unterschied 2: Wenn Ersteres mehrfach vorkommt, überschreibt das Letzte das Vorherige. Wenn Letzteres mehrfach vorkommt, werden sie zusammengeführt. //Unterschied 3: Gibt es eine Abkürzung: Fenster hat keine Abkürzung, Dokument hat eine Abkürzung. //Abkürzung: $().ready(function(){...})
                // $(funktion(){....})
        //Ereignisbindung: $(Selektor).on(Ereignistyp, Rückruffunktion)
        $("ul li").bei("Klick",function(){alert(1);});	
    // jQuery und Ajax
            // Methode abrufen $.get(url,data,success(response,status,xhr),dataType);
            // Post-Methode $.post(url,data,success(data, textStatus, jqXHR),dataType);

Bild-20211030195950325

Zusammenfassen

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

Das könnte Sie auch interessieren:
  • JS JQuery erhält Daten-* Attributwert-Methodenanalyse
  • Analyse des JQuery-Stils und der Methoden zur Attributeinstellung
  • Detaillierte Erklärung der Eigenschaften und Methoden von jQuery-Ereignisobjekten
  • Detaillierte Erklärung der jQuery-Prototypeigenschaften und -Prototypmethoden

<<:  Webdesign-Tutorial (5): Visuelles Webdesign

>>:  So ändern Sie die Schaltfläche „Durchsuchen“ des HTML-Formulars zum Hochladen von Dateien

Artikel empfehlen

Einführung in die neuen Funktionen von ECMAscript

Inhaltsverzeichnis 1. Standardwerte für Funktions...

JS+CSS zur Realisierung einer dynamischen Uhr

In diesem Artikelbeispiel wird der spezifische Co...

Prinzipielle Beispiele für die vier Netzwerktypen von Docker

Vier Netzwerktypen: Keine: Konfigurieren Sie kein...

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Die von Navicat exportierten Daten können nicht i...

Vue + echart realisiert Doppelsäulendiagramm

In diesem Artikel wird der spezifische Code von v...

So löschen Sie den Timer elegant in Vue

Inhaltsverzeichnis Vorwort Optimierung Ableitungs...

Grundlegendes zu MySQL-Sperren basierend auf Update-SQL-Anweisungen

Vorwort Die MySQL-Datenbanksperre ist ein wichtig...

So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist

Apache Tika ist eine Bibliothek zur Dateityperken...

So zeigen Sie Versionsinformationen in Linux an

So zeigen Sie Versionsinformationen unter Linux a...

Eine kurze Einführung in die Verwendung des Dezimaltyps in MySQL

Die in MySQL unterstützten Gleitkommatypen sind F...

JavaScript zum Erreichen eines einfachen Seiten-Countdowns

In diesem Artikelbeispiel wird der spezifische Ja...