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

Vue elementUI implementiert Baumstrukturtabelle und Lazy Loading

Inhaltsverzeichnis 1. Ergebnisse erzielen 2. Back...

Detaillierte Erläuterung der persistenten MySQL-Statistiken

1. Die Bedeutung persistenter statistischer Infor...

React tsx generiert einen zufälligen Bestätigungscode

React tsx generiert einen zufälligen Bestätigungs...

Allgemeine JavaScript-Anweisungen: Schleife, Beurteilung, Zeichenfolge in Zahl

Inhaltsverzeichnis 1. Schalter 2. While-Schleife ...

Die Vorteile von Div+CSS und Web-Standardseiten

Das Div-Element wird verwendet, um Struktur und Hi...

Benutzerdefinierte Komponente der unteren Navigationsleiste des WeChat-Applets

In diesem Artikelbeispiel wird der spezifische Im...

Beispielcode zur Implementierung der Menüberechtigungssteuerung in Vue

Wenn Benutzer an einem Backend-Verwaltungssystem ...

JavaScript implementiert coole Mouse-Tailing-Effekte

Nachdem Sie sich das angesehen haben, garantiere ...

FTP-Remoteverbindung zu Linux über SSH

Installieren Sie zunächst SSH in Linux. Nehmen Si...

Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen

Benutzergruppen Unter Linux muss jeder Benutzer e...

vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus

In diesem Artikelbeispiel wird der spezifische Co...

Funktionsprinzip und Implementierungsmethode der Vue-Anweisung

Einführung in Vue Die aktuelle Ära der großen Fro...