jQuery Meisterkurs – mit Website-Animationen | Code Bless You | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

jQuery Meisterkurs – mit Website-Animationen

teacher avatar Code Bless You, Making Coding Easy To Learn

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      0:31

    • 2.

      01 Was ist jQuery

      1:21

    • 3.

      02 Einrichten der Umgebung

      0:51

    • 4.

      03 Wie man jQuery installiert

      2:15

    • 5.

      04 Syntax von jQuery

      1:20

    • 6.

      05 Selektoren in jQuery

      3:08

    • 7.

      06 Veranstaltungen

      5:40

    • 8.

      07 Effekte ausblenden und anzeigen

      2:43

    • 9.

      08 Fade- und Slide

      2:20

    • 10.

      09 Animierte Methode

      2:48

    • 11.

      10 HTML mit jQuery ändern

      3:45

    • 12.

      11 CSS mit jQuery modifizieren

      5:28

    • 13.

      12 Nützliche form

      4:36

    • 14.

      13 AJAX in jQuery

      6:51

    • 15.

      14 Animiere eine Website mit on

      11:24

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

75

Teilnehmer:innen

1

Projekt

Über diesen Kurs

jQuery ist eine der besten JavaScript-Bibliotheken, um deinen JavaScript-Code einfacher zu machen. In diesem Kurs lernst du jQuery von Null auf Helden.

Die Konzepte in diesem Kurs behandeln:

  • Was ist jQuery und wie man es verwendet
  • Syntax von jQuery
  • Selektoren
  • Veranstaltungen
  • Einige beliebte Effekte
  • Animierte Methoden
  • HTML- und CSS
  • Form
  • AJAX in jQuery
  • Animieren beim Scrollen mit jQuery – BONUS

Wenn du Front-End-Entwickler bist oder HTML, CSS und JavaScript gelernt hast, wird dieser Kurs deine Fähigkeiten verbessern und dir die neuen Fähigkeiten für die Aktualisierung deiner Websites vermitteln.

Triff deine:n Kursleiter:in

Teacher Profile Image

Code Bless You

Making Coding Easy To Learn

Kursleiter:in

Hi! I'm a passionate software engineer from Code Bless You and I love to teach about coding and general skills in less time. I've taught many people how to become professional software engineers.

My goal is to make coding fun for everyone. That's why my courses are simple, animated, and with practical implementation.

Learn by doing

Step-by-step tutorials and project-based learning.

Get support

One-on-one support from experts that truly want to help you.

don’t stress. have fun.

I can't wait to see you in class!

- Code Bless You

Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Willkommen zum ultimativen jQuery-Kurs. In diesem Kurs lernst du alles über jQuery, wie man Animationen mit jQuery hinzufügt, wie man API mit Ajax aufruft und vieles mehr Afrikanisch, wenn du diesen Kurs liest, kannst du sofort anfangen, jQuery zu verwenden für deine Websites. Und Sie werden diese erstaunlichen Animationstricks lernen, die moderne Websites heutzutage haben. Ich freue mich sehr über diesen Kurs und hoffe, dass Sie es auch sind. Lassen Sie uns näher darauf eingehen. 2. 01 Was ist jQuery: Also, was ist jQuery? Jquery ist eine leichte JavaScript-Bibliothek, mit der sie einfach auf DOM-Elemente zugreifen und ihr Aktionen hinzufügen kann. Ein Dialog, in dem steht, dass jQuery weniger Recht hat und mehr Dinge tut. In einfachen Worten. Jquery ist die Abkürzung zum Schreiben von JavaScript-Code. Beispiel. Wenn wir einen Click-Event-Listener für eine Schaltfläche hinzufügen wollten , können Sie denselben Code mit jQuery in einer Zeile schreiben . Das ist die Stärke von jQuery. Jquery-Bibliothek verfügt über viele Funktionen wie DOM-Manipulation, Stilmanipulation, Ereignis-Listener, Effekte, Animationen, Ajax für HTTP-Anfragen und vieles mehr. Es gibt viele JavaScript-Bibliotheken, aber jQuery ist die beliebteste und beste Bibliothek für JavaScript. Und wenn Sie an fast allen Website-Projekten arbeiten, ist jQuery dafür sehr nützlich. Es gibt viele große Unternehmen die jQuery für ihre Websites reduzieren, wie Netflix, Google, Microsoft, Reddit, Stack Overflow und viele mehr. Nachdem Sie also jQuery gelernt haben, können Sie jQuery zu Ihrem Tech-Stack hinzufügen. Das wird Ihnen auch helfen, den Job zu bekommen oder ein besserer Webentwickler zu werden. 3. 02 Umgebung einrichten: Lassen Sie uns schnell unsere Umgebung für diesen Kurs einrichten. Im Beschreibungsfeld erhalten Sie eine ZIP-Datei für Ressourcen, heruntergeladen und entpackt wurde. In diesem Resources-Ordner erhalten Sie diesen jQuery-Starterordner, öffnen ihn und öffnen diesen Ordner in VS Code. Nun, hier ist eine Datei mit einer index.html und einer script.js. Ich verknüpfe diese Datei script.js mit unserer HTML-Datei. Lassen Sie uns diese HTML-Datei mit einem Live-Server ausführen. Also müssen wir unseren Browser nicht jedes Mal unterdrücken, was? Wenn Sie diesen zusätzlichen Zoll nicht haben und dann schlage ich Ihnen vor , diese Beschleunigung zu installieren. Lassen Sie uns nun die Konsole öffnen und sehen, dass sie funktioniert. 4. 03 Wie man jQuery installiert: Lassen Sie uns nun zunächst sehen, wie Sie ein jQuery-, HTML-, CSS- und JavaScript-Projekt hinzufügen . Es gibt also zwei Möglichkeiten, jQuery zu unserem Projekt hinzuzufügen. Wir können die jQuery-Datei herunterladen. Wie fange ich an, den CDN-Link zu verwenden. Du kannst verwenden, was du willst. Es liegt ganz bei dir. Lassen Sie uns zunächst sehen, wie Sie die jQuery-Datei herunterladen. Gehen Sie zu jquery.com und klicken Sie auf diese Schaltfläche zum Herunterladen von jQuery. Wenn wir nun sehen wollen, dass Code bedeutet, was in der Datei enthalten ist, dann klicken Sie auf die jQuery-Entwicklungsversion. Und wenn Sie diesen Kern nicht sehen möchten, können Sie die komprimierte jQuery-Version verwenden. Beide Akkorde sind identisch, aber der Unterschied besteht darin, dass die komprimierte Versionsdatei kleiner ist als die Entwicklungsversion , da sie in Glomerulus oder Zonen alle unnötigen Leerzeichen entfernen. Deshalb können wir den Code in dieser Datei nicht lesen. Ich kopiere hier kompress person score. Im VS-Code. Wir erstellen eine neue Datei namens jQuery dot js und fügen diesen Code in diese Datei ein. Speichern Sie dies und jetzt in unsere HTML-Datei am Ende des Textes. Und vor dem Script-Tag fügen wir ein weiteres Script-Tag hinzu. Und Quelle, jQuery dot js. Und das war's. Wir installieren unser jQuery. Schauen wir uns nun den zweiten Weg an , der der einfachste und einfachste Weg ist. Zurück zu unserem Browser. Und scrolle auf dieser Seite im Abschnitt „Andere CDNs“ nach unten. Hier bekommen wir Google CDN. Klicken Sie darauf und kopieren Sie diese neueste a3x-Nachbarschaft. Nun zurück zu VS Code und entferne den Kommentar zu diesem Script-Tag. Und danach erstellen Sie diesen CDN-Link. Wenn Sie Post Way nicht verwenden möchten, können Sie dieses älteste Script-Tag entfernen. Ich werde das als Referenz behalten. Und das war's. Wir haben jQuery erfolgreich in unserem Projekt installiert. 5. 04 Syntax von jQuery: Wie ich Ihnen schon sagte, ist jQuery sehr nützlich, um auf DOM-Elemente zuzugreifen und Aktionen für sie auszuführen. Also hier ist eine grundlegende Syntax von jQuery. Welche Access-DOM-Elemente verwirren das nicht. Es ist wirklich sehr einfach. Lassen Sie mich Ihnen zeigen, dass die Syntax aus drei Hauptteilen besteht. Der erste ist dieser Dollar. Dollar ist für den Zugriff auf jQuery vom CDN aus zugewiesen. Laden Sie diese jQuery-Datei lokal herunter. Danach haben wir einen Selektor, verwendet wird, um das Element oder die Elemente zu definieren, z. B. $ p neu schreiben. Dann wählt es alle Absatzelemente in unserer HTML-Datei aus. Und endlich haben wir Maßnahmen, das ist die Aktion, die wir ausführen wollen. Welches Beispiel fügen wir hier einfach hinzu, verstecken. Ausblenden ist die Aktion, die wir für alle Absatzelemente ausführen möchten . Nur dieser Code verbirgt also alle Absatzelemente auf unserer Webseite. Sie können sehen, wie einfach und leicht alle Absatzelemente ausgeblendet werden können. Also, dass Seitenentwickler und große Unternehmen jQuery so sehr mögen. 6. 05 Auswanderer in jQuery: Selektoren sind ein sehr wichtiger Bestandteil von jQuery, da sie verwendet werden, um HTML-Elemente von Webseiten anhand ihres Tag-Namens, Nachnamens, ihrer ID, ihrer Attribute und ihres Attributwerts auszuwählen Webseiten anhand ihres Tag-Namens, Nachnamens, . Mal sehen, wie wir das machen können. Praktisch. Was Stovall in der Datei index.html ist, wir fügen ein Absatz-Tag hinzu. Fügen Sie einfach zufälligen Text mit Laura und Phi am Anfang hinzu, Absatz eins. Jetzt dupliziere ich diesen Absatz noch zweimal und ändere ihn in Absatz für Absatz T. Zellen diese Zellen und schau es mir an. Wir haben drei Absätze. Schreiben Sie jetzt in der Datei script.js überschüssige jQuery-Variable um, was Dollar ist. Und dann fügen wir in Klammern B in doppelten Anführungszeichen hinzu. Jetzt tot, wir müssen eine Aktion hinzufügen, sagen wir, verstecken. Also weißt du, was passiert , wenn wir die Datei speichern? Schreiben Sie Ihre Antwort in das Kommentarfeld, damit ich sehen kann, wie viele Leute mit mir lernen. Speichern Sie das jetzt. Und C sind alles P-Tags oder verstecken. So wählen wir also alle Absatzelemente aus. Wenn wir hier H1 schreiben , werden alle H1-Tags von der Webseite ausgewählt. Jetzt füge ich in der HTML-Datei Glas im zweiten Absatz hinzu, der als zweiter bezeichnet wird. Nun, Integrität, ICH WAR von P. Wir fügen Punkt an zweiter Stelle hinzu. Dadurch werden alle Elemente ausgewählt , die an zweiter Stelle Glas sind, was unser zweiter Absatz ist. Speichern Sie dies und sehen Sie, dass unser zweiter Absatz jetzt ausgeblendet ist. Wenn wir hier den zweiten Punkt hinzufügen, werden alle Absätze ausgewählt deren Klassenname an zweiter Stelle steht. Es funktioniert ähnlich wie CSS-Selektoren. Nun zum dritten Absatz, id, dritter. Kannst du nun erraten, wie wir Elemente anhand ihrer ID auswählen können? Wenn wir Punkt pro Klassennamen verwenden, dann verwenden wir hier has ID. So einfach ist das. Stimmt das? Hat einen dritten. Füllen Sie das aus und schauen Sie es sich an. Absatz mit der dritten ID ist ausgeblendet. Sie können sehen, wie einfach es ist, Elemente in jQuery auszuwählen. In JavaScript müssen wir das Document Dot Get Element nach Klassennamen oder nach ID schreiben . Jetzt gibt es in jQuery viele Zollselektoren. Ich möchte Sie nicht damit langweilen , dass jeder Selektor einzeln ausgewählt wird. Also hier ist eine Tabelle mit Selektoren, und in der Beschreibungsspalte können Sie die Beschreibung lesen. Es ist sehr einfach und leicht. Wenn Sie Zweifel haben, fragen Sie mich im Kommentarbereich. 7. 06 Veranstaltungen: Ereignisse sind also ein sehr wichtiger Bestandteil jeder Webseite. Es ist im Grunde eine Reaktion auf die Aktionen des Benutzers. Auf der YouTube-Website drücken Sie beispielsweise F, um das Video im Vollbildmodus zu sehen. Klicken Sie auf die Schaltfläche Abspielen , um das Video abzuspielen. Also das drückt G und Gleick bei Veranstaltungen. In jQuery sind also vier Arten von DOM-Ereignissen verfügbar. Mausereignisse, Tastaturereignisse, Bindungsbewegungen und Dokument. Was machen wir Veranstaltungen? Nehmen wir an, Jack Miles uriniert. Beachten Sie, dass ich Ihnen nicht alle Veranstaltungen zeige , weil es ein bisschen langweilig und zeitaufwändig ist. Wir werden Ereignisse sehen, die für uns allgemein nützlich sind. Wenn wir alle Veranstaltungen überprüfen möchten, können Sie die offizielle Dokumentation überprüfen. Das erste Ereignis ist also eine Click-HTML-Datei. Ich füge eine Schaltfläche hinzu, sagen wir Ausblenden. Und gib dem eine ID namens btn hide. Was ich nun tun möchte, ist, wenn wir auf diese Schaltfläche Ausblenden klicken, möchten wir diesen zweiten Absatz in der Datei script.js ausblenden . Wir wählen zuerst die Schaltfläche Ausblenden. Der Dollar hat also die Höhe des BTN-Unterstrichs. Jetzt fügen wir hier Punkt und Klick ein Ereignis hinzu. In dieser Click-Methode müssen wir nun eine Callback-Funktion hinzufügen, die bei diesem Klickereignis ausgeführt wird. Also funktioniere. Und in dieser Funktion schreiben Sie den Dollar neu. Zweiter Punkt verstecken. Im Grunde bedeutet dieser Ausdruck , wenn Sie auf diese Schaltfläche „Ausblenden“ klicken und dann diese Funktion ausführen. Und diese Funktion wird den zweiten Absatz verbergen. Speichere das und sieh es dir an. Klicken Sie auf die Schaltfläche Ausblenden. Und Absatz zwei ist versteckt. Sie können sehen, wie einfach es ist, ein Klickereignis hinzuzufügen. Nun zur Maus, wir haben so viele Ereignisse. Du kannst sie selbst schreiben. Jetzt hat die Tastatur nur drei Ereignisse. Taste N gedrückt halten. Hier auf dieser Webseite. Wenn ich die Esc-Taste drücke, wird dieser zweite Absatz ausgeblendet. Und wenn wir dann ASCII drücken, wird der zweite Absatz sichtbar. Dafür fügen wir hier Dollar und Klammern hinzu. Nun zu welchem Element möchten wir dieses wichtige Ereignis hinzufügen. Wir möchten diese Veranstaltung auf der vollständigen Webseite hinzufügen. Also füge ich hier den Körper jetzt mit der Punkttaste nach unten hinzu. Und wir geben hier die Funktion weiter. Jetzt besteht unsere Aufgabe darin, festzustellen, ob der Benutzer die H-Taste oder ASCII drückt. Wenn Sie das schon einmal in diesem Skript gemacht haben, dann wissen Sie, jeder hat sein Ereignisobjekt. Und wir erhalten dieses Event-Objekt als Parameter dieser Callback-Funktion hier, event. Und dieses Ereignis, das Beach genannt wird, war wichtig und gibt den ASCII-Wert von k zurück . Was werden wir für Ihren Event-Punktkern verwenden , der uns den Schlüsselnamen gibt. Aber ich mag das, was ist wichtig? Schreiben Sie also einfach das Ereignis console.log, was das ist, und drücken Sie Edge. Schau es dir an. Also 72, was der ASCII-Wert von Edge ist, und drücken Sie dann S und es wird ein T3 zurückgegeben. Also zurück zu unserer Skriptdatei. Wir fügen hier die Bedingung eines Ereignispunktes hinzu, der 72,10 Dollar entspricht. Zweiter. Verstecken. Danach fügen wir ein weiteres Live-Event hinzu, Punkt v entspricht einem T3. Dann Dollar. Zweiter Schuh, Verkaufstage und Degas sehen Kante und seine Höhe aus und drücken Sie S und es ist sichtbar. Sehen Sie, wie einfach es mit jQuery ist. Was ist, wenn ich nicht mehr da wäre? Wir addieren diese und schauen uns das an. Jetzt drücke ich die Esc-Taste und ich merke es nicht. Jetzt merke ich es. Und der Absatz ist versteckt. Wenn wir also die Taste drücken und nachdem wir festgestellt haben, dass sie 99% der Zeit ausgeführt wird, verwenden wir nur das Ereignis „Taste gedrückt“ für die Tastatur. Jetzt haben wir Veranstaltungen in Guam, was sehr nützlich ist, wenn wir mit Form arbeiten. Die Syntax aller Ereignisse ist also für jedes Ereignis dieselbe. Wash, Sie müssen einen Selektor definieren und dann den Ereignisnamen mit einem Punkt versehen und dann eine Callback-Funktion hinzufügen, die für diese Aktion ausgeführt wird. So einfach ist das. Du wirst diese Ereignisse selbst schreiben. Wenn ich das erkläre, alle Veranstaltungen eins nach dem anderen als in diesem Tutorial nicht in 2 h abgeschlossen sein. Also probiere es selbst aus. Und wenn Sie Zweifel haben, fragen Sie mich im Kommentarbereich. 8. 07 Effekte ausblenden und zeigen: Die Methode zum Ausblenden und Einblenden haben wir bereits in der letzten Lektion gesehen. Dies ist die einfachste Möglichkeit, die Elemente auf unserer Webseite ein - und auszublenden . Jetzt können wir in der Ausblenden-und-Show-Methode auch den Zeitpunkt angeben, zu dem diese Aktion abgeschlossen werden soll. Nehmen wir an, wir möchten diesen Absatz in Sekunden verstecken. Diese Höhenfunktion. Wir vertreiben Ihre Zeit in Millisekunden, das sind 2000. Und Taylor. Wenn wir auf diese Schaltfläche klicken, dauert es 2 s, um uns auszublenden. Hier können wir auch die Callback-Funktion für diesen Höheneffekt kaufen , die ausgeführt wird, nachdem dieser Effekt abgeschlossen ist. Lass mich dir zeigen, was ich meine. Also nach einiger Zeit übergebe ich deine Rückruffunktion. Und in dieser Callback-Funktion Aufgabe iodide console.log abgeschlossen. Das. Und jetzt klicke ich auf diese Schaltfläche „Ausblenden“ und sehe, wie unsere Animation abgeschlossen ist. Dann hat diese Klasse den Sprint in der Konsole abgeschlossen. In dieser Callback-Funktion werden wir auch andere Elemente ausblenden, die nach dem Lesen dieser Animation ausgeblendet werden. Jetzt, wo R1 mehr Wirkung hat, wird umgeschaltet. Seitenketten, dieser hohe Defekt beim Umschalten. auch in einer HTML-Datei den Schaltflächentext, Ändern Sie auch in einer HTML-Datei den Schaltflächentext, um dies umzuschalten, und schauen Sie sich das an. Wenn wir also auf diese Umschalttaste klicken und unser Absatz sichtbar ist, wird er ausgeblendet. Und wenn es nicht sichtbar ist, wird es so einfach erscheinen. Bevor wir zum nächsten Thema übergehen, wollte ich Ihnen einen sehr wichtigen Tipp für jQuery geben. Also, wann immer Sie jQuery oder JavaScript verwenden, schreiben Sie Ihren Code in die Funktion document.ready. Diese Funktion stellt sicher, dass unser vollständiger Inhalt geladen wird. In jQuery können wir also Dollar Document Dot Ready schreiben. Und darin übergeben wir Funktionsrücksendungen, nachdem unser Dokument fertig ist. Warum funktionieren wieder abgestorbene Dollar? Dies ist die Abkürzung für document.ready. Aber ich schreibe diesen ersten gerne, denn wenn ich diesen Akkord nach einem Tag nicht mehr spielen würde, dann könnte ich diese Sortierung vergessen. Aber du kannst verwenden, was du willst. Es ist völlig richtig. Jetzt. Mehr Code in dieser Funktion. Perfekt. 9. 08 Fade und Slide: In jQuery gibt es vier Arten von Defekten, die verwendet werden, um die Sichtbarkeit eines Elements zu verringern. Einblenden, Ausblenden, Toga und V2. Nun, diese Effekte sind ziemlich einfach. Readout wird verwendet, um ein Element auszublenden. Lassen Sie mich Ihnen den Ort dieses Kippeffekts zeigen. Ich füge einfach hinzu, dass diese Argumente dafür nicht mehr ausgeblendet werden. Übrigens, wenn wir sie nicht entfernen, funktioniert es auch, weil Argumente fast ein Wort für alle Effekte sind. Speichern Sie das und schauen Sie es sich an. Klicken Sie auf diesen Button. Und Z, der zweite Absatz ist ausgeblendet. Fading dient jetzt dem Verblassungseffekt. Und Fade Toggle ist sehr nützlich, um den Fading-Effekt umzuschalten. An der Stelle dieses Ausblendens fügen wir den Fade-Schalter hinzu. Also diese, und schauen Sie es sich an, klicken Sie auf, klicken Sie auf Button und sagen Punkt aus. Und Fading-Effekte laufen. Nun wird for it to Effect verwendet, um den Fading-Wert zu behandeln 0-10 bedeutet keine Opazität und eins bedeutet volle Opazität. Hier, richtig? Passt zwei. In der Funktion müssen wir zuerst die Phase dieses Effekts durchlaufen, die, sagen wir, langsam ist. Und dann passieren wir gegenüber D, das heißt, sagen wir 01 phi. Speichern Sie das und schauen Sie es sich an, klicken Sie auf die Schaltfläche und sehen Sie, wie sichtbar der Absatz ist. Lassen Sie uns nun über Nebenwirkungen sprechen, bei denen es sich nur um drei Nebenwirkungen handelt. Sehen wir uns alle Effekte auf einmal an. Also habe ich einfach diesen Fade-Effekt ersetzt. Diese Slides sind umschaltbar. Aktiviere dieses Argument. Speichere das und sieh es dir an. Klicken Sie auf diese Schaltfläche und sehen Sie, wie zuerst nach oben und dann nach unten gleitet. Hier. Sie können die Geschwindigkeit auch in Millisekunden, langsam oder schnell, weitergeben. Dieser Folientumschalter ist sehr nützlich für den Sidebar-Effekt. 10. 09 Animate: Lassen Sie uns nun über die Animate-Methode in jQuery sprechen. Animate with her wird verwendet, um benutzerdefinierte Animationen zu erstellen. Diese Methode hat dieselben Eigenschaften wie andere Effekte, Geschwindigkeit und Rückruf. Aber auf jeden Fall müssen wir Objekt- oder CSS-Eigenschaften übergeben. Das erste Argument, lass mich es dir zeigen. Hier. Ich füge einen Deal mit Glasbox hinzu und füge hier etwas Dummy-Text hinzu. Und ich möchte einige Stile für diese Box hinzufügen. Also fügen wir nach dem Titel ein Style-Tag hinzu. Und für die Box fügen wir das Gewicht 200 Pixel die Höhe 100 Pixel hinzu. Hintergrundfarbe der Dunklen Materie. Speichern Sie das und schauen Sie es sich an. Siehst du, wir bekommen eine Stomata-Box. Wenn ich nun auf diese Schaltfläche klicke, möchte ich die Breite, Höhe und Schriftgröße dieses Textes ändern . Dafür verwenden wir also animierte Eigenschaften. Lassen Sie uns diesen Effekt also entfernen. Genau hier. Dollar-Punkt-Box-Punkt animieren. Jetzt müssen wir an der ersten Position ein Objekt mit CSS-Eigenschaften übergeben. Wir wollen eine Kette anlegen. Also Objekt hinzufügen. Und zuerst wollen wir Bit Garland in doppelten Anführungszeichen ändern , 200 Pixel. Um nun mehrere Eigenschaften hinzuzufügen, müssen wir Kommas verwenden, genau wie bei JavaScript-Objekten. Jetzt Höhe auf 200 Pixel, Koma. Wenn wir nun einen Eigenschaftsnamen in Wörter wie eine Größe haben, dann müssen wir diesen in CamelCase umrechnen, Natrium verschiebt diese Todesfälle und macht das zu Kopf. Und 20 Pixel. Speichern Sie das und schauen Sie es sich an. Klicken Sie auf diese Schaltfläche und sehen Sie, wie Breite , Höhe und eine Größe geändert werden. Jetzt möchten wir manchmal 200 Pixel zur aktuellen Breite hinzufügen . können wir auch mit dieser Methode tun. Hier. Jodid plus entspricht 200 Pixeln. Speichern Sie dies und sehen Sie, dass wir in der aktuellen Debatte um 200 Pixel erhöht werden. Als andere Effekte können wir hier auch die Geschwindigkeits - und Callback-Funktion übergeben. Also hier schreibe ich langsam. Füllen Sie das aus und schauen Sie es sich an. Wir bekommen diese kleine Animation. 11. 10 HTML mit jQuery ändern: Nach und nach haben wir einige Methoden zur Manipulation von DOM-Elementen. Wir können den Text wählen, welche HTML-Elemente , da diese Attributwerte usw. Also gibt es drei Methoden dafür. Punkttext, der verwendet wird, um den Textinhalt ausgewählter Elemente abzurufen oder festzulegen . Punkt-HTML, das verwendet wird, um unser Set zu erhalten, den Inhalt mit HTML-Markup von ausgewählten Elementen. Nun, was verwendet wird, um den Wert von Formularfeldern wie Eingabe, Text, ausgewählt, Checkbox-Wert usw. abzurufen oder festzulegen den Wert von Formularfeldern wie Eingabe, . Sehen wir uns das praktisch hier an. Ich möchte den Text des zweiten Abschnitts erhalten. die Schaltfläche. Ich habe es gerade mit Dollar versucht. Zweiter Punkttext. Dann schnappen Sie sich das mit den Dot Log-Feld-Agenden der Konsole und schauen Sie es sich an. Klicken Sie auf diese Schaltfläche und z, den Text in diesem zweiten Absatz. Jetzt können wir den Text in diesem zweiten Absatz auch so einstellen, wie wir wollen , für diese Höhe genau hier, Dollar-Sekunden-Punkttext. Und hier in dieser Textsache übergebe ich einfach einen weiteren Text wie diesen ist das jQuery Tutorial. Diese Agenden. Und sehen Sie, wenn wir auf diese Schaltfläche klicken, ändert sich der Text. Jetzt haben wir eine zweite Methode namens HTML, die dieser Textmethode sehr ähnlich ist. Also im zweiten Absatz füge ich hier einfach einen fett gedruckten Tag hinzu. Dieser Absatz zwei. Jetzt dupliziere ich in dieser Datei script.js diese Konsolenzeile und ersetze diesen Text durch HTML. Dies, und klicken Sie auf diese Schaltfläche. Entschuldigung, wir müssen diese Zeile kommentieren. Jetzt die Datei und siehe hier bekommen wir den Text mit HTML-Elementen. Steuermethode gibt also nur den Text zurück. Und die STR-Methode gibt den Text mit HTML-Elementen zurück. So einfach ist das. Kannst du jetzt erraten, wie wir das HTML setzen können? Wie gesagt, der Text, oder? Wir schreiben hier einfach als HTML. Und schlechtes Exterieur. Ich füge hier meinen Tag hinzu. Was unterstreicht das? Und z, wir bekommen Text auf Italienisch. Das ist also ziemlich einfach. Was ist nun, wenn ich den Wert eines HTML-Elements erhalten möchte? Sagen wir diesen Button. Hier. Jodid hat eine radiale Haut. Und danach wurde die Dot Val-Methode verwendet, um den Wert dieses Elements zu ermitteln. Also diese und in der Schaltfläche müssen wir einen Wert hinzufügen, Eigenschaftswert entspricht b, d, und diese und z erhalten wir hier. Wenn wir nun diesen Wert ändern wollten, dann können wir ihn auch ändern, indem Wert hier in Wellmaterie übergeben. Jetzt gibt es noch eine Methode oder Attribute. Wenn wir also einen zu spezifischen Attributwert erhalten möchten, verwenden wir die Attributmethode. Schauen wir uns das Beispiel an. also den Attributwert vergessen, müssen wir hier den Attributnamen übergeben. Und wenn wir den Wert dieses Attributs festlegen wollen, können wir hier ein zweites Argument übergeben, so einfach ist das. 12. 11 CSS mit jQuery ändern: In jQuery können wir also ganz einfach Klassen hinzufügen, entfernen und ein- und ausschalten, einfügen. Wir können CSS auf jede einfache Weise manipulieren. Und es ist sehr hilfreich für die Erstellung von Animationen. Nehmen wir an, wir möchten eine Klassenbox hinzufügen. Was ist unser zweiter Absatz. Klicken Sie auf dieser Schaltfläche auf Dollar umschreiben. Zweiter Schultag. Und übergib hier den Klassennamen in doppelten Anführungszeichen. Diese. Wenn wir auf diese Schaltfläche klicken, wird ein Glas für Walks hinzugefügt. Lassen Sie uns das überprüfen. Inspizieren. Klicken Sie also mit der rechten Maustaste auf das Feld und gehen Sie zu Inspect. See Walks Glass wurde hier hinzugefügt. Jetzt wissen Sie bereits, welche Remote-Klassenmethode funktioniert. Es wird die Klasse entfernen. Aber hier ist eine nützliche Sache , nämlich die Sache mit dem Schnellverschluss. Also füge ich an der Stelle dieser Add-Klasse eine Toggle-Klasse hinzu. Jetzt schaltet die Struggle Glass-Methode im Grunde eine Klasse, die wir übergeben haben, zwischen doppelten Anführungszeichen um. Speichere das und sieh es dir an. Sehen Sie, wenn wir auf die Schaltfläche klicken, wird ein Kastenglas hinzugefügt, und klicken Sie dann erneut. Dann wird die Box-Klasse entfernt. Diese Methode ist an vielen Stellen nützlich, z. B. Seitenleistensymbol, wenn wir auf das Hamburger-Symbol klicken. Und es wird eine Klasse hinzugefügt, sodass die Seitenleiste angezeigt wird. Und dann klicken wir erneut. Es wird die Seite verstecken, aber einfache Technik, aber sehr nützlich. Lass mich dir jetzt etwas wirklich Cooles zeigen. Hier. Ich füge Stil pro Klasse hinzu. Zweitens sagen wir 300 Pixel. Und lauf Jason. Alles für alle Immobilien. Zinnabon, zweitens, leichtes Ein- und Aussteigen. Ein Posteingangsstil. Entferne einfach diese Höhe, die hier nicht unbedingt eine Anzeige ist, wichtig für die Breite. Speichern Sie das und schauen Sie es sich an, klicken Sie auf die Schaltfläche und sehen Sie, dass wir diese sanfte Animation haben. Dies liegt an dieser Übergangseigenschaft. Wenn wir also das Glas für die Animation hinzufügen oder entfernen möchten, verwenden Sie diese Übergangseigenschaft, die eine sanfte Animation für Sie hinzufügt. Diese Tricks habe ich sehr spät in meiner Webentwicklungskarriere gelernt . Ich wünschte, ich wüsste das für meine Postprojekte. Und deshalb zeige ich dir diese Tricks. Jetzt haben wir eine weitere Methode, um CSS zu modifizieren, und zwar die CSS-Methode. Es ähnelt der Animationsmethode , die wir zuvor gesehen haben. CSS-Methode wird verwendet, um die CSS-Eigenschaften des ausgewählten Elements abzurufen oder festzulegen . Nehmen wir an, wir möchten die Hintergrundfarbe dieses Deals wissen . Also schreibe ich hier, Dollar DB Punktbox, Punkt CSS. Hier geben wir unseren Eigenschaftsnamen weiter, der die Hintergrundfarbe ist. Dieser Ausdruck, Religion, die Hintergrundfarbe der Box. Speichern wir das in einer Variablen namens Farbe. Und einfach als Protokoll betrachtet. Diese Farben ändern sich und z. Hier bekommen wir diese Farbe. Gehen wir jetzt noch einen Schritt weiter. Also möchte ich jetzt dieselbe Farbe einstellen. Was ist dieser dritte Absatz hier. Ich mag Dollar hat den dritten Punkt als CSS. Und welche Immobilie wollen wir einrichten, oder? Es ist Farbe. Und welchen Wert wir auch setzen wollen, wir müssen ihn an einem zweiten Argument übergeben. Nehmen wir an, wir wollten das so einstellen, dass es genau hier gelesen wird, so. Jetzt wollen wir diese Farbe einstellen, die wir aus dieser Box bekommen. Also schreiben wir hier einfach Farbe. Speichern Sie dies und sehen Sie geschriebene Textfarbe in dieser Feld-Hintergrundfarbe an. Jetzt überlegst du dir vielleicht, wie wir hier mehrere CSS-Eigenschaften setzen können . Dazu müssen wir also Eigenschaften in das Objekt übergeben, genau wie Variety in CSS, aber wir müssen Eigenschaften in doppelte Anführungszeichen schreiben. Lass es mich dir hier zeigen. Habe diese Eigenschaft mit geschweiften Klammern anstelle dieses Kommas gelesen , um den Doppelpunkt neu zu schreiben. Wenn wir nun eine zweite Eigenschaft übergeben wollen, fügen wir hier ein Komma hinzu und in doppelten Anführungszeichen füge ich Hintergrund, Strich, Farbe, Goma, Schwarz hinzu. Beachten Sie, dass wir hier den Eigenschaftsnamen schreiben können, genau wie V CSS schreibt. Aber bei jeder Met-Methode müssen wir das in Camelcase schreiben. Und genau das ist es, dass Entwickler diese CSS-Eigenschaft häufiger verwenden . Speichern Sie das und sehen Sie, wir bekommen unseren Stil hier. 13. 12 Nützliche form: Bombenereignisse sind auch in jQuery wichtig , da Sie sie für die Bearbeitung des Formulars verwenden werden . Es gibt also viele Formereignisse, aber dies sind die Ereignisse, die am wertvollsten sind. Wir haben es mit jeder Art von Gedicht zu tun. Wenn wir alle Ereignisse wissen wollten, verwenden Sie die jQuery-Dokumentation. Im Allgemeinen benötigen Sie jedoch nur diese schlechten Palm-Events. Fokus, Unschärfe, Jane, unterwerfen. Ich entferne einfach den gesamten HTML-Code für den Neuanfang und füge ein Formular mit zwei Eingaben und zwei Optionsfeldern für Geschlecht und einer Schaltfläche zum Absenden hinzu. Sehen wir uns nun die Formularereignisse an. Der erste ist also fokussiert, was ausgelöst wird, wenn wir uns auf etwas konzentriert haben. Nehmen wir an, wir wählen dieses Eingabefeld aus. Sie können diesen Umriss sehen , der ein Zeichen der Konzentration ist. Und wenn wir außerhalb dieses Eingangs klicken, wird er aus dem Fokus entfernt. In dieser Datei script.js. Hydrid-Dollar-Eingang zur Auswahl aller Eingänge und zum Hinzufügen eines Fokusereignisses für diese Eingänge. Jetzt fügen wir hier eine Funktion hinzu, die bei einem Fokusereignis ausgeführt wird. Und dabei möchte ich die Hintergrundfarbe dieser spezifischen Eingabe ändern , die gerade bearbeitet wird. Verwenden Sie nach dem Hinzufügen hier keine Pfeilkonstante Syntax , da jQuery ein Problem mit dieser Syntax hat. Also ändere ich hier die Hintergrundfarbe. Aber du kannst tun, was du willst. Dafür gibt es keine Grenzen. Jetzt genau hier, Dollar, wird das aktuelle Eingabeelement und hier die CSS-Methode hinzugefügt. Und darin: Hintergrundfarbe, Koma, Tomate. Speichern Sie die Änderungen. Und David, C, wenn wir uns auf die Eingabe konzentrieren, ist diese Hintergrundfarbe geizig. Jetzt will ich das nochmal machen, oder? Wenn dieser Input unscharf ist , haben wir ein Blutereignis. Ich dupliziere diesen Code. Auch dieser Fokus soll verschwimmen und die gelbe Farbe verzerren, um dies zu leeren und zu sehen, dass sich die Hintergrundfarbe ändert, wenn wir uns auf Schulden konzentrieren . Und dann wieder zur Normalität. Sehen wir uns nun das Änderungsereignis an. Dieses Ereignis wird ausgelöst , wenn sich der Wert von etwas ändert. Ich dupliziere diesen Kern noch einmal. Und an der Stelle der Unschärfe füge ich eine console.log hinzu. Dollar, dieses dunkle Netz. Speichern Sie dies und sehen Sie, wenn wir diesen Optionsfeldwert ändern, erhalten wir diesen Wert. Und wenn wir etwas in ein Textfeld schreiben und dann Glukose aus dieser Eingabe entfernen, ändert sich ein Eingabewert. Und dann können wir diesen Wert hier sehen. Sehen wir uns nun das Ereignis zum Einreichen an. Bisher müssen wir die Veranstaltung einreichen, wir müssen unsere Formular-ID angeben, sagen wir, Anmeldeformular. Jetzt in der Datei script.js, Dollar, Gefahrenübergänge und Formular. Und dann fügen wir Event einreichen hinzu. Übergeben Sie nun die Funktion, die beim Absenden ausgeführt wird. In dieser Funktion schicke ich das Dot Log-Formular einfach erfolgreich ab und schaue es mir an. Wenn wir auf diese Schaltfläche klicken. Sehen Sie sich diese Nachricht erneut in der Konsole an, aber nur eine Millisekunde. Und dann unser Basisupdate. Also lasst uns damit aufhören. Im Submit-Ereignis erhalten wir also hier das Ereignisobjekt am ersten Parameter. Und in diesem Objekt haben wir einen Methodenaufruf prevent default, der das Standardverhalten von submit event verhindert, das die Seite unterdrückt. Also richtig, Event, Dot Prevent Default. Rette sie und Degas. Sehen Sie, Sie können hier die eingereichten Formulare sehen. Das sind also diese Formularereignisse in jQuery, die Ihnen bei der Formularverarbeitung helfen werden. 14. 13 AJAX in jQuery: Bevor wir also anfangen, Ajax zu lernen, sollten wir verstehen, was h , x und y wir brauchen. Asic steht für Asynchronous JavaScript. Und XML. In einfachen Worten, bei is x geht es darum, Daten im Hintergrund zu laden und auf der Webseite anzuzeigen, ohne die gesamte Seite neu zu laden. Viele beliebte Anwendungen wie Gmail, Instagram, Facebook, YouTube und viele mehr verwenden Ajax, um Daten im Hintergrund zu laden und diese vorhandenen Daten zu aktualisieren. Wenn Sie feststellen, dass, sobald Sie diese Website geladen haben, auch wenn Schüler etwas oder jemand an Ihre E-Mail geschickt hat, dann wird nicht die gesamte Website geladen. Das kann von HX gemacht werden. Hx an sich ist etwas komplex, aber wir können Ajax auch in jQuery auf sehr einfache Weise verwenden. Daher bietet jQuery verschiedene Methoden für die Ajax-Funktionalität. Die erste ist niedriger und wird verwendet , um Daten vom Server in HTML-Inhalten zu laden. Zweitens, das verwendet wird, um Daten vom Server mithilfe von HTTP GET Request and Post zu laden, was zum Senden und Laden von Daten vom Server mithilfe einer HTTP-Post-Anfrage verwendet wird . Fangen wir mit Nummer eins an, die niedrig ist. Also hier habe ich diesen vorherigen Akkord in einer JS-Datei demonstriert. Das brauchen wir nicht mehr. Und auch aus einer HTML-Datei. Und füge hier nur einen Deal mit ID-Ausgabe hinzu. Jetzt erstelle ich eine neue Datei namens sample.txt. Und darin füge ich etwas Text hinzu, als ob das ein Beispieltext ist. Was ist X in D? Grady? Speichere das. nun in dieser Ausgabe diesen Text anzeigen, Möchte ich nun in dieser Ausgabe diesen Text anzeigen, den wir in diese Datei sample.txt schreiben. In der Datei script.js hat Rewrite Dollar also eine Ausgabe , in der wir den Text anzeigen möchten. Dunkler Herr. Jetzt fügen wir beim ersten Parameter hier unsere Datei-URL hinzu, die Beispiel Punkt dx dy ist. Wenn wir dann Daten mit dieser Anfrage senden möchten, können wir diese Daten in den zweiten Parameter übergeben. Aber hier wollen wir keine Daten weitergeben, also schreiben wir nichts. Jetzt haben wir endlich eine Funktion mit drei Parametern, Antwortstatistiken, eine XHR. Lasst uns jeden von ihnen trösten. Und z, was bekommen wir? Das? Und Degas, sieh hier, wir bekommen unsere Texte und in der Konsole erhalten wir als Antwort unseren Text. Stattdessen als Text. Wir haben Erfolg, weil wir diese Daten erfolgreich erhalten. Und ein XHR, das ist ein XML-HTTP-Anforderungsobjekt. Wir können so etwas tun. Hier bestehe ich die Bedingung. Wenn x gleich Erfolg ist, dann ist die Warnung erfolgreich. Und wenn Statustext zwei Fehlern entspricht, dann Alert Adder plus XHR-Punkt-Statustext. Speichern Sie das und sehen Sie, wir haben hier Erfolg. Jetzt mache ich einen Tippfehler im Dateinamen und versiegle diesen Z, den wir hier bekommen, sind nicht gefunden. So erhalten wir Daten mit der Lademethode. Lassen Sie uns nun sehen, wie GetMethod verwendet wird. Ich kommentiere dieses Ziel. Und danach kriegt man Jodid nicht. Nun musst du als Plus-Star-Befehl unsere API übergeben, du fügst n. Also zurück zum Browser und suche nach Jason place holder. Öffne diesen Link. Scrollen Sie nach unten und hier erhalten Sie eine API zum Verkosten. Ich möchte die Daten dieses Benutzers erhalten. Also kopiere ich diese URL. Für den zweiten Parameter müssen wir nun die Callback-Funktion übergeben, die ausgeführt wird, nachdem wir Daten erhalten haben. Und wir erhalten auch Daten und Status als Parameter. Lassen Sie uns diese Daten nun einfach console.log erstellen und sie mit Status versehen. Und sieh es dir an. Hier haben wir eine Reihe von Benutzern. Und Status ist Erfolg. In dieser Funktion tun Sie, was auch immer Sie wollen, um diese Daten anzuzeigen , indem Sie Loop auf unserer Webseite oder so verwenden. Die Möglichkeiten sind grenzenlos. Du musst nur nachdenken. Sehen wir uns nun an, wie man die Post-Methode verwendet. Die Methode wird normalerweise zum Senden von Daten verwendet. Also schreibe ich hier einfach einen Dollar Dot Post. Kannst du jetzt erraten, was das erste Argument sein wird? Stimmt das? Es ist eine API-URL. Ich füge einfach dieselbe API und dieselben bestimmten Benutzer zum Posten ein, die verwendet werden, um neue Beiträge hinzuzufügen. Zuvor haben wir die Callback-Funktion, das zweite Argument, hinzugefügt . Aber hier fügen wir Daten als zweiten Parameter hinzu. Diese Daten hängen von APA ab, unterschiedliche API, jedoch unterschiedliche Datenobjekte mit Titel. Das sind Daten und Körper. Das ist Körper. Und endlich müssen wir die Callback-Funktion übergeben. Also habe ich einfach von getMethod kopiert und hier eingefügt. Und sieh es dir an. Sehen Sie, hier erhalten wir diese Daten mit 101 Post-ID und der Status ist erfolgreich. So funktioniert Ajax in jQuery. Heutzutage verwenden wir die Rezeptmethode, die noch einfacher ist. Ich wollte es dir nur in jQuery zeigen, aber du kannst verwenden, was du willst. Es hängt ganz von dir ab. 15. 14 Website auf einer Scrolle animieren: Jetzt ist es an der Zeit, etwas Aufregenderes zu lernen, was jeder Webentwickler lernen muss. Und das ist vertikale Integration beim Scrollen. Schauen Sie, wie schön diese Website aussieht, wenn wir Animationen beim Scrollen hinzufügen. Also habe ich diese Projekt-Website gegeben. Sie können Animationen also direkt auf dieser Website üben. Dieses Projekt habe ich erstellt, als ich an einem HTML- und CSS-Kurs gearbeitet habe. Aber ich habe die Erstellung dieses Kurses für einige Zeit eingestellt. Und konzentriere dich nur auf die YouTube-Tutorials. Ich öffne dieses Projekt, diese Datei index.html, die auf dem Server lebt. Lassen Sie uns die Logik dieser Animation verstehen. Wir scrollen auf der Webseite. Wann dieser Abschnitt angezeigt wird. Dann müssen wir diesen Abschnitt mit Animation anzeigen. Also hier müssen wir nur zwei Schritte ausführen. Wir müssen herausfinden, an welcher Stelle dieser Inhalt angezeigt wird. Und zweitens müssen wir Animationen für diesen Inhalt hinzufügen. Die erste Frage ist also, wie wir den Inhalt identifizieren können. Dafür verwenden wir ein jQuery-Plugin namens Pay Points, Water Adding any Missions, wir verwenden eine Bibliothek namens Animate ab.js. Diese Bibliothek hat fast 100 Arten von Animationen. Sind beide Probleme gelöst. Sehen wir uns das jetzt in der Kohle an. Dazu müssen wir also zunächst drei CDN-Links hinzufügen. Zuerst ist einer für jQuery, dann für Wegpunkte und dann für jedes main.css, jQuery CDN, öffnen Sie diesen ersten Link und wählen Sie dieses minimierte CDN. Kopiere das und am Ende des Textes. Basiert es. Nun zurück zum Browser und suche nach dem Wegpunkt-CDN. Und öffne diesen CDN GAS-Link. Stellen Sie nun sicher, dass Sie diesen jQuery-Punkt-Wegpunkt-JS-CDN-Link kopieren . Jetzt nach dem jQuery CDN, CDN-Link. Nun wieder, Vector Browser hat Animate CSS auf diesen ersten Link geantwortet . Und im Abschnitt Installation und Verwendung erhalten Sie den CDN-Link, kopieren Sie ihn und fügen Sie ihn in den Kopfbereich ein. nun jQuery-Code zu schreiben, müssen wir eine JS-Datei erstellen. Ich erstelle einen Ordner namens Jazz. Und in diesem Ordner erstellen Sie eine neue Datei namens script.js. Lassen Sie uns diese Datei nun mit unserer Datei index.html verknüpfen. Nach dem Waypoint-CDN-Link fügen wir ein Skript mit Quelle hinzu. Und hier, ja, es ist weniger script.js. Speichern Sie dies und kehren Sie zur Datei script.js zurück. Hier fügen wir Dollar Document Dot Ready hinzu. Und darin fügen wir Funktion hinzu. Die Einrichtung ist abgeschlossen. Schauen wir uns nun die Animation an. Sagen wir West, wir möchten diesem Titel des Inhaltsverzeichnisses Animationen hinzufügen . In der HTML-Datei müssen wir diesem Element also eine Klasse oder ID geben. Wir können dieses spezifische Element auswählen, indem diese Seitenansicht hier verwenden Klasse entspricht zwei Inhaltsverzeichnissen. Daten. Spar dir das auf. Und in der Datei script.js, Titel des Dollar-Inhaltsverzeichnisses, Wegpunkt. Und dabei müssen wir eine Funktion übergeben, die ausgeführt wird, wenn dieses Elementar oben auf der Seite steht. Nun in dieser Funktion wurde das, was unsere Animation genannt hat. Was wollen wir im Grunde tun, wenn dieses Element an die Spitze rast? Also erstmal schreibe ich einfach console.log ganz oben. Vertrieb ist. Und schau es dir an, öffne die Konsole und scrolle auf der Seite. Siehst du, wenn diese Daten nach oben rasen, bekommen wir diese Nachricht. Der Wegpunkt funktioniert also. Lassen Sie uns nun eine Animation dafür hinzufügen. Also auf jeden Fall, Punkt CSS-Website. Von hier aus können Sie die verschiedenen Arten von Animationen auswählen . Und wenn wir den Mauszeiger über sie bewegen, erhalten Sie ein Kopiersymbol. Jetzt hier, ich will diesen Zeitraum in linker Animation haben. Also kopiere die Gegner in den Klassennamen. In der Datei script.js. Genau hier. Dollar-Tabelle von enthalten. Dot Agg-Klasse. Zuallererst müssen wir hier jede Methodenklasse schreiben, animieren, doppelt unterstreichen , denn ohne Schulden funktioniert keine Animation. Und danach fügen wir einfach unsere Animation ein. Also diese Anden und die Farbe Narben auf dieser Seite. Und wenn dieser Titel an die Spitze rast, sehen Sie, wir können die Animation sehen. Aber hier ist das eine Problem. Wenn wir nicht nach oben kommen, ist dieser Titel immer noch sichtbar. Also müssen wir es zuerst verstecken. Im Ordner Styles. Öffnen Sie diese CSS-Datei in diesem Stil. Hallo Dan, Jodid, Stil für einen Kommentar zur Animation. Für einen Titel des Inhaltsverzeichnisses aus Glas. Wir haben die Opazität auf Null gesetzt. Und nach diesem gläsernen Inhaltsverzeichnis-Titel animiert, doppelter Unterstrich animiert. Wir machen die Opazität zu eins. Dies ist das Glas, das wir in unserer ED-Klassenmethode hinzugefügt haben. Speichern Sie dies und sehen Sie, welcher Status nicht sichtbar ist. Dann erreichen wir die Spitze. Dann läuft diese Animation. Nun, hier ist eine letzte Ausgabe. Es ist das, wir wollen die Animation sehen, wenn der Titel gleich zu Beginn auf die Hälfte des Bildschirms erhöht wird. Um das in dieser Waypoint-Funktion zu zeigen, müssen wir einen zweiten Parameter übergeben, nämlich Objekt und indirektes Objekt. Wir haben eine Eigenschaft namens Offset. Und in doppelten Anführungszeichen geben 50 bis 80 Prozent weiter, was auch immer Sie möchten. Speichern Sie das und schauen Sie es sich an. Siehst du, wenn der Titel zu 80 Prozent nach oben reicht, wird diese Animation ausgeführt. Sie können also sehen, wie einfach es ist, diese Animation anzuwenden. Jetzt möchte ich, dass Sie dieselbe Animation dieser drei Haupttitel ausprobieren . Unterbrechen Sie das Video und versuchen Sie, das Problem zu lösen. Und danach schauen Sie sich die Lösung für diese Titel an. Ich habe ihnen schon Ausweise gegeben. Also dupliziere ich diesen Code. Am Ort dieses Kurses. Wir fügen ein Intro hinzu. Hier, hat auch ein Intro. Und in style.css müssen wir den gleichen Stil für das ID-Intro hinzufügen. Wir fügen hier ein Komma und ein Intro hinzu. Hier. Intro, animieren, doppelt unterstreichen, animieren und sehen, wir bekommen diese Animation. Jetzt habe ich hier in der Datei script.js eine Variable erstellt. Lassen Sie dieses Offsetobjekt versetzten. Also schneide das aus und füge es hier ein. Schreiben Sie jetzt einfach hier, Offset auch hier, entfernen Sie dieses Objekt und fügen Sie Offset hinzu. Siehst du, jetzt sieht unser Code besser aus. Jetzt möchte ich Sie nicht langweilen, indem ich Ihnen jede einzelne Animation für dieses Projekt zeige . wirst du selbst versuchen. Also ganz schnell, ich füge alle Animationen für dieses Projekt hinzu, außer diesen Links und der Dauer. Weil wir hier eine Verzögerung für die letzten beiden Links hinzufügen müssen. Für diese Verzögerung müssen wir jedem Link eine eindeutige Klasse oder ID in der HTML-Datei geben . Hier das Element auflisten, die Alt-Taste in Windows und die Option in Mac gedrückt halten. Und erstellen Sie mehrere Cursors, indem Sie darauf klicken. Und richtige Klasse. Unterstrich auflisten, eins unterstreichen. Drücken Sie nun Escape Engines, diese beiden bis dahin ein oder drei Tage. In der Datei script.js. Ich kopiere die Animation dieses Titels. Und am Ende füge ich es ein. Jetzt nur im Selektor. Also dunkle Liste, verlinke eine hier. Also Punktliste Link eins. Und im Animationsfilm will ich bezahlt werden, oder? Replizieren Sie dieses Ziel nun, um mehr Zeit zu haben, und ändern Sie die Selektoren. Zuhören, Anhören und weniger Linked. Liste wurde an drei Tagen verlinkt. Und in der Shine Dot CSS-Datei machen wir dasselbe für diese drei Klassen. Diese NDA-Farben. Jetzt fragst du dich vielleicht, was ist die Verzögerung? Bisher, Verzögerung in der Datei style.css, haben wir einen Punktlisten-Link zu einer Animationsverzögerung von 0,15 s hinzugefügt . Duplizieren Sie nun diesen Stil und ändern Sie ihn für List linked three und verzögern Sie ihn auf 0,3 s. Also die Teilnehmer und schau es dir an. Siehst du, wir bekommen diese tolle Animation. Aber bei jedem Link und beim Kauf dieser Animation wird der Benutzer wissen, dass unsere individuellen Links. Sie können also sehen, wie einfach und unkompliziert es ist, beim Scrollen Animationen hinzuzufügen. Du musst nur die Logik verstehen. Ich hoffe, du wirst aus diesem Tutorial viel lernen.