1. Einführung in jQueryWas ist jQuery und was macht es?
Verwendungsmerkmale verschiedener Selektoren: Es gibt fünf grundlegende Selektoren: Es gibt 4 Arten von relationalen Selektoren: Es gibt 8 grundlegende Filterauswahlmöglichkeiten: Es gibt 4 Inhaltsfilter-Selektoren: Es gibt zwei Arten von Sichtbarkeitsfilter-Selektoren: Es gibt 8 Attributselektoren: Unterelement-Filterauswahl (4 Typen) Formularattribut-Filterauswahl (4 Typen) Formularauswahl (11 Typen) 2. jQuery-Selektor2.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 jQuery3.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. Knotenbetrieb4.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); ZusammenfassenDieser 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:
|
<<: Webdesign-Tutorial (5): Visuelles Webdesign
>>: So ändern Sie die Schaltfläche „Durchsuchen“ des HTML-Formulars zum Hochladen von Dateien
Inhaltsverzeichnis 1. Standardwerte für Funktions...
Routenparameter, Routennavigationswächter: Beibeh...
In diesem Artikelbeispiel wird der spezifische Co...
Vier Netzwerktypen: Keine: Konfigurieren Sie kein...
Die von Navicat exportierten Daten können nicht i...
In diesem Artikel wird der spezifische Code von v...
Das sogenannte dreispaltige adaptive Layout bedeu...
Inhaltsverzeichnis Vorwort Optimierung Ableitungs...
1. Installationsumgebung Hier finden Sie auch ein...
Vorwort Die MySQL-Datenbanksperre ist ein wichtig...
Apache Tika ist eine Bibliothek zur Dateityperken...
So zeigen Sie Versionsinformationen unter Linux a...
Die in MySQL unterstützten Gleitkommatypen sind F...
In diesem Artikelbeispiel wird der spezifische Ja...
Leerzeichenregeln in HTML In HTML werden mehrere ...