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

Details zu Linux-Dateideskriptoren, Dateizeigern und Inodes

Inhaltsverzeichnis Linux - Dateideskriptor, Datei...

VMware Workstation Pro installiert das Win10-Betriebssystem in Reinform

Dieser Artikel beschreibt die Schritte zur Instal...

So finden Sie Informationen zu nicht festgeschriebenen Transaktionen in MySQL

Vor einiger Zeit habe ich einen Blogbeitrag mit d...

So richten Sie Spring Boot mithilfe der Docker-Schichtenverpackung ein

Das Spring Boot-Projekt verwendet Docker-Containe...

Detaillierte Analyse von MySQL-Ausführungsplänen

Vorwort Als wir im vorherigen Interviewprozess na...

Detaillierte Erklärung des MySQL-Triggerbeispiels

Inhaltsverzeichnis Was ist ein Auslöser Erstellen...

MySQL8.0.18-Konfiguration mehrerer Master und eines Slaves

Inhaltsverzeichnis 1. Realistischer Hintergrund 2...

So erstellen und implementieren Sie ein Node-Projekt mit Docker

Inhaltsverzeichnis Was ist Docker Clientseitiger ...

Einige Erkenntnisse und Gedanken zu iframe

Diese Geschichte beginnt heute mit einer unerwarte...

Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil

Aufgrund der Anforderungen des Projekts habe ich ...

So erreichen Sie ein zentriertes Layout im CSS-Layout

1. Legen Sie den übergeordneten Container auf ein...

Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL

Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...