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.