jQuery 101: Lerne jQuery (mit JavaScript) von Grund auf neu

1. Einführung in den Kurs: Willkommen bei jQuery 101, jQuery für Anfänger. Fangen wir mit der großen Frage an. Wird jQuery immer noch verwendet? Und die Antwort ist absolut ja. Jquery ist verantwortlich für das JavaScript auf Hunderten von Millionen von Websites. Das werde ich wiederholen. Jquery ist verantwortlich für das JavaScript auf Hunderten von Millionen von Websites. Jquery wurde ursprünglich erstellt, um eine Lücke zwischen Browsern zu schließen, bevor JavaScript mehr standardisiert wurde, Internet Explorer und Firefox verwenden JavaScript anders. Chrome und Safari haben JavaScript anders implementiert. Und jQuery war, wie Sie eine Sprache bewerten konnten, die gerade funktioniert hat. Schau, ich weiß, dass viele Leute sagen, dass Sie jQuery ganz überspringen sollten, aber bedenken Sie das, wenn es von über 100 Millionen Websites verwendet wird und immer noch von Organisationen wie Django und dem Jangle-Framework bevorzugt wird, dann gibt es eindeutig eine Marktnachfrage nach dieser Fertigkeit. Wenn Sie in letzter Zeit in JavaScript einsteigen, ist dieser Kurs genau das Richtige für Sie. Wenn Sie ein Back-End-Entwickler sind und nettes JavaScript schreiben möchten , ohne ein ganzes Framework wie React lernen zu müssen, ist dieser Kurs genau das Richtige für Sie. Um das Beste aus diesem Kurs herauszuholen. Sie müssen ein wenig HTML wissen. Und wenn Sie ein wenig CSS kennen, wird das hilfreich sein, aber es ist nicht erforderlich. Und um wirklich das Beste aus jQuery zu machen, sollten Sie ein einfaches altes nur Vanille-JavaScript kennen. Hallo, ich bin Caleb, sag es mir und ich benutze jQuery, seit es 2006 erfunden wurde. Ich habe über 300.000 Studenten unterrichtet und mit Kunden wie nasa, Mozilla, der Arctic Research Foundation, Samaritans und dem National Health Service in Großbritannien zusammengearbeitet Mozilla, der Arctic Research Foundation, . Und das ist meine jQuery 101-Klasse. Vielen Dank, dass Sie sich dieses Einführungsvideo angesehen haben, und wir sehen uns drinnen. 2. Was ist jQuery und warum lernst du?: Jquery ist, wie wir eine Form von JavaScript schreiben und es perfekt auf allen Browsern ausführen lassen. Dies ist hilfreich, da Browser JavaScript nicht auf die gleiche Weise implementieren. Einige haben unterschiedliche Regeln. Einige vertrauen bestimmten Funktionen, die Sie erstellen und nicht, und sie machen Sie anderen Code für verschiedene Browser zu schreiben. Jquery überbrückt diese Lücke, was bedeutet, dass Sie JavaScript für alle Browser schreiben können und es wird immer einfach funktionieren. Sie müssen sich nicht mit verschiedenen Browser-Unterstützung auseinandersetzen. Jquery wird auch als Bibliothek betrachtet. Es ist kein Framework, was bedeutet, dass Sie Ihr normales JavaScript damit mischen dürfen und nichts Schlimmes könnte passieren. Und es gibt keine strengen Möglichkeiten, Ihr JavaScript mit jQuery zu schreiben. Während mit einem Framework wie View WAS OR dot js reagieren, gibt es bestimmte Regeln, denen Sie folgen möchten, und es gibt viel Magie hinter den Kulissen, die Sie nicht sehen. Das macht das Lernen anderer Frameworks wie Reagieren ein wenig schwieriger. Ab etwa 2019 JS und vis.js sehr populär. Und die Leute sagen jetzt Dinge wie: Oh, mach dir keine Mühe, jQuery zu lernen, aber es wird buchstäblich auf Millionen und Millionen und Millionen von Websites verwendet. Warum sollten Sie nicht eine Fertigkeit lernen, die so deutlich gefragt ist? Und das Schöne ist, dass Sie jQuery in einem einzigen Tag lernen können , reagieren dot js oder view dot js wird eine lange Zeit dauern, weil es so große Frameworks gibt, sie sind auch mächtig. Aber wenn Sie nur ein wenig Hilfe mit Ihrem JavaScript benötigen oder einfach weniger Code schreiben möchten, ist jQuery 100% für Sie. Und Wahrheit wirklich aus der Perspektive der Senior-Entwickler, Sie brauchen nicht, um jQuery zu lernen oder zu reagieren oder zu sehen. Sie können alles mit Vanille oder einfachem JavaScript tun, aber diese Tools helfen uns, mehr mit weniger Code zu tun. Darüber hinaus, und wieder, ist dies eine Wahrheitsbombe, die React dot js verwendet oder dot js auf etwa 95% aller Websites vollständig Overkill verwendet. Sie werden am Ende zu viel Zeit damit verbringen, reagieren für eine kleine Funktion zu schreiben , die mit jQuery in wenigen Minuten, manchmal in Sekunden, geschrieben werden kann . Deshalb beschließe ich, Vanille-JavaScript oder jQuery auf den meisten meiner Website zu schreiben. Es sei denn, es gibt einen echten Bedarf an etwas Großem und Komplexes, dann neige ich dazu, zu wählen, zu reagieren oder zu sehen. Der Grund, warum Sie jQuery lernen sollten, ist, weil einfach die Marktnachfrage Hunderte von Millionen von Websites es verwenden. Du könntest genauso gut lernen, was gefragt ist. 3. jQuery auf deiner Website installieren: Hallo und willkommen zu unserer ersten Lektion über jQuery. In dieser Lektion werden wir jQuery auf unserer Website installieren. Also zuerst müssen wir einen Browser öffnen und zu jQuery.com gehen. Jetzt gibt es zwei Möglichkeiten, jQuery zu installieren. Wir können diese herunterladen und lokal auf unserem Computer verwenden. So können wir eine tatsächliche Datei auf unserem Computer verwenden, oder wir können dieses Ding verwenden, das als Content-Delivery Network bezeichnet wird. Also klicke ich dort auf den Download-Button und wir können herunterladen, herunterladen, herunterladen. Es gibt einen anderen Weg, wie wir Garn und PM Bauer verwenden können, all diese anderen Dinge. Oder wir können den besseren Weg nehmen und wo es andere CDNs sagt, können wir Google CDN verwenden, Microsoft CDN JS oder liefern oder Jazz liefern. Und ich werde nur JS verwenden, die aus keinem bestimmten Grund geliefert wurde. Und in diesem Kurs werden wir jQuery 3.5.1 verwenden. Und was ich hier tun will, ist die verkleinerte Version zu bekommen , weil wir nicht den ganzen zusätzlichen Quellcode brauchen. Wir brauchen nicht alle zusätzlichen Abstände oder Codekommentare. Wir brauchen nur das eigentliche JavaScript und es ist uns egal , wie es aussieht, weil wir jQuery als Bibliothek verwenden. Lassen Sie uns also den HTML-Code kopieren und öffnen Sie Visual Studio-Code oder einen Texteditor, den Sie verwenden möchten. Lassen Sie uns hier eine neue Datei erstellen. Lassen Sie uns HTML fünf machen. Das wird nicht funktionieren. Wir müssen das zuerst retten. Also werde ich das als index.html speichern. Und dann kann ich HTML-Doppelpunkt fünf machen, Tab drücken und es füllt automatisch ein paar coole Sachen für uns. Und wir können jQuery eins-zu-eins als Titel tun. Wenn wir JavaScript verwenden, möchten wir normalerweise JavaScript am unteren Rand unseres Körpers setzen, nicht außerhalb des Körpers, sondern nur unten, vor dem schließenden Body-Tag. Und den Code, den ich dort kopiert habe, füge ich ihn hier ein. Und wir werden sehen, dass dies von CDN ab.js deliver.net slash npm yada, yada, yada kommt . Und das, was ein Content-Delivery Network ist, ist im Grunde eine Reihe von Servern auf der ganzen Welt. Und wenn Sie versuchen, diese bestimmte Datei herunterzuladen, wird sie zum nächstgelegenen Server gehen, dem Ihnen am nächsten liegt. So wird es schneller heruntergeladen werden. Das Schöne daran ist, dass sie auch eine Ebene des Cachings bereitstellen können. Und wenn es Caching gibt, bedeutet das, wenn jemand dies bereits von einer bestimmten Website irgendwo anders im Internet heruntergeladen hat , und Sie jetzt auf dieselbe Datei zugreifen, ist bereits auf Ihren Computer heruntergeladen worden. Und so müssen Sie es nicht wieder herunterladen, was wirklich, wirklich schön ist. Und das ist eigentlich der Grund, warum wir ein Content Delivery Network oder CDN verwenden, ist, weil wir diese zusätzliche Schicht von Caching wollen, nur um unsere Websites super schnell zu machen. Es bedeutet auch, dass wir keine zusätzliche Datei pflegen müssen. Nun, wenn wir dies schreiben, müssen wir ein Skript-Tag und ein schließendes Skript-Tag haben. Und im Inneren von hier werden wir darauf warten, dass jQuery richtig geladen wird. Obwohl diese Datei technisch auf Ihrem Computer heruntergeladen werden könnte, hat Ihr Browser möglicherweise nicht vollständig erkannt, dass die gesamte Datei dort ist ein Ende ausgewertet oder den Code noch ausgeführt, so dass er möglicherweise nicht vollständig weiß. Und so tun wir diese Sache, wo wir warten, bis es geladen wird, und wir tun das mit dieser seltsamen kleinen Syntax und wir werden über Syntax in seiner eigenen Lektion sprechen. Aber im Moment müssen wir das nur zum Laufen bringen, damit wir document.ready machen können. Funktion, Console.log. Jquery ist geladen. Und was wir hier tun, ist, wir sind ein, wieder, wir werden über Syntax und ein wenig sprechen. Aber wir verwenden dies als Selektor. Wir wählen das gesamte Dokument, die gesamte Seite, und wenn es fertig ist, wenn das Document Object Model geladen ist, wenn unser JavaScript fertig ist, führen Sie das Laden diese Funktion aus, und das wird als Callback-Funktion darüber auch reden. Und dann, wenn das alles erledigt ist, wird nur das Konsolenprotokoll jQuery geladen. Und so, wenn wir zu unserem Browser gehen, öffnen Sie eine neue Registerkarte und oben darauf geht, um Datei, das ist etwas außerhalb meines Aufnahmebereichs, aber ich möchte nur Datei und dann können wir gehen, um Datei zu öffnen, wählen Sie unsere index.html Datei. Und wir werden sehen, dass absolut nichts passiert. Aber wenn wir mit der rechten Maustaste klicken und zu Inspect gehen und zur Konsole gehen, und lassen Sie uns das Protokoll dort nicht beibehalten. Es ist nur eine Einstellung aus einem Projekt, an dem ich gearbeitet habe. Lasst uns das vergrößern. Es besagt, dass jQuery geladen ist. Jedes Mal, wenn ich aktualisiere, sagt es, jQuery ist geladen und es sollte fast sofort sein. Du würdest also gar nicht bemerken, dass es so ist oder nicht. Bewerten Sie Ihr JavaScript, Ihre jQuery-Bibliothek. Es soll super schnell sein, aber das ist eine gute kleine Methode, nur um sicherzustellen , dass wir jQuery weiterhin in unserem Code verwenden können. Also vor allem, was ich möchte, dass Sie tun, ist sicherzustellen, dass Sie jQuery von einem Content-Delivery-Netzwerk holen, eine brandneue Indexdatei wie diese erstellen und dann einfach dieses seltsame kleine Skript hier schreiben. Und wieder, wir werden das immer und immer wieder sezieren. So werden Sie super vertraut sein mit dem, was das eigentlich ist, aber Sie müssen dies nur schreiben, um damit zu beginnen. Und dann werden wir mit der nächsten Lektion fortfahren. Also, wenn Sie das getan haben und Sie bereit sind, gehen wir über die nächste Lektion, wo wir richtig über jQuery-Syntax sprechen. 4. jQuery Syntax: In Ordnung, wenn wir über jQuery-Syntax sprechen, ist es sehr ähnlich wie JavaScript-Syntax. Es ist eigentlich, es ist nur alles in JavaScript geschrieben ist nur eine bestimmte Möglichkeit, unser JavaScript zu schreiben. Und so haben wir in unserer letzten Lektion diese seltsame document.ready Funktion Dinge geschrieben. Also lasst uns das ein bisschen zusammenbrechen. Das ist, wo wir all unseren Code in jede Lektion setzen , die vorwärts geht, wenn wir über jQuery sprechen. Aber die Syntax hier, der Stil, in dem sie geschrieben ist, sieht sehr ähnlich aus. Also haben wir ein Dollarzeichen mit Klammern, und das ist unser Selektor. Und wenn Sie von JavaScript kommen, ist dies sehr ähnlich wie die Dokumentpunkt-Abfrage-Selektor-Methode. Der einzige Unterschied ist, dass wir das nicht mehr schreiben müssen. Wir können hier einfach ein Punkt-Div schreiben und das wird es für uns auswählen. Und so ist es eine nette kleine Abkürzung. Also hier haben wir einen Selektor, einen Selektor. Dann haben wir eine Art von Funktion oder Ereignis oder Methode oder, oder etwas passiert mit diesem Selektor. Und so sehen wir hier oben, wir sehen bereit. Also haben wir das Dokument ausgewählt und wir werden sagen, wenn es fertig ist oder wenn wir eine Schaltfläche haben, können wir onclick sagen oder wir können etwas tun. Es gibt also eine Art von Ereignis, das hier passiert. Und das an sich ist nur eine Methode oder eine Funktion. Und dann braucht es dieses Ding, das eine Callback-Funktion genannt wird. Und die meisten Dinge in jQuery nehmen eine Callback-Funktion. Also wird es etwas tun. Also wird es etwas auf Ihrer Seite auswählen. Es wird dann ausführen oder, oder registrieren Sie eine Art von Ereignis. Und dann, wenn das Ereignis passiert, was tun wir dann? Und hier wickeln wir es in eine Funktion ein. Dies ist also nur eine anonyme Funktion und dies stellt nur sicher, dass alles hier im Bereich bleibt. Es ist also eine nette Möglichkeit, sicherzustellen, dass Ihre Variablen nicht aus diesem bestimmten Bereich austreten. Nun, in unserem Körper hier oben, wir an, wir haben einen Punkt benutzerdefinierten Klassennamen mit einer ID der benutzerdefinierten ID. Und so kannst du sehen, wie ich das geschrieben habe. Wenn ich das einfach rückgängig mache, können Sie sehen, dass ich einen Punkt benutzerdefinierte Klassennamen-ID, Kunden-ID geschrieben habe. Und das ist genau wie beim Schreiben von CSS. Also, wenn Sie CSS bereits kennen, wird das unglaublich einfach für Sie sein. Dies ist reguläres CSS und es ist zufällig, dass VS Code dieses Ding hat, das Emmett-Abkürzungen genannt wird. So können Sie Ihr CSS schreiben und einfach Tab drücken und es wird Ihr Element für Sie erstellen. Also können wir hier drinnen sagen, Hallo Welt. Und jetzt mit unserem Selektor, und lassen Sie uns voran und erstellen Sie hier ein neues Beispiel. In der letzten Lektion haben wir die document.ready Funktion, yada, yada. Wir können Semikolons verwenden. Wir müssen keine Semikolons verwenden, sein normales JavaScript. So gelten immer noch reguläre JavaScript-Regeln. Und wir können hier einen Selektor verwenden, damit wir diesen so auswählen können. Und wir können hier etwas tun. Und das wird dieses auswählen. Wir können auch benutzerdefinierte Klassennamen sagen, und das wird diese AS dieses H1 zusammen mit jedem anderen Element auswählen , das diesen Klassennamen hat. Oder wenn wir etwas völlig Einzigartiges bekommen wollten, könnten wir ID, benutzerdefinierte ID tun. Und wieder, das ist nur reguläres CSS. Und wenn wir CSS, CSS schreiben , so schreiben wir es sowieso. So erstellen wir eine benutzerdefinierte Deklaration mit einem CSS-Selektor. Und so machen wir in jQuery genau das Gleiche, und in modernem JavaScript machen wir genau das Gleiche. So haben wir mehrere verschiedene Möglichkeiten. Wir könnten sogar wirklich spezifisch werden und sagen, greifen Sie alle H 1s mit einem benutzerdefinierten Klassennamen. Und sagen wir, der Text wird mich geändert und wir springen hier ein bisschen mit der Waffe. Und wir werden etwas über den Text auf der Straße erfahren. Aber ich wollte Ihnen zeigen, dass dies ein Beispiel ist. Also, was das tun wird, ist wählen Sie dieses Element hier oben. Und dann wird es die Steuer nehmen und sie von helloworld ändern, die wir wissen, was Hallo Welt in großen Buchstaben machen wird. Und es wird sagen, hat mich geändert oder lassen Sie es zu ändern Dies wurde über jQuery geändert. Lasst uns das retten. Aktualisieren Sie unsere Seite. Und es sagt, dass dies über jQuery geändert wurde. Aber wenn ich schnell genug erfrische, können Sie sehen, dass es flackert. Und wenn ich mit der rechten Maustaste klicke und meine Quelle ansehe, machen wir das nur ein kleines bisschen. Wir können sehen, dass es tatsächlich Hallo Welt sagt. Also, wenn die Seite macht es sagen hallo Welt hier drin. Aber sobald jQuery geladen ist, ändert es es in. Dies wurde über jQuery geändert. Nun, das ist so ziemlich die ganze Syntax, die wir jetzt wissen müssen gibt es ein bisschen mehr, wenn es um Ereignis-Listener geht, aber wir werden das anpacken, wenn wir zu Ereignis-Listern kommen , damit ich Sie nicht mit viel überwältige von Informationen in diesem Moment. Aber das, was du jetzt wissen musst, ist das und das. Nun, was ich möchte, dass Sie tun, ist dieses exakte Beispiel. Gehen Sie voran und erstellen Sie ein H1, wählen Sie dieses irgendwie mit Klassen-ID oder einem Element-Selektor aus. Und dann ändern Sie den Text mit Punkttext und fügen Sie eine Art von neuen Text in ihre angezeigt auf Ihrer Seite, wenn es richtig ändert. Während ich, Sie jetzt etwas jQuery geschrieben haben, ist es so einfach. Wenn du fertig bist, lass uns zur nächsten Lektion gehen. Wir werden ein wenig mehr über Selektoren sprechen, speziell. 5. jQuery Auswahlmöglichkeiten: Okay, willkommen zurück. Lassen Sie uns über Selektoren sprechen. So ist ein Selektor weitgehend das, was jQuery gebaut ist. Und der Grund dafür ist, dass Sie bei der Arbeit mit JavaScript normalerweise mit Ihrem Dokumentobjektmodell arbeiten, bei dem es sich um Ihren HTML-Code handelt. Und die Art, wie es strukturiert ist, ist das Ihr Dokumentobjektmodell auf den Punkt gebracht. Und so können wir hier ein H1 haben, und das könnte unser benutzerdefinierter Titel sein. Und lassen Sie uns einfach ein Beispiel hier aufstellen. Wir können hier einen Knopf haben, und das ist, das ist eine benutzerdefinierte Schaltfläche. Lassen Sie uns voran und wählen Sie Absatz. Und lasst uns weitermachen und etwas Lorem reinlegen. Lassen Sie uns von einem Django-Vorlagen zu einer Standard-HTML-Vorlage wechseln. Also, wenn ich Lorem, Hit tab, Ich bekomme lorem ipsum p. Hit Tab, Ich bekomme einen Absatz, Lorem Hit Tab Ich bekomme einen anderen Lorem ipsum Absatz. Und lassen Sie uns einfach ein paar einzigartige Dinge hier hinzufügen. Also haben wir einen Absatz und lassen Sie uns voran gehen und stellen Sie sicher, dass der Absatz und die Schaltfläche und alles, was ich getan habe, war ich einen Bereich ausgewählt und dann auf einem Mac, Ich klicke auf Befehl. Unter Windows wird es wahrscheinlich geändert oder bei gedrückter Ctrl-Taste gedrückt. So kann ich an zwei Orten gleichzeitig tippen. Klasse, Custom, Klasse. Und so gehen wir weiter und arbeiten jetzt mit einigen dieser Selektoren. Und ich werde das hier nur noch etwas kleiner machen, damit wir alles auf einem Bildschirm sehen können. Gehen wir also voran und wählen Sie R eins und ändern Sie dies. Und tatsächlich, bevor wir das tun, sieht unsere Seite so aus. Wir haben zwei Absätze und ich werde das hier etwas kleiner machen. Wir haben einen Titel, Wir hatten einen Knopf, der absolut nichts tut, und wir haben zwei Absätze. Dieser Absatz in dieser Schaltfläche teilen einen Klassennamen und die H1 und der Absatz sind für sich selbst. In der Tat, lassen Sie uns einen zusätzlichen machen. Ich werfe das hier rein. Das war nicht geplant, aber lassen Sie uns es trotzdem hier hineinwerfen, lassen Sie uns diesem Absatz eine ID hinzufügen. Es nennt sich Kunden-ID. Und wählen Sie, lassen Sie uns jede dieser auswählen. Wählen wir unser H1 aus. So könnten wir sagen, Selektor. Und vielleicht werde ich diesen größeren Selektor machen. Ein Punkttext wurde über jQuery geändert. Nun, das wird nur dieses eine H1 auswählen, aber wenn es mehrere gibt, wird jeder sie beide ändern. Also lasst uns das machen. Unser benutzerdefinierter Titel eins, unser benutzerdefinierter Titel zu. Lassen Sie uns fortfahren und unsere Seite aktualisieren. Und es steht, man kann tatsächlich sehen, dass es dort flackert, wenn ich immer und immer wieder erfrische. Und wenn ich den Quellcode hier ansehe, sehen wir unseren benutzerdefinierten Titel eins, auch unseren benutzerdefinierten Titel. Und wir ändern sie beide, um sich über jQuery mit einer einzigen Codezeile zu ändern. Wie schön ist das? Also haben wir alle H 1s auf der Seite ausgewählt und ändern sie so, dass sie sich über jQuery ändern. Jetzt müssen wir in regulärem JavaScript und Vanille-JavaScript alle durchlaufen und sie einzeln ändern. Jquery macht das automatisch für uns. Und lassen Sie uns voran und wählen Sie alle unsere Absatz, so dass wir Dollarzeichen, Klammern, Absatz, Punkt Htmlanstelle von Text tun können Dollarzeichen, Klammern, Absatz, Punkt Html . Und lasst uns hier einen mutigen Tag machen. Dies ist fett und ersetzt. Und so wissen wir, was das tun wird. Wir haben gerade gesehen, dass dieses Beispiel ein H1 wird diesen Absatz und diesen Absatz auswählen, er kümmert sich nicht um den Klassennamen oder die Idee im Moment, wir sind nicht die Auswahl dieser. Wir werden nur beide Absätze auswählen. Und lasst uns weitermachen. Und wenn wir unsere Seite aktualisieren, können Sie sehen, dass sie schnell wieder flackert. Wenn ich mich schnell genug erfrischen und immer und immer wieder. Und es sagt, das ist fett und ersetzen Sie es beide ausgewählt. Nun, was schön ist, dass Sie mehrere Dinge auswählen können. Sagen wir, wir wollten das nicht tun. Wir wollten alle H 1s und alle Absätze auswählen, aber wir wollten unsere Schaltfläche nicht auswählen. Und wir wollten die inneren Texte ändern, die Sie über jQuery geändert haben. Gehen wir voran und führen das aus. Also wird es diesen auswählen, diesen, diesen, und diesen. Und es wird diesen Text ändern, um sich über jQuery zu ändern. wir einfach sicher, dass es zum Beispiel bei Nummer zwei funktioniert. Und es hat sie alle ausgewählt. Und alles, was wir getan haben, gab es einen anderen regulären CSS-Selektor, wir sagten h ein Komma p. So wählen Sie die H1, wählen Sie auch alle Absätze. Nun, da dies immer noch JavaScript unter der Haube ist, können wir einen Absatz auswählen, der wie ein Absatz durch seine Kunden-ID ist und nicht seine Klasse identifizieren. Lassen Sie uns Dot benutzerdefinierte Klasse tun. Und wo ich das bekomme, ist die Rate hier, dot-benutzerdefinierte Klasse und dot-benutzerdefinierte Klasse. Aber dieses Mal wähle ich nur einen Absatz mit einer benutzerdefinierten Punktklasse aus. Ich wähle die Schaltfläche noch nicht aus. Wenn ich beide auswählen wollte, würde ich die p loswerden, aber ich möchte nur p mit einer benutzerdefinierten Klasse. Und dann kann ich sagen, dass der Punkttext wieder geändert wurde. Und fügen wir hier eine Nummer drei hinzu. Und wenn ich hier zurück zu meinem Browser gehe und aktualisiere, was das tatsächlich tut, ob du es glaubst oder nicht, ist es, dieses, dieses und dies auszuwählen und es zu ändern, um die Ansicht jQuery Nummer zwei zu ändern, die wir hier sehen. Und dann, weil es wieder JavaScript unter der Haube ist, wird es eine Zeile nach dem anderen ausführen. Also führt es diese Zeile aus, dann wird es diese Zeile ausführen, und es wählt unseren Absatz aus und ändert ihn, um die Ansicht jQuery Nummer zwei zu ändern. Aber dann wählen Sie auch P Punkt benutzerdefinierte Klasse. Das ist dieses, und überschreibt es ein zweites Mal. Jetzt können wir auch nach einer ID auswählen. Gehen wir also voran und wählen Sie eine ID aus, und wir müssen keine benutzerdefinierte P ID verwenden, obwohl wir könnten, wenn wir wollten, diesen Elementselektor nicht wirklich benötigen. Und da könnten wir einfach ID benutzen. Dasselbe mit unserer Klasse. Aber weil eine Idee im Gegensatz zu völlig einzigartig auf Ihrer Seite oder auf Ihrer Seite ist, sollte es nie mehr als eine Kunden-ID geben. Wo ist kann es mehr als einen Klassennamen mit genau dem gleichen Namen geben. Es sollte immer nur eine Kunden-ID oder eine bestimmte ID pro Element geben. Und so können wir dies auswählen, ohne einen Absatz auswählen oder angeben zu müssen. Weil unser Browser weiß, dass, wenn wir die Regeln befolgen, es hier immer nur eine Kunden-ID geben wird. Und wir können sagen, dass sich dieser Punkttext wieder geändert hat, und lasst uns eine Nummer vier da drinnen machen. Und so sieht der Code derzeit aus. Also wird es alle über h 1s und unsere Absätze auswählen. Ändern Sie es in den Absatz, der mit Nummer endet, um den Absatz mit einer benutzerdefinierten Klasse zu wählen , der auf Nummer drei endet. Und dann wählen Sie einfach zufällig ein Absatz, der bereits hier oben ausgewählt ist. Aber wir werden die Kunden-ID auswählen, die der Absatz ist. Und wir werden das ändern, um es wieder zu ändern, Nummer vier. Und wenn wir unsere Seite aktualisieren, änderte sich wieder Nummer vier. Und so sind unsere Seiten jetzt sofort interaktiver. Wir können überschreiben, was HTML gegeben wurde. Also, wenn jemand Ihnen eine langweilige HTML-Seite gibt und Sie eine Reihe von Sachen ändern möchten, aber Sie dürfen den HTML nicht berühren, was tatsächlich passiert. Manchmal können Sie JavaScript und jQuery verwenden, um es zu ändern. Nun, ich werde an dieser Stelle nicht zu viel mehr über Selektoren sprechen nur weil es wirklich nur ein CSS-Selektor ist und das eher eine CSS-Sache ist. Lin, Es ist eine JavaScript- oder jQuery-Sache. Wenn Sie also etwas ganz Besonderes auswählen möchten, können Sie Ihren Körper auswählen. Sie können ein Element auswählen, vielleicht einen Absatz, und dann können Sie alle starken Tags darin auswählen. Dies ist nur ein normaler CSS-Selektor. Sie wählen also Ihren Textkörper aus, wählen alle Absätze innerhalb des Textkörpers wählen alle starken Elemente innerhalb eines Absatzes aus. Und dann würden wir es ändern. Wir haben dieses Beispiel-Setup nicht, aber wenn Sie möchten, wäre das eine lustige kleine Sache, die Sie für Ihr Projekt einrichten können oder nicht für Ihr Projekt, aber Ihre Hausaufgaben für diese spezielle Lektion besteht darin, einen sehr spezifischen Selektor zu erstellen, tun Punkttext, und ändern Sie dann den Text darauf. Geh weiter und gib dem eine Chance. Wenn wir fertig sind, werden wir uns etwas HTML auf der Seite dynamisch ändern. 6. Dynamically ändern: Werfen wir einen Blick darauf, wie wir dynamisch HTML zu einer Seite hinzufügen können. Und dafür brauchen wir ein Beispiel. Lassen Sie uns unserer Seite ein div mit einer Kunden-ID der benutzerdefinierten ID geben. Und es wird hier nichts geben, also wird es völlig leer sein. Und wir wissen, dass, wenn wir zu unserem Browser zurückkehren und Ihre Seite aktualisieren, da nichts drin sein wird. Und wenn wir uns unseren Quellcode ansehen, heißt es nur benutzerdefinierte ID. Da ist nichts drin. Lassen Sie uns voran und fügen Sie dort einige benutzerdefinierte HTML hinzu. In den letzten Lektionen haben Sie gesehen, dass wir diese ID mit benutzerdefinierter ID auswählen würden. Und ich benutze den ID-Selektor hier, dot txt, text hier drin. Und so haben wir besteuert und das ist, das ist alles, gut und gut. Aber das wird eigentlich kein HTML hinzufügen. Also, wenn wir ein H1 hinzufügen wollten und hier können wir sagen H1, HelloWorld. Und leider wird dies nicht das tun, was wir erwarten. Und gehen wir zurück zu unserem Code hier. Es wird tatsächlich drucken H1, HelloWorld acht Schrägstrich H1. Das ist vielleicht nicht das, was wir wollen. Vielleicht möchten wir hier tatsächlich einige, einige richtige HTML hinzufügen . Also, wenn wir das untersuchen, gehen wir in unsere Elemente und verschrauben das, um es kleiner zu machen. Wir können tatsächlich sehen, dass es kein Element gibt, es ist nur Klartext. Und das ist nicht immer das, was wir wollen. Stattdessen, was wir wollen, ist HTML zu verwenden. Und wie das funktioniert, ist, dass Sie einen Selektor haben, Sie tun Punkt-HTML-Klammern öffnen und dann Ihren HTML dort einfügen. Was auch immer HTML ist, es kann eine Zeichenfolge wie diese sein, oder es könnte eine Variable sein. Und dann schließen Sie es einfach mit Ihren schließenden Klammern. Und das Semikolon ist optional. Also werde ich es manchmal benutzen, manchmal nicht benutzen. Lassen Sie uns voran und aktualisieren Sie unsere Seite. Und jetzt sehen wir, dass wir tatsächlich eine richtige HelloWorld H1 haben. Und in unserem Dokumentobjektmodell in unserem Quellcode hier, wie unser Browser es sieht, haben wir ein richtiges H1. Also, was cool daran ist, dass wir jetzt hier reingehen können und schreiben wir eine Spanne mit einer Klasse von benutzerdefinierten Klasse, Spanne, Text Schrägstrich Spanne. Das wird also ein wenig schwer zu lesen, nur weil es in mehreren Zeilen eingewickelt wird. Und weil ich mit meinem Redakteur ziemlich vergrößert bin. Aber wenn wir uns erfrischen, werden wir sehen, dass es eine Spannweite gibt. Jetzt können wir voran gehen und diese Spanne auswählen. Sobald es erstellt ist, können wir voran gehen und wählen Sie diese Spanne Text geändert. Und wir werden sehen, dass es von Spantext zu ändern geht. Genau so. Nun, der Abstand ist ein wenig weg und das ist ein hässliches Beispiel, aber es ist ein sehr funktionelles Beispiel. Und jQuery geht es nicht darum, Seiten schön aussehen zu lassen. Dafür ist CSS geeignet. Jquery soll eine kürzere Art sein, JavaScript zu schreiben. Es gibt also einen Unterschied zwischen HTML und Text. Wir haben in der nächsten Lektion etwas über HTML gelernt. Lassen Sie uns voran und lernen Sie mehr über Punkttext. Was ich möchte, dass Sie für diese spezielle Lektion tun, ist, gehen Sie voran und wählen Sie eine ID oder ein Element aus oder muss besser gesagt nicht Beidi sein, könnte einfach alle divs auf der Seite auswählen, dot-HTML tun und dann einige schreiben tatsächlichen HTML dort. Und notieren Sie sich. Sie können immer mit der rechten Maustaste auf Inspect klicken, gehen Sie zur Registerkarte Elemente. Und Sie können sehen, dass es hier tatsächliche HTML-Elemente gibt. Sobald du das getan hast, lass uns zur nächsten Lektion gehen. 7. Text dynamisch ändern: Werfen wir einen formellen Blick auf Änderungstext. Und wir haben bisher viel damit gearbeitet, viel, viel in so ziemlich jeder Lektion bisher, vielleicht sogar in jeder Lektion. Aber lassen Sie uns einen formellen Blick darauf werfen. Und so haben wir uns in der letzten Lektion dot HTML angesehen. In diesem werden wir uns Punkttext ansehen. Und was wir hier tun können, ist, dass wir kein div oder ein H1 machen. Lassen Sie uns ein Abschnittelement machen. Und lassen Sie uns sagen, etwas HTML-Code hier einfügen. Und so können wir dieses Auswahl- oder Abschnittelement mit Dollarzeichen, Klammer, Abschnittpunkt auswählen. Und dann können wir entweder den HTML oder die ändern, oder den Text. Nun, wenn wir tatsächlich HTML-Code hier einfügen wollten, können wir HTML nicht verwenden. Also, wenn ich ein fett gegen fett Tag setzen. Das ist also eine alte Art, mutig zu machen. Dies ist die neue Art, mutig zu machen. Speichern Sie das einfach und aktualisieren Sie meine Seite. Es versucht tatsächlich, sich zu rendern. Also, wenn ich in den Abschnitt hier gehe, hat es meine B und starke Elemente repariert. Und das liegt daran, dass wir tatsächlich HTML in die Seite injizieren. Das müssen wir aber nicht tun. Wenn wir diesen Code tatsächlich sehen wollten, können wir einfach Punkttext machen. Und das ist der Unterschied zwischen dot txt index.html ist, wenn ich die Seite aktualisiere, es wird tatsächlich angezeigt, so dass ich hier jetzt HTML schreiben kann, was wirklich großartig ist, um Websites zu programmieren, Blogs zu programmieren, Dinge wie diese, wann immer Sie tatsächlich eine Art von Code anzeigen. Nun ist es Ihre Aufgabe für diese spezielle Lektion, ein Element auszuwählen. Es muss kein Abschnitt sein, es kann ein beliebiges Element sein. Und dann innerhalb dieses Elements mit jQuery möchte ich, dass Sie dot txt n dot HTML verwenden und etwas HTML darin schreiben und sehen, was der Unterschied tatsächlich ist. Jetzt haben Sie gesehen, was der Unterschied auf meinem Bildschirm ist, aber es ist nicht ganz das gleiche, wie tatsächlich einige Hände auf Erfahrung zu bekommen. Also machen Sie weiter und machen Sie sich ein paar praktische Erfahrungen. Und wenn Sie das in der nächsten Lektion erledigt haben, gehen wir weiter und sprechen über das Abrufen Formularwerten, da Formularwerte nicht ganz gleich sind. 8. jQuery Formularwerte bekommen: Lassen Sie uns darüber sprechen, wie wir jetzt Formularwerte erhalten können. Also in den letzten paar Lektionen haben wir diese coole Sache gemacht, wo wir dot-HTML gemacht haben. Wir haben auch Punkttext gemacht. Nun, das ist cool und das funktioniert mit Elementen wie einem Abschnitt, der Inhalt darin enthält, Inhalt daneben. Und das ist in Ordnung. Aber was ist, wenn wir mit einem Element arbeiten, das keinen Inhalt darin hat. Und was ist, wenn wir mit einem Eingabeelement arbeiten? Jetzt im Eingabeelement hat kein schließendes Tag. Da ist kein Text drin. Wie gehen wir damit um? Also zuerst, lasst uns das retten. Und so sieht unsere Seite aus. Es ist nur ein Eingabeelement. Es ist ein sehr langweiliges Eingabeelement. Aber was wir hier tun können, ist, dass wir jetzt weitergehen und den Text dort reinbringen können. Also lassen Sie uns diesem einen Standardwert geben. Hallo Welt, nur die defacto Art von Texten, die jeder Programmierer neigt zu verwenden. Und da steht hallo Welt. Was wäre, wenn wir in der Lage sein wollten, diesen Wert herauszuholen? Nun, fangen wir zuerst an, es auszuwählen. Wir werden es durch eine Eingabe auswählen ist das einzige, was auf unserer Seite und wir können es einfach durch seinen einzigen Eingabewert auswählen. Und dann können wir Dot Val machen. Jetzt gibt es zwei Dinge, die wir hier tun können, und ich werde in nur einem Moment auch über DOT test.html sprechen. Aber wir können das tun. Der konstante Wert ist gleich dem Wert console.log gesetzt. Und alles, was wir hier tun, ist, wir wählen diesen Eingabepunkt aus. Und dann haben wir Lotvall verwendet, nicht Punktwert, dot va al. Und wir setzen hier nichts in die Klammern, es ist einfach leer. Und so, wenn ich die Seite aktualisieren und zu meiner Konsole gehen, heißt es hallo Welt. Und das zieht diesen Wert hier raus, damit wir diesen Wert in Hello World 1-2-3 ändern können . Und wenn ich die Seite aktualisiere, heißt es Hallo 1-2-3 oder helloworld 1-2-3 innerhalb der Konsole. Was ist, wenn wir das ändern wollten? Nun, das ist auch wirklich einfach. Wir könnten das ändern. Und wir könnten sagen, dies wird geändert und immer einfach tun ist, einen Wert hinzuzufügen. Jetzt wollen wir nicht mehr unbedingt damit arbeiten und das loswerden. Also werden wir diese Eingabe auswählen, sagen, dass Wert. Dieser hier oben muss sein, das hat sich geändert. Also lasst uns voran gehen und das überprüfen. Und es sagt, dass dies geändert wird, aber in unserem Quellcode, es sagt hallo Welt 1-2-3. Immer noch. Es ist nur zufällig, dass JavaScript und jQuery zusammen oder überschreibt diesen Wert. Und so kann man tatsächlich sehen, wenn ich schnell genug erfrische, flackert es ein wenig. Dieser coole kleine Trick mit Dot Val. Wenn es leer ist, können wir dasselbe mit Punkt-HTML und Punkttext tun. Also lassen Sie uns voran und geben dem auch ein kurzes kleines Beispiel. Abschnitt, der hier nur etwas Lorem hineinwirft, ein Lorem ipsum, das ich LO REM Hit Tab auf VS Code tippe und es füllt es automatisch mit Lorem Ipsum für mich. Also muss ich nicht über eine Art Dummy-Text nachdenken weil es manchmal schwer ist, solche Beispiele zu finden. Also, was wir hier tun können, ist jetzt können wir diesen Abschnitt auswählen und wir können diesen Text greifen. Und wir können das auch in eine Variable setzen. So ist const Text gleich console.log Text. Und wenn ich diese Seite aktualisiere, haben wir diesen ganzen Text hier drin, und wir haben auch diesen ganzen Text hier drin. Beachten Sie nun, dass es tatsächlich auch das Leerzeichen hat. Und dieses Leerzeichen, wenn ich einen Quellcode aktualisiere , kommt von Rot hier bis zu dieser neuen Zeile da drin. Und am Ende gibt es auch zusätzlichen Leerraum. Bis zum Ende des Abschnitts. Wir können dasselbe mit Punkt-HTML tun, und lassen Sie uns dies fett machen. Also werden wir einfach das Wort REM fett. Und wir können sehen, dass es hier drinnen kühn ist. Und es ist kühn hier drin. Hier ist der Unterschied. Wenn wir Punkttext tun. Beachten Sie, dass dieser hier oben fett ist, aber REM hier in unserer Konsole, es hat den HTML herausgenommen. Also seien Sie vorsichtig da. Also, das ist eine lustige kleine Drei in einer Lektion. Was ich will, dass du aber tust, ist, das vorerst zu ignorieren. Steck das einfach in deine Gesäßtasche. Und ich möchte, dass Sie ein Eingabeelement erstellen und dot val verwenden , um den Wert des Eingabeelements festzulegen. Wenn Sie das getan haben, lassen Sie uns darüber sprechen, wie wir dynamisch HTML zu einem bestimmten Teil einer Seite hinzufügen können , wie innerhalb eines Elements auf der Vorderseite oder Rückseite davon. 9. Vorstellung und anpassen: Okay, lassen Sie uns über das Anhängen und Voranstellen von HTML sprechen. Und was wir tun werden, ist, dass wir ein Element auswählen. Und dann werden wir ein paar, ein paar mehr Element oder etwas mehr Text auf der Rückseiteund die Vorderseite davon innerhalb dieses bestimmten Elements hinzufügen ein paar mehr Element oder etwas mehr Text auf der Rückseite . Was wir vorher gesehen haben, ist, dass wir wie ein H1 mit etwas Text hier drin haben könnten. Und wir konnten dieses auswählen und dann dot-HTML verwenden, um dort mehr HTML zu platzieren. Aber sagen wir, wir wollten am Ende eine Spanne hinzufügen oder wir wollten am Anfang eine Spanne hinzufügen. Nun, wir müssten all das in einer Variablen gespeichert herausziehen, diese Variable mit HTML darin überschreiben. Es gibt tatsächlich einen besseren Weg, dies zu tun. Also zuerst, lassen Sie uns voran und machen Sie eine Dokumentpunkt-Ready-Funktion. Und das erlaubt uns nur, unseren jQuery-Code hier sicher einzufügen. Gehen wir voran und wählen Sie das h aus. K eins ist ausgewählt. Jetzt kann ich append, APP END ODER prepend verwenden . Append geht nach hinten, voran geht nach vorne. Also lasst uns anhängen, und lasst uns hier etwas HTML hinzufügen. Lasst uns stark hinzufügen. Das ist mutig. Und das ist, wieder, das wird dieses H1 auswählen, und es wird nur ein paar Sachen hier anhängen. Gehen wir also weiter und speichern Sie unsere Seite und aktualisieren Sie sie. Und Sie können tatsächlich sehen, dass, wenn wir hier h eins, am Ende davon inspizieren , wir HTML haben, wir haben stark, das ist fett. Und in der Tat war das ein schlechtes Beispiel, weil es schwer zu sehen ist. Lassen Sie uns unterstreichen. Da gehen wir. Das ist Bolden ist unterstrichen. wir sicher, dass das konsistent ist. Konsistentes Copywriting dort. Das hat also einen Text hier drin. Dies ist unterstrichen. Wir könnten auch das gleiche H1 auswählen und wir könnten vorangehen. Und lasst uns eine Tally sechs machen. Das ist kursiv. Und was das tun wird, ist, etwas Code am Anfang zu setzen. Code hier drin. Und das ist genau das, was es tut. Es sagt, das ist kursiv in unserem H1, wir haben i Text Sie, aber in unserem Quellcode haben wir nichts davon. Und jetzt markieren wir unsere Seite dynamisch nur mit JavaScript und jQuery. Ein lustiges kleines Ding hier ist, wenn wir wollten, könnten wir diese miteinander verketten. Also lassen Sie uns voran und setzen Sie dies auf eine neue Zeile, weil JavaScript sich nicht um neue Zeilen kümmert. Und lasst uns weitermachen und diesen loswerden. Und so werden wir dieses auswählen, und dann werden wir anhängen, dann werden wir vorangehen. Und wie das im Wesentlichen aussieht, ist nur das. Wir ändern es zusammen. Aber wir können diese auf neue Linien setzen. Es sieht also nur ein bisschen schöner aus. Und das wird beide zusammen gelten. Also lasst uns hier und hier, Nummer zwei, damit wir wissen, dass dies tatsächlich funktioniert, dass dies nicht nur den gleichen Code aus dem letzten Beispiel ausführt. Lassen Sie uns also unseren Quellcode aktualisieren und wir sehen, dass sich hier nichts geändert hat. Unsere jQuery hat sich geändert, aber das eigentliche dom hat das Dokumentobjektmodell nicht geändert. Lassen Sie uns fortfahren und das Dokumentobjektmodell aktualisieren. Wir werden sehen, dass dies kursiv Nummer zwei ist und das ist unterstrichen Nummer zwei. Und das hat geklappt. Und alles, was wir taten, war, anstatt beide auszuwählen, wir haben nur eins ausgewählt. Wir verwenden einen Selektor und wir verwenden ihn wieder. Also haben wir angehängt und wir haben vorangestellt. Nun, was cool ist an der Verkettung hier ist, dass wir auch 2.txt tun könnten. Das hat sich geändert. Text, dann anhängen und dann vorangestellen. Und so wird ein Text hier sagen, das ist Änderungstext und es hat alles für mich verändert. Dieser hat also keinen der Inhalte mehr, die auf meiner Seite originell waren. Jquery hat jetzt alles überschrieben und es hat auch etwas HTML vorangestellt und angehängt. Was ich möchte, dass Sie als wenig Spaß Aufgabe tun, ist gehen Sie voran und geben Sie dies eine Chance. Sie müssen sich keine Sorgen um den Textteil machen. Aber gehen Sie weiter und fügen Sie etwas HTML an, stellen Sie etwas HTML2 vor, einen beliebigen Selektor Ihrer Wahl. Und wenn du das fertig bist, kettest du sie zusammen, wie ich es getan habe. Wenn Sie damit fertig sind, werden wir uns die Auswahl eines Elements ansehen und dann etwas HTML außerhalb davon hinzufügen, aber davor und nachher. Also einige hier und einige hier, weil gerade jetzt vorangehen und anhängen nur arbeiten an der Innenseite. Wir wollen jetzt nach außen arbeiten. 10. Vor und After: In unserer letzten Lektion haben wir in dieser Lektion HTML angehängt und vorangestellt Lassen Sie uns voran gehen und etwas HTML vor und nach einem Element hinzufügen. Also lassen Sie uns diesem ein div mit einer ID des Ziels geben. Und es wird hier nichts geben. Nun, ich würde gerne, lasst uns hier etwas reinlegen. Fügen Sie HTML davor und danach hinzu. Und so lassen Sie uns voran und weil alles in jQuery im Grunde ausgewählt oder Basis ist, wählen wir dieses Ziel aus. Wir können sogar div ID Ziel tun. Dann können wir Dot vorher machen. Und das ist nur buchstäblich Punkt vorher. Und lasst uns ein h3 hier reinlegen. Helloworld, Dies ist ein Titel. Und lass es uns nochmal machen. Lassen Sie uns ein Div auswählen, das durch seine ID ausgewählt wird, und dann lassen Sie uns danach tun. Und lasst uns hier einen Absatz machen. Dies ist ein Absatz. Und was unsere Seiten jetzt tun werden, ist, dass es dieses Element auswählen wird. Und vor diesem Element, kurz davor. Genau hier drin. Wenn ich irgendwelche Worte richtig buchstabieren könnte, genau hier drin wird sagen, es wird Hallo Welt sagen, das hat einen Titel. Und danach wird es mit irgendeiner Art Absatz hier drin sagen. Dies ist ein Absatz und dieser wird tatsächlich ein h3 sein. Es wird also so etwas aussehen. Jetzt lass uns das loswerden, damit wir das hier nicht haben. Und löschen, löschen, löschen, speichern. Sehen wir uns zuerst unseren Quellcode an. Stellen Sie sicher, dass es nicht wirklich etwas hinzufügt. Und lasst uns weitermachen und diese Hello World auffrischen. Dies ist ein Titel bei HTML davor und danach, und dies ist ein Absatz. Wenn Sie Ihre Konsole oder Ihre Entwicklungstools nicht geöffnet haben, können Sie mit der rechten Maustaste klicken. Sie können zu Inspect gehen, öffnen Sie die Registerkarte Elemente, und Sie können sehen, dass es jetzt ein H3. Es gibt das gleiche div, das wir ursprünglich angegriffen haben, und es gibt einen Absatz danach. Nun, genau wie in der letzten Lektion, können wir, wenn wir die miteinander verketten wollten. Und so müssen wir das nur einmal auswählen und dann könnten wir vorher und nachher sagen und diese Dinge tun. Gehen wir voran und speichern Sie das tatsächlich, lassen Sie uns voran und stellen Sie sicher, dass das Caching nicht stattfindet. Und wir werden einfach eine Nummer zwei da reinlegen, damit wir wissen, dass das so funktioniert, wie wir es erwarten. Also gehen Sie weiter und aktualisieren Sie. Hallo Welt. Das ist der Titel Nummer zwei. Dies ist ein Absatz Nummer zwei. Und so fügen wir HTML vor und nach einem Element hinzu. Nun möchte ich, dass Sie das Gleiche tun. Mimitiere einfach, was ich in diesen Videos gemacht habe, nur um ein paar praktische Erfahrungen zu machen. Und wieder kann ich nicht sagen, dass das genug ist, wenn Sie programmieren lernen, können Sie so viele Videos sehen, wie Sie möchten. Aber nichts wird zu vergleichen, um tatsächlich einige Hände auf Erfahrung zu bekommen und Lage, es zu schreiben und in der Lage zu sein, Muskelgedächtnis zu schaffen. Also geh weiter und gib dem eine Chance. Wenn Sie das getan haben, gehen wir über die nächste Lektion, wo wir tatsächlich ein Element von der Seite auswählen und vollständig gelöscht. 11. Elemente löschen: Werfen wir einen Blick darauf, wie wir ein Element von einer Seite löschen können. Lassen Sie uns dazu ein komplexeres Beispiel erstellen. Lassen Sie uns ein div erstellen. Und es wird einen Absatz hier drin haben. Und es wird sie hier drinnen abgesenkt haben. Und es wird noch einen Absatz hier drin haben, noch mehr Lorem, und noch einen Absatz hier drin mit etwas mehr Lorem. Wir haben also drei Absätze hier drin. Und sagen wir, wir wollten diese Mittelklasse wählen, mittleren Absatz. Und wenn wir Viewer Seite, ja, es ist langweilig, aber das wird ein gutes Beispiel sein. Also haben wir drei Absätze hier, innerhalb eines div, und einer hat eine Klasse. Also lassen Sie uns voran und erstellen Sie hier einen interessanten Selektor. Aber bevor wir das tun, stellen wir sicher, dass unsere jQuery geladen werden kann. Document.ready-Funktion. Schreibweise es richtig für die dritte Zeitfunktion. Und dann können wir unsere jQuery hier reinlegen. Gehen wir voran und wählen Sie dies aus. Jetzt gibt es ein paar verschiedene Möglichkeiten, wie wir diesen bestimmten Absatz auswählen können, aber lassen Sie uns voran gehen und einen auswählen. Auf eine interessante Weise, eine Art, die wir noch nicht wirklich gesehen haben. Also lassen Sie uns alle divs auf der Seite auswählen. Dann lassen Sie uns alle Absätze innerhalb des div auswählen. Und dann stellen wir sicher, dass wir nur die Absätze auswählen, die den mittleren Absatz der Klasse haben , mittleren Absatz. Also jetzt kommen wir hier in einen interessanten Selektor. Und um dies zu löschen, müssen wir nur dot eingeben, Klammern entfernen. Und das wird buchstäblich aus unserem Dokumentobjektmodell gelöscht. Wenn wir also unseren Quellcode hier sehen, haben wir drei Absätze. Das taucht immer noch auf. Aber wenn ich die Seite aktualisiere, können Sie sehen, dass sie nicht angezeigt wird. Und wenn ich hier auf meine Elemente eingehe, haben wir nur zwei Absätze. Keiner von ihnen hat den Mittelabsatz der Klasse. Nun, was daran cool ist, ist, weil dies ein Klassenselektor ist. Wir können sagen, mittleren Absatz. Es ist nicht mehr der mittlere Absatz, aber lassen Sie uns einfach so tun, als wäre es. Wir können beide gleichzeitig auswählen und gleichzeitig löschen. Also, jetzt wird es unser div auswählen, wählen Sie alle Absätze mit einer Klasse des mittleren Absatzes. Nun, sieh mal, zwei von ihnen sind dort hervorgehoben. Es sind zwei von ihnen. Und wir werden beide löschen. Also, wenn wir unseren Quellcode wieder sehen, erscheint er immer noch wie normal. Es sind immer noch drei Absätze drin, aber JavaScript überschreibt unsere Seite und es wird die anderen beiden loswerden. Und hier haben wir ein div und einen einzigen Absatz. Wir haben keine drei Absätze mehr. Jetzt ist das völlig sicher zu tun. Dies wird nie etwas von Ihrem Computer löschen oder entfernen. Es funktioniert immer nur mit Code innerhalb Ihrer Seite basierend auf dem Selektor, den Sie ihm geben. Nun, wenn du das willst, und du könntest auch einfach sagen, hey, wähle jeden Absatz aus, entferne ihn. Aber weil alle unsere Absätze in einem div sind, könnten wir dieses div auswählen und wir können das auch entfernen. Und wir können in Ihrem Dokumentobjektmodell sehen, dass div nicht existiert. Unser Quellcode hat sich nicht geändert, aber JavaScript überschreibt ihn. Also, was ich möchte, dass Sie als eine lustige kleine Aufgabe tun, machen Sie voran und erstellen Sie jede Art von Beispiel mit HTML. Wählen Sie ein bestimmtes Element aus, nur eines davon, und entfernen Sie es dann. Vergewissern Sie sich, dass es hier entfernt wurde. Vergewissern Sie sich, dass es hier entfernt wurde. Und wenn Sie das getan haben, gehen wir weiter zur nächsten Lektion, in der wir ein Element auswählen und dann alle seine untergeordneten Elemente loswerden. Also werden wir es ausleeren. 12. Kindelemente löschen: Es wird eine Zeit geben, in der Sie ein Element auswählen müssen und alle seine untergeordneten Elemente entfernt werden müssen. Und so könnten wir einen schicken Selektor schreiben, um so ziemlich alles auszuwählen. Also könnten wir sagen, zum Beispiel, ausgewähltes div, und es ist wie alles in diesem div dot entfernen. Aber es gibt einen besseren Weg, dies zu tun. Und so lassen Sie uns voran gehen und ein Beispiel hier aufstellen. Wir können div sagen, und das wird unser übergeordnetes Element sein. Also übergeordnetes Element, und das ist ein HTML-Kommentar hier. - Genau da. Lasst uns hier ein kräftiges kühnes Wort schreiben. Kursiv, es, kursiv Wort hier. Und lassen Sie uns auch wählen oder nicht wählen Sie die Erstellen Sie einen Absatz mit etwas Lorem ipsum darin. Und wenn wir uns unsere Seite ansehen, okay, keine große Sache. Wir haben immer noch dieses div. Was wäre, wenn wir dieses div auswählen wollten? Und lassen Sie uns diesem eine ID des Elternteils geben. Was wäre, wenn wir dieses Eltern-ID-Div auswählen und all dieses Zeug hier loswerden wollten. Das ist wirklich, wirklich einfach zu machen. Und machen wir das eigentlich ein bisschen komplizierter. Beginnen wir also zunächst mit div, wählen Sie die übergeordnete ID aus. Und dann könnten wir einfach Dot leer machen. Und was das tun wird, ist, diese ID auszuwählen, dieses div auszuwählen und alles darin loszuwerden. Jetzt können wir Punkt HTML verketten und wir könnten so etwas wie hallo Welt sagen. Und das wurde alle Elemente in diesem div los und ersetzt es durch hallo Welt. Wenn wir nun unseren Quellcode betrachten, ist unser ganzer regulärer Quellcode immer noch da. Dies wird sich während dieses Kurses nicht ändern. Unser ganzer Quellcode wird genau so sein, wie wir ihn schreiben. Javascript wird es weiterhin überschreiben. Das wird also genau das sein, was wir schreiben und JavaScript wird es ändern. Von hier an werde ich Ihnen den Quellcode wahrscheinlich nicht mehr zu oft zeigen , nur weil, naja, es wird immer und immer wieder auf die gleiche Weise funktionieren. Nun, lassen Sie uns voran gehen und eine Art von Änderungen in korrektes JavaScript. Also könnten wir Const machen. Elternteil ist gleich zwei. Und wenn Sie jQuery schreiben und ein Dollarzeichen vor einem Variablennamen sehen. Das bedeutet normalerweise, dass es eine Art Selektor gibt. Und so können wir voran gehen und das auswählen. Und dann, wenn wir wollten, könnten wir sagen, parent.value leer oder Eltern dot HTML Zeug hier drin. Und wir gehen zu CSS Sachen hier drinnen. Nun, was daran interessant ist, ist manchmal müssen Sie nur ein Element leeren, nur damit etwas anderes ein wenig später geladen werden kann. Aber wenn Sie es sofort tun müssen, brauchen wir eigentlich nicht leer zu verwenden. Wir können dieses gesamte übergeordnete Element auswählen und wir können den gesamten HTML mit einem Satz überschreiben , der hier Zeug sagt, Stephan hier, und es gibt keine untergeordneten Elemente. Nun, wenn Sie gerade in die Welt der Dokumentobjektmodelle kommen und Sie sind wie das, was offensichtlich ist, was ist ein Kind? Das ist eine gute Frage. Ein übergeordnetes Element enthält untergeordnete Elemente. Ein untergeordnetes Element befindet sich innerhalb eines übergeordneten Elements. Das ist alles, was es ist. Lassen Sie uns also voran gehen und geben Sie dieses Beispiel, einen Schuss hier, eine kleine Vorschau. Und wir werden hier drin sehen, wir haben tatsächlich alles überschrieben, also mussten wir nicht dot leer verwenden. Wir sind wirklich in kommt, ist, wenn Sie eine Verarbeitung zu tun haben oder wenn Sie Daten von wie einer API abrufen müssen, könnten Sie übergeordneten Punkt leer. Lassen Sie uns diesen übergeordneten Punkt leer löschen. Und dann tun Sie etwas, damit Sie irgendwo Informationen von einer API abrufen können. Und vielleicht dauert das drei Sekunden. Und dann können Sie Eltern-Punkt-HTML sagen und etwas neues HTML darin einfügen. Lassen Sie uns in der nächsten Lektion über Ereignis-Listener, Ereignis-Listener-Syntax sprechen und wie wir etwas auslösen können, wenn wir darauf klicken. 13. listeners und das the: Willkommen in der Welt der Event-Zuhörer. Event-Zuhörer sind sehr, sehr interessante Dinge. Das erste, was wir tun müssen, ist die Syntax zu betrachten, Kay? Also eigentlich das erste, was wir tun müssen, ist darüber zu sprechen, was ein Ereignis-Listener ist. Ein Ereignis-Listener ist. Wenn Sie eine Schaltfläche auf der Seite haben und sagen, dass es Click Me innerhalb davon sagt, und Sie klicken Sie auf diese Schaltfläche. Was soll passieren? Das ist kein Ereignis-Listener. Oder wenn Sie ein Eingabeelement haben und mit der Eingabe beginnen. Jeder dieser Buchstaben, den Sie auf Ihrer Tastatur drücken, ist ein Ereignis. Jedes Mal, wenn Sie Ihre Maus bewegen, jederzeit, wenn Sie die Größe Ihres Bildschirms ändern, jederzeit, wenn Sie in ein Eingabeelement fokussieren oder Unschärfe aus einem Eingabeelement oder wie das Eingabeelement verlassen. Das sind alles Ereignisse, und wir werden eine Reihe von diesen in diesem Kurs angehen. Also zuerst, werfen wir einen Blick auf einige der Syntax hier. Es gibt also zwei Möglichkeiten, dies zu tun. Es gibt die, es gibt den richtigen Weg, den Sie in den jQuery-Dokumenten sehen werden. Und dann gibt es wohl einen noch besseren Weg, dies zu tun, was zukunftsweisend für Ajax- und Dokumentobjektmodellaufrufe sein wird. Werfen wir einen Blick auf beide. Also zuerst haben wir eine Art Selektor und so können wir die Schaltfläche auswählen. Und dann können wir sagen, Punkt klicken. Und das wird eine Funktion übernehmen. Und so ohne die Funktion sieht es so aus. Das ist ein Ereignis-Listener. Jetzt ist diese Funktion, die wir hier übergeben, nur das, was wir tun wollen. So können wir console.log sagen. Ich bin angeklickt. Und weil wir diesen Button hier auf dieser Seite haben, auf der steht, klicken Sie mich, lassen Sie uns voran und geben diesem einen Schuss. Es heißt Click Me und in der Konsole hier, jedes Mal, wenn ich darauf klicke, heißt es, ich bin geklickt. Das war's. Das ist alles, was es gibt, um Ereignis-Listener mit jQuery ist ein super, super einfach. Jetzt gibt es einen anderen Weg, dies zu tun. Ich werde das kommentieren. Und wohl ist dieser Weg besser. Sie können eine Auswahlpunktschaltfläche haben und dann sagen Sie Punkt auf, was Sie tun möchten. Worauf soll es hören? Sie wollten, dass es auf ein Klick-Ereignis wartet. Und dann übergeben Sie eine Funktion console.log. Dies kann angeklickt werden, um Ihre Seite zu aktualisieren. Und es sagt, das ist anklickbar jetzt Justin, wirklich machen das Leben verrückt schwierig und schwer zu lernen jQuery. Lasst uns einen dritten Weg lernen. Und das ist eigentlich der beste Weg, aber wir werden nicht das Beste tun. Wir wollten den mittleren Weg in diesem Kurs vorwärts machen. Aber der beste Weg ist Dokument Punkt auf Klick, und dann Ihre Schaltfläche, und dann Ihre Funktion, console.log. Und lasst uns einfach 33333 einloggen. Und das funktioniert auch. Und so gibt es einen Grund, warum wir es hier anders machen. Und so werden wir diese Methode in Zukunft verwenden , nur weil es am einfachsten zu schreiben ist, um zu verstehen. Und das ist ein wenig komplexer, aber es gibt einen Grund, dass wir die komplexe Welle und der komplexe Weg ist, weil was wenn wir ajax oder dynamisch einen Knopf erstellt? Und lassen Sie uns das machen und ich zeige Ihnen hier ein Beispiel. Div-ID. Setzen. Knopf hier. Gehen wir voran und wählen Sie dies aus. So können wir konstant tun. Nennen wir es Elternteil ist gleich diesem Selektor. Nein, das ist ID-Selektor. Dann können wir Eltern.value HTML tun. Wir können hier einen Knopf setzen. Klicken Sie auf die Schaltfläche „Schrägstrich“, „Schaltfläche“. Und lassen Sie uns fortfahren und loswerden die Click me eins als dynamische Schaltfläche Click Me. Das wird das sein. Klicken Sie auf die dynamische Schaltfläche Me, es wird angezeigt. Es gibt noch keine Ereignis-Listener. Lass uns weitermachen. Und sagen wir, dieser Ereignis-Listener wurde zuerst erstellt. Wie JavaScript und jQuery funktionieren wird, ist von oben nach unten. Es wird alle Schaltflächen auf der Seite auswählen, und es wird eine Klick-Funktion registrieren. Aber derzeit, zu diesem Zeitpunkt, gibt es einfach keine Schaltflächen auf der Seite, es gibt nichts zu klicken. Dann haben wir das übergeordnete Element ausgewählt und eine Schaltfläche auf die Seite gesetzt. Und wenn wir das speichern und aktualisieren, sehen wir, dass nichts funktioniert. Nun, das ist in Ordnung. Wenn wir diesen Code hier unten verschieben können. Weil diese Schaltfläche jetzt auf der Seite vorhanden ist. Und dann können wir den Ereignis-Listener registrieren. Und das wird funktionieren. Nun, das wird nicht immer der Fall sein. Es wird viele Male geben, in denen ein Ereignis-Listener registriert ist. Aber dann werden sich Ihre Seiten dynamisch ändern. Und das ist sehr, sehr, sehr häufig in modernen Websites. Also, was machen wir? Können wir diese Option verwenden? Lasst uns das nach oben bewegen und lasst uns das kommentieren, damit wir wissen, dass es nicht funktionieren wird. Also werden wir jetzt eine Schaltfläche auswählen und dann onclick und wir werden sagen, wenn diese Schaltfläche geklickt wird, Konsolenprotokoll, dies ist klickbar zwei. Jetzt wird das gleiche Problem hier passieren. Es wird nach allen Schaltflächen auf der Seite suchen. Es wird versuchen, ein onclick-Ereignis zu registrieren. Es wird nicht für uns funktionieren. Lassen Sie uns die Seite aktualisieren und sehen, dass diese Schaltfläche jedes Mal, wenn ich darauf klicke nicht. Okay, das ist also nicht gut. Das ist eine nette, saubere Syntax, das ist schön zu schreiben. Es ist nicht gut genug für dynamische Inhalte. Dynamische Inhalte kommen hier rein. Und lasst uns das nach oben bewegen. Das heißt also, wählen Sie das gesamte Dokument aus, wenn Sie auf das Dokument klicken und Sie auf die Schaltfläche klicken. Es könnte also diese spezielle Schaltfläche hier sein oder was auch immer Sie ihm eine ID oder eine Klasse oder so etwas geben möchten. Dies ist Ihr Selektor. Dann tun Sie eine Funktion und dies wird Ihre Websites dynamisch Beweis machen, Ajax Beweis. Wenn also Dinge dynamisch mit anderem JavaScript auf Ihrer Seite geladen werden, wird dies immer noch funktionieren. Und so lassen Sie uns fortfahren und die Seite aktualisieren. Und wir sehen, dass das jetzt funktioniert. Wir haben ein Klick-Ereignisse auf allen Schaltflächen registriert, aber wir fügen es an das Dokument. Selbst wenn es etwas Dynamisches passiert, können wir dies immer noch ausführen. Das ist also wirklich gut zu wissen. Steck das in deine Gesäßtasche. Aber wir werden auf diese Weise schreiben, nur weil es ein bisschen sauberer ist. Nun möchte ich, dass Sie einen Ereignis-Listener erstellen, so etwas. Wählen Sie eine Schaltfläche aus. Punkt auf. Ihr erster Parameter wird sein, wonach wir suchen? Wir suchen nach einem Click-Event. Was passiert, wenn Sie auf die Schaltfläche klicken? Dann schreiben Sie eine Funktion. Dies wird als Callback-Funktion bezeichnet. Und wann immer Sie auf diese Schaltfläche klicken, was wird es tun? Geh weiter und gib dem eine Chance. Sobald Sie damit fertig sind, gehen wir weiter zur nächsten Lektion, in der wir darüber sprechen unsere Maus über ein Element und aus einem Element zu bewegen. Also werden wir schweben. 14. Hover Events: Es gibt eine Möglichkeit, ein Ereignis zu registrieren, wenn Sie mit der Maus über etwas bewegen und wenn Sie es von etwas entfernen. Und dafür, lasst uns weitermachen und ein wenig CSS schreiben. Also lassen Sie uns hier etwas Styling hinzufügen, und lassen Sie uns eine Box erstellen. Und es wird eine Breite von 200 Pixel, Höhe, 200 Pixel haben. Hintergrundfarbe wird schwarz sein. Und lassen Sie uns in der Mitte unserer Seite, lassen Sie uns Rand tun, 50% oder 50 Pixel oben und unten und rechts in der Mitte der Seite. Und so müssen wir jetzt gehen und eine Box erstellen und, und schauen Sie sich dieses CSS an. Dies ist eine ID für einen Box-Selektor. Schachtel Ich kann m0, um das zu verkürzen. Also werde ich da keinen Text hineinschreiben. Und dann, um diese Box auszuwählen, muss ich nur genau dasselbe schreiben. Und jetzt schreiben wir dasselbe in drei verschiedenen Skriptsprachen. Wir haben HTML, CSS und JavaScript. So können wir jetzt Punktbox auf der Maus eingeben sagen. Und was tun wir, wenn wir die Maus in diese Box setzen, das ist Konsolenpunktprotokoll, die Sie eingegeben haben. Und sagen Sie, dass Ihre Maus über diese Box schwebt. Und wenn wir die Seite aktualisieren, haben wir diese Blackbox. Und jedes Mal, wenn ich meine Maus darüber lege, steht es, dass deine Maus über diese Box schwebt. Und so macht es es nur einmal, während ich oben auf dieser Box bin. Und wenn ich ausziehe, passiert nichts. Wenn ich einziehe, passiert es wieder. Jetzt, wenn Sie sich registrieren, wenn Sie Ihre Maus heraus bewegen, sehr, sehr einfach. Wir können diese jetzt verketten und wir können sagen, auf der Maus eingeben, wir können auch Punkt auf Mausurlaub sagen. Lassen Sie uns hier eine Funktion schreiben. Und wir können sagen, Konsolenpunkt warnen. Du hast die Kiste verlassen. Und so alles, was wir hier tun, ist Mauseingabe und vor allem jetzt als kurze Zusammenfassung aus der letzten Lektion, denn die letzte Lektion war ziemlich intensiv. Alles, was wir hier tun, ist eine Art Selektor, Punkt auf dem Ereignisnamen. Und dann eine Funktion, und diese Funktion wird alles tun, was wir hier tun wollten. Dies ist die Syntax des Ereignis-Listeners. Das ist alles, was es ist. So wie eine schnelle Zusammenfassung haben wir einen Selektor, weil alles auf Selektoren in jQuery basiert. Nun, fast alles, um eine Veranstaltung zu registrieren, was auch immer der Name der Veranstaltung ist. In dieser Lektion verwenden wir die Eingabetaste und die Maus verlassen, und führen dann eine Funktion, wenn dieses Ereignis ausgelöst wird. Okay, speichern wir das und aktualisieren Sie die Seite. Ok, nichts passiert und bewege meine Maus hinein. Ihre Maus bewegt sich über den Kasten. Da steht, du hast den Kistenbereich verlassen. Jedes Mal, wenn wir rein und raus gehen, rein und raus, rein und raus. Jetzt werde ich hier ganz ehrlich sein. Dies war vor einigen Jahren super beliebt, aber die Leute benutzen nicht wirklich Hover-Ereignisse mehr. Wir versuchen, Hover-Ereignisse in Peer-CSS zu verwenden, wenn möglich. Manchmal ist das einfach nicht möglich. So können wir jQuery verwenden oder wir können Vanille-JavaScript auch verwenden, um dies zu erreichen. Aber in der Regel versuchen wir, bei CSS zu bleiben, um jede Art von Ereignis passieren zu lassen, wenn Sie Ihre Maus über etwas bewegen oder die Maus von etwas bewegen. Und in CSS ist es so einfach wie Box-Hover zu sagen, und dann macht es etwas. Und wenn Sie Ihre Box verschieben oder wenn Sie die Maus aus diesem Feld bewegen und es nicht mehr schwebt, wird sie wieder auf die Standardeinstellung zurückgesetzt. Also das ist alles, was es dann ist, warum wir CSS bevorzugen. Aber manchmal ist das nicht möglich. Und manchmal müssen wir ein wenig JavaScript schreiben, ein wenig jQuery, um das möglich zu machen. Geh weiter und gib dem eine Chance. Ich möchte, dass du hier zwei Dinge machst. Ich möchte, dass Sie eine Art von Element auswählen und ein Maus-Eingabe-Ereignis registrieren. Und nur die Konsolenanmeldung. Wir müssen noch nichts Schickes tun. Wir kommen ein wenig später in die Fanciness, aber kommen einfach, um etwas zu protokollieren. Und dann, wenn Sie die Maus verlassen Konsolenprotokoll oder Konsole getragen etwas anderes. Und dann Teil zwei ist, ich möchte, dass du die zusammenlegst. Derzeit wissen wir, dass es so aussehen kann. Doo-Doo-Doo-Doo-Zimmer in einer schlaffen, die das nach innen stoßen. Das funktioniert also, das wird perfekt funktionieren. Aber ich möchte, dass Sie sie zusammenketten, um einen etwas netteren jQuery-Code zu machen. Es ist auch ein bisschen mehr Leistung. Es bedeutet, dass Ihr Browser diese bestimmten Elemente oder diesen bestimmten Selektor nicht mehr als einmal nachschlagen muss und es nur einmal tun und immer wieder verwenden kann . Sobald Sie das in der nächsten Lektion getan haben, werden wir über den Key Up Event Listener sprechen. Was passiert also, wenn Sie irgendeine Art von Eingabeelementen eingeben? Du tippst da etwas rein. Wie kriegen wir diesen Wert da raus? Was passiert jedes Mal, wenn Sie eine Taste auf Ihrer Tastatur drücken? Wir werden in der nächsten Lektion darüber reden. 15. Keyup: Lassen Sie uns über das Keyup-Ereignis sprechen. Im Keyup-Ereignis haben wir wie eine Eingabe. Und lassen Sie uns diesem eine Klasse von wählen Sie mich und einen Standardwert der Sache hier geben. Nun, hallo Welt, oder sie wurden besser. Und so müssen wir dies nach seiner Klasse auswählen oder, wissen Sie, wir wollen nur beißt Attribut. Wir könnten es nach seinem Elementtyp auswählen. Wir werden von allen möglichen Dingen ausgewählt, aber lass uns voran gehen und es nach seiner Klasse auswählen. Dann können wir Punkt auf Taste nach oben, Funktion, console.log sagen. Du hast KI gedrückt. Und so lassen Sie uns fortfahren und unsere Seite aktualisieren. Und wenn wir hier reingehen, tun, tun, tun, tun, tun, tun. Jedes Mal, wenn ich eine Taste drücke, protokolliert es etwas in meinem Code, damit Sie sehen können, wie sie es hier unten spammen. Und das ist alles, was es dazu gibt. Und an diesem Punkt, wenn du denkst , wow, Kayla, das ist dasselbe immer und immer wieder. Du hast absolut Recht. Es ist das Schöne an jQuery ist, wenn Sie eine Sache lernen, es ist allen anderen Dingen sehr ähnlich. Und so macht es das Lernen von jQuery wirklich einfach. Es macht auch das Schreiben von JavaScript wirklich einfach. Nehmen wir an, Sie wollen, dass es den Wert daraus herausholen soll. Dies wird sehr interessant werden, also ist es tatsächlich zu löschen, dass. Und wie haben wir diesen Wert bekommen? Wir haben zwei Möglichkeiten. Wir können diesen Wert bekommen. Wir können sagen, const, lassen Sie uns Eingabe ist gleich dem ausgewählten mich. Und dann könnten wir console.log machen und wir können diesen Eingang Dot val protokollieren. Jetzt wissen wir bereits über Val. Das wird also für uns funktionieren. Lass uns weitermachen und das auffrischen. Und so funktioniert es für uns so, wie wir es erwarten. Das Problem hier ist, dass Sie jetzt einen Selektor haben, und jedes Mal, wenn Sie eine Taste auf Ihrer Tastatur drücken, wird es Ihr DOM durchqueren, sagen wir, zehntausend Zeilen HTML durchschauen und versuchen, dies zu finden. Und glauben Sie es oder nicht, obwohl es ziemlich schnell ist, Browser sind nicht wirklich so schnell. Es gibt viele Informationen zu durchlaufen und Sie möchten mit Ihrem Code ausgeführt werden. Und vor allem, wenn wir versuchen, einen Job als Webentwickler zu bekommen. Stattdessen, was wir tun, ist wir können, weil wir Funktion verwenden und wenn Sie von JavaScript kommen, wann immer Sie Funktion verwenden, haben Sie Zugriff auf das, dieses Schlüsselwort. Wir können Selektor verwenden, dieser Punkt val. Und dieses Val bezieht sich einfach auf das, was hier ausgewählt wird. Und so lassen Sie uns voran gehen und console.log dieses Console.log, dieser Punkt val. Und wenn ich hallo Welt erfrischen. Und das funktioniert besser und es ist technisch am schnellsten, technisch leistungsfähiger. Was passiert nun, wenn wir ein anderes Eingabeelement mit dem gleichen Klassennamen haben? Und dieser hier hat nur einen anderen Text. Wird es beide auswählen? Und dann, wenn Sie einen Schlüssel auf einem von ihnen machen, wird es den Wert beider zusammen bekommen, oder wird er den Wert von nur dem erhalten, den Sie eingeben? Das sind Fragen, die wir uns stellen müssen. Gehen wir weiter und erfrischen wir uns. Und HelloWorld 123. Und lasst uns in den Typ gehen und hier 123. Also ist es komplett von den anderen isoliert, was jetzt hinter den Kulissen wirklich schön ist, alles, was es tut, ist, alle diese als Knoten auszuwählen. Dies ist also ein Knoten und dieser Knoten und es registriert das Keyup-Ereignis für jeden von ihnen. Und obwohl der Selektor schick ist und zwei Dinge auswählt, unser Ereignis-Listener hinter der Szene tatsächlich registriert unser Ereignis-Listener hinter der Szene tatsächlicheinen anderen Ereignis-Listener für jeden von diesen. Und so sind sie völlig voneinander getrennt. Jetzt als eine kurze kleine Zusammenfassung haben wir unseren Selektor, also haben wir hier ein Eingabeelement ausgewählt. Wir sagten Punkt auf oben, Das ist unser EventListener. Dann haben wir eine Funktion. Und in dieser Funktion, wir nur Konsole protokollieren diesen Punkt val. Und das hier ist der Schlüssel zum Mitnehmen. Dies, wir verwenden nicht diesen Punkt val, weil dot val nicht auf diesem Schlüsselwort existiert. Wir werden dies in einen, einen anderen jQuery-Selektor werfen und dann dot gültig verwenden weil dot val auf dem Selektor in jQuery existiert, nicht in Vanille-JavaScript, das ist eine jQuery-Sache. Und so müssen wir dies in einen, in einem jQuery-Selektor umschließen . Ich möchte, dass Sie das hier eine Chance geben. Und ich möchte, dass du mit der, dieser Eigenschaft, dem, diesem Schlüsselwort herumbastelst . Es funktioniert nur, wenn Sie eine Funktion verwenden. Wenn Sie also modernes JavaScript schreiben und eine Pfeilfunktion verwenden, kann dies funktionieren oder nicht. Ich flehe Sie an, das auszuprobieren und zu sehen, was passiert. Aber normalerweise möchten Sie dieses Element. Und ich sage das konkret. Dieses Element ist also in dieser Funktion registriert. Und dann verwenden wir dieses Schlüsselwort, um alles zusammenzubinden. Geh weiter und gib dem eine Chance. Versuchen Sie, einen Key Up Event Listener zu erstellen, wenn Sie fertig waren Lassen Sie uns darüber sprechen, was passiert, wenn Sie in ein Ereignis klicken, nicht in ein Ereignis in eine bestimmte Eingabe. Also, wenn ich hineinklicke oder wenn ich aus ihm herausklicke, was passiert? 16. Fokusveranstaltungen: Lassen Sie uns einen Ereignis-Listener registrieren, wenn wir in ein Eingabeelement klicken. Und anstatt ein Eingabeelement zu verwenden, verwenden wir einen Textbereich. Und lassen Sie uns eine andere Art von Selektor verwenden. Das wird also einen Namen meines Textbereichs haben. Und wenn ich die Seite ansehe, ist es nur ein Textbereich. Es passiert nichts. Jetzt funktioniert dies mit einem Eingabebereich, einem Eingabeelement, genau wie es für ein Textbereichselement funktionieren wird. Also zuerst, lasst uns voran gehen und das auswählen. Jetzt können wir dies durch einen Textbereich auswählen, aber wir können dies auch durch ein Attribut auswählen. Und wir können das Attribut sagen und es beginnt so. Klammern Name ist gleich meinem Textbereich, und dies ist eine andere Art von Selektor und dies funktioniert auch in CSS. Punkt auf Fokus, Funktion, console.log, in den Sie fokussiert haben und diesen Textbereich. Und wenn wir die Seite aktualisieren, sobald ich darauf klicke, um etwas einzugeben, sagt es, dass Sie sich in diesen Textbereich konzentrieren. Es ist kein Schweben. Beachten Sie, dass es nicht ausgelöst wird, wenn ich meine Maus darüber lege, nur wenn ich darauf klicke. Und das ist im Grunde alles, was es zur Fokussierung gibt. Dies wird auch für eine Eingabe funktionieren. Also könnten wir eine Eingabe machen. Und Eingabe hat kein schließendes Tag und es hat keine Zeilen-ID, oder es könnte eine Idee haben, aber es wird keine Zeilen oder Spalten haben. Lassen Sie uns beide mögen und nennen Sie es und meine Eingabe. Und so wählen wir jetzt eine Eingabe durch sein Namensattribut aus. Wir sagen, im Fokus, Sie sich auf diesen Eingabebereich konzentriert haben. Gehen wir weiter und geben dem eine Chance. Und wenn ich meine Maus darüber lege und nichts passiert wenn ich hineinklicke und es wird ausgelöst. Aber wenn ich tippe, wird es nicht ausgelöst. Und das einzige, was hier passiert ist, wenn ich meine Maus darüber lege und hineinklicke. Also bin ich bereit zu tippen. Nun, wenn Sie sich fragen, wo auf der Erde würde ich diese große Frage verwenden. Sie wissen, wenn Sie in einer App sind und Sie nach Ihrer E-Mail-Adresse oder etwas gefragt werden und Ihre Tastatur ist ausgeblendet. Nun, Sie klicken in diesen Abschnitt, oder Sie setzen Ihren Daumen in den Abschnitt, tippen Sie darauf und dann Ihre Tastatur Seiten nach oben. Das ist ein gutes, sehr gutes Beispiel für ein „on focus“ -Ereignis. Bitte geh weiter und gib dem eine Chance. Erstellen Sie ein Fokus-Event. Dies ist sehr, sehr ähnlich wie Maus eingeben, Maus verlassen, klicken, und so weiter. Dies sollte sich also in der nächsten Lektion ein wenig vertrauter fühlen , wenn Sie bereit sind. Lassen Sie uns darüber sprechen, was passiert, wenn Sie ein Element verlassen. Also haben wir darüber gesprochen, wenn Sie sich darauf konzentrieren, was passiert, wenn Sie sich konzentrieren. 17. Unscharfe Veranstaltungen: In der letzten Lektion haben wir uns angesehen, was passiert, wenn Sie eine Eingabe haben , und Sie Ihre Maus in sie und dann klicken Sie gerne. Und dann Sie, Es nennt sich Fokussierung. Sie konzentrieren sich auf den Textbereich und können eingeben, was passiert, wenn Sie nicht fokussiert werden möchten. Der Wert wird also nicht auf mich gerichtet sein, auf mich. Und was wir hier tun werden, ist, wählen Sie dies einfach mit einem normalen Selektor, Punkt auf. Und es nennt sich nicht unfokussiert. Es nennt sich Unschärfe. Und wir geben ihm eine Funktion. Console.log. Sie haben sich von diesem Eingabebereich verschwimmen lassen. Okay, nicht fokussiert, ein gemein, das ist ein lustiger Tippfehler. Lasst uns auch austauschen. Wir wissen jetzt, dass es nicht unfokussierte Unschärfe von mir genannt wird. Da gehen wir. Unschärfe von mir. Und wenn ich einklicke, passiert nichts, denn das ist das Fokus-Event. Und wenn ich aus ihm herausklicke, nicht wenn ich meine Maus aus ihm herausziehe, sondern wenn ich aus ihm herausklicke und du siehst, dass der Umriss davon weggeht. Es steht, Sie verschwimmen weg von diesem Eingabebereich. Und jedes Mal, wenn ich es mache, wird es immer und immer wieder auslösen. Wenn du denkst, hey, wann wird das für mich nützlich sein? Dies ist ein wirklich gutes Beispiel dafür, wenn Sie Ihre Adresse eingeben oder jemand eine Website-URL eingibt und Sie mit diesen Informationen arbeiten möchten, können wir den Wert hier erhalten. Wir könnten sagen, Konsolenpunktprotokoll, dieser Punkt Val, verschwimmen von mir. Doo-Doo-Doo-Doo, 123123123. Und wenn ein Unschärfe ausfällt, sagt es, dass ich verwischen werde, 123123123. Und so können wir jetzt mit diesen Informationen arbeiten. Nicht auf jeder Taste nach oben, nicht wenn Sie sich darauf konzentrieren, nur wenn Sie mit der Eingabe fertig sind, können Sie etwas damit tun. Und so als Beispiel könnten wir etwas tun, wie lassen Website-URL ist gleich diesem Punkt val. Und dann können wir sagen, ob Website-URL Punkt Teilstring 04 nicht gleich HTTP ist, und wir wollen sicherstellen, dass dies eine Website ist. Dies wird also eine Art Website-URL sein, also wie www.facebook.com. Aber jede Website kommt tatsächlich mit HTTP. Das ist das HTTP-Protokoll. Und so können wir jetzt sagen, dass die Website-URL gleich ist. Und wir können hier ein Template-Literal verwenden. So verwenden wir JavaScript ES6 und wir können HTTPS Doppelpunkt Schrägstrich Website-URL tun. Und wir verwenden Backticks für das Template-Literal. Und dann können wir sagen, dass dieser Punkt val gleich der Website-URL ist. Und was wir hier tun, ist, wenn Sie davon verwischen, wenn Sie irgendeine Art von Text drin haben, der nicht mit HTTP beginnt, wird es automatisch HTTP hinzufügen. Und dann wird es diesen Wert auf Website-URL ändern. Nun, dass Website Sie oder möglicherweise nicht ändern, könnte es möglicherweise ändern, wer weiß. Es hängt davon ab, was der Benutzer eingibt. Also lassen Sie uns voran gehen und, und schreiben Sie dies als Beispiel. Gehen wir zu facebook.com. Und wenn ich hier verschwimmen, fügt es automatisch HTTP-Doppelpunkt Schrägstrich facebook.com hinzu. Und das Schöne daran ist, dass Sie jetzt Benutzervalidierung für sie durchführen können. Also wissen Sie, wenn Sie sich auf einer Website anmelden und es ist wie was ist Ihre Website sind, was ist Ihre E-Mail-Adresse? Und es ist, als ob Sie meine website.com setzen und es ist wie, oh, tatsächlich brauchen Sie dieses HTTP, bevor Sie dieses Formular einreichen können, bevor Sie sich tatsächlich anmelden können. Es ist ja, ich verstehe es. Aber auch der Entwickler kann das für uns tun. Und Sie als Entwickler können das jetzt für den Benutzer tun, wodurch die Benutzererfahrung deutlich verbessert wird. Und das passiert alles mit der Weichzeichnungsfunktion oder dem Unschärfe-Ereignis-Listener. Jetzt werden wir über das Absenden eines Formulars gesprochen. Gerade jetzt. Lassen Sie uns in der nächsten Lektion fortfahren und sehen, wie wir verhindern können, dass ein Formular übermittelt wird. 18. Formulare Aneignungen: Es wird eine Zeit in Ihrem Leben geben, in der Sie eine Form haben, und es sollte etwas tun, aber Sie haben tatsächlich einen Knopf. Der Typ ist gleich dem Senden. Senden Sie dieses Formular und Sie haben diese Schaltfläche. Und wenn jemand das Formular absendet, möchten Sie etwas tun, vielleicht möchten Sie die Schaltfläche deaktivieren. Sie können diese Schaltfläche vollständig deaktivieren, wenn Sie möchten. So können die Leute nicht mehr als einmal auf „Senden“ klicken. Das ist eine sehr häufige Sache. Oder Sie können das Senden des Formulars vollständig verhindern. Lassen Sie eine Eingabe hier tun, und lassen Sie uns tun, der Wert ist gleich, Das ist, dass ich einen Wert mache. Lassen Sie uns einen Platzhalter machen, Ihr Name. Und wenn wir das Formular sehen, sieht das alles so aus. Also wird es nach Ihrem Namen fragen und dann senden Sie dieses Formular. Nun, für dieses Beispiel, müssen wir diesem tatsächlich einen Namen geben. Name ist gleich Name und dies wird in Ihrer URL angezeigt. Also, wenn ich auf Submit und wir werden sehen, Name ist gleich, lassen Sie uns meinen Namen als Bob setzen. Und da steht index.html. Fragezeichen, Name ist gleich Bob. Es ist alles, was du da reinlegst. Es wird automatisch in der URL ausgefüllt werden. Und es sagt, dass Sie automatisch in der URL ausgefüllt werden. Und so wollen wir vielleicht nicht, dass das passiert. Vielleicht wollen wir, dass etwas anderes passiert. Und was ich tun werde, ist hier wieder hereinzuzoomen. Was wir also tun können, ist, dass wir dieses Formular auswählen können. Und dann können wir „On Submit“ sagen, und hier wird es interessant. Funktion kann jeden Ereignisparameter annehmen und wir haben tatsächlich diese ganze Zeit ignoriert, aber jeder Ereignis-Listener hat einen Ereignisparameter. Und wir können sagen, dass Ereignis Punkt Standard verhindern. Und was dies tun wird, ist zu sagen, hey, ja, ein Browser weiß, dass ein Formular soll senden, wenn Sie auf die Schaltfläche Senden klicken. Aber wenn dieses Formular gesendet wird, wird es diese Funktion zuerst ausführen. Und wir werden sagen, Nehmen Sie dieses Ereignis, das Submit-Ereignis, und verhindert, seine Standardsache zu tun, verhindert, dass es sich selbst ist. Und so jetzt können wir sagen, console.log Formular wurde nicht eingereicht. Und ich werde diese URL bereinigen, weil wir wissen, dass jedes Mal, wenn wir dieses Formular senden, dass es automatisch Dinge zur URL hinzufügen und vielleicht wollen wir das nicht. Also lasst uns voran gehen und Kyle als den Namen eingeben. Senden Sie dieses Formular ab. Sie bemerken, wie sich die URL nicht geändert hat. Die Seite hat diese Seite nicht flackert und neu geladen, und es sagt, dass das Formular nicht gesendet wurde. Nun, ehrlich gesagt, zu diesem Zeitpunkt ist dies völlig nutzlos für Sie, denn warum sollten Sie verhindern wollen, dass ein Formular eingereicht wird? Nun, du würdest vielleicht nicht den Knopf deaktivieren wollen , über den wir auf der Straße reden. Vielleicht möchten Sie der Schaltfläche eine andere Klasse hinzufügen, damit sie anders aussieht. So sieht es so aus, als ob das Formular eingereicht wird? Möglicherweise, ja. Darüber reden wir auch auf der Straße. Der häufigste Anwendungsfall ist jedoch, wenn Sie ein Formular haben und es verhindern möchten. Was Sie tun möchten, ist, dass Sie dieses Formular greifen und die Daten serialisieren möchten. Und dann möchten Sie vielleicht eine Art Ajax-Anfrage machen. Das Formular sollte also nicht wirklich an index.html senden oder wo immer Sie es sagen, darauf zu verweisen. Javascript kann das überschreiben und ihm mitteilen, dass eine Ajax-Anfrage an einen anderen Ort gestellt werden soll. Jetzt wissen wir noch nicht über jQuery Ajax, also können wir noch nicht darüber reden. Wir werden darüber am Ende des Kurses sprechen. Aber jetzt, stecken Sie das einfach in Ihre Gesäßtasche, weil Sie es brauchen werden. Und wenn Sie ein Formular senden und eine Standardaktion verhindern möchten, müssen Sie dann die Werte aus den Eingabe- oder Textbereichen oder den Auswahlfeldern abrufen. Sie werden sich diese Informationen schnappen und etwas damit machen wollen. Und das ist, was Event Dot Prevent Standard tut. Nun, während wir auf dem Thema Ereignis Punkt verhindern Standard, was wir tun können, ist, lassen Sie uns gehen und wählen Sie diese Schaltfläche. Wir wissen, dass, wenn, wann immer wir diese Schaltfläche drücken, wenn wir dieses Formular Schaltfläche absenden klicken, das wird, um dieses Formular zu senden. Es hat schon mal für uns geklappt. Sicherlich wird wieder funktionieren, wenn wir dieses JavaScript hier deaktivieren, können wir das gleiche mit Submit tun. Gehen wir also voran und wählen Sie diese Schaltfläche aus. Knopf Aber gelehrt. Aber auf, wenn wir auf diese Schaltfläche klicken, werden wir eine Funktion registrieren. Und da jede Funktion heimlich einen Ereignisparameter hat, können wir Ereignis Punkt verhindern, Standard. Und genau wie ein Kopf nach oben, werden Sie oft Ereignis als e. Also, wenn Sie sehen, Funktion e, Chancen sind in JavaScript, wir sprechen über Ereignis. Und wir könnten console.log. Die Schaltfläche wird nutzlos gemacht. Und lassen Sie uns die Seite aktualisieren und senden Sie diese Schaltfläche und es sagt nur, dass Schaltfläche gerendert wird verwendet das Formular wird nicht gesendet. Ich kann das tun. Und wenn ich das Formular absende, wenn es tatsächlich einreicht, sollte dies aktualisiert werden oder es sollte abgewischt werden. Es sollte nichts hier drin sein. Aber es verhindert das Absenden des Formulars. Und warum macht es das? Und es ist, weil wir gesagt haben, nehmen Sie diese Schaltfläche, wenn Sie darauf klicken, nehmen Sie dieses Ereignis, das Click-Ereignis, und verhindern Sie, dass es seine normale Sache tut, verhindert, dass eine normale Funktion in der Schaltfläche. In dieser Lektion möchte ich, dass Sie ein HTML-Formular schreiben, wenn Sie es einreichen, und verhindert, dass Sie etwas tun. Und dann kommentieren Sie das aus, wie ich es getan habe. Und wenn Sie einen Submit-Button haben und sich daran erinnern, dass die Art der Schaltfläche nicht Button sein kann. Es kann nicht zurückgesetzt werden, es muss Submit sein. Also, wenn Sie dieses Formular durch Klicken auf die Schaltfläche absenden, verhindert, dass seine normale Sache als auch. Es gibt zwei Möglichkeiten, das Senden des Formulars zu verhindern. Und denken Sie auch daran, wenn Sie Ihr Formular hier absenden, wann Sie verhindern, dass es gesendet wird. In der Regel greifen wir diese Informationen aus wie ein Eingabetextfeld irgendwo anders. Und wir arbeiten zuerst mit diesen Informationen und dann übermitteln wir sie vielleicht mit JavaScript oder vielleicht nicht. Vielleicht senden wir diese Informationen an und Ajax oder einen API-Endpunkt. Unabhängig davon. Wenn das gut ist zu wissen, dass dies gut ist, um in der Gesäßtasche stecken. Und Event Dot Prevent Standard ist sehr, sehr beliebt. Sie werden das überall sehen und das ist eigentlich ehrlich, das ist nur JavaScript. Das ist nicht einmal jQuery. Also geh voran und gib dem einen Schuss, wenn du fertig bist, lass uns über das Verstecken von Elementen sprechen. 19. Elemente verschleißen: Okay, reden wir über das Verstecken von Elementen. Zuerst muss ich dir zeigen, was ich auf meiner Seite habe. Ich habe diese Box auf meiner Seite, und es ist nur eine 100 x 100 schwarze Box. Und das ist das CSS für Breite 100, Höhe eins, Höhe 100, Hintergrundfarbe ist schwarz. Das war's. Und dann habe ich einen Knopf, auf dem steht, klicken Sie mich. Und dann verwende ich eigentlich nur die Box mit CSS hier. Und wenn wir auf diese Schaltfläche klicken, lassen Sie uns dieses Feld verstecken. Und so brauchen wir dafür einen Ereignis-Listener. Lassen Sie uns voran gehen und wählen Sie diese Schaltfläche durch ihre ID. Klicken Sie auf mich. Punkt auf. Klicken Sie auf. Funktion. Wir können ein E oder Ereignis übergeben und tun e dot default verhindern, wenn wir wollten, wenn dies in einer Form war, die nützlich wäre. Derzeit ist dies nicht nützlich, da es sich nicht innerhalb eines Formulars befindet. Aber wenn es so war, wissen Sie, das ist eine gute Maßnahme zu ergreifen. Und dann können wir das Kästchen auswählen. Sie können dieses Kästchen auswählen. Und Sie können sehen, weil dies jQuery VS Code alle möglichen Dinge hinzufügt und wir werden nicht alles durchgehen. Es gibt eine Menge hier drin, aber was wir tun wollen, ist, dieses Feld auszuwählen und wir wollen dieses Feld ausblenden. Und das ist alles, was wir tun werden. Also, wenn ich diese Seite aktualisiere, boom, versteckt sie, werde wieder auffrischen. Und mal sehen, was in unseren Elementen hier passiert. Diese Box genau hier drin, das ist wichtig, auf die unten hier zu achten. Es zeigt einfach keine an. Das ist alles, was es tut. Wenn Sie also bestimmte Dinge ausblenden möchten, können Sie das mit der Auswahlpunkthöhe tun. Jetzt wickeln wir dies einfach in einen Ereignis-Listener ein, in einen Click-Ereignis-Listener. Also sagten wir, wann immer Sie auf diese Schaltfläche klicken, dann wählen Sie das Feld und verstecken Sie es. Das müssen wir nicht tun. Wir können es richtig machen, wenn die Seite auch geladen wird. Wenn wir die Seite laden, können Sie sehen, dass sie blinkt, weil in unserem Quellcode sie auftaucht und wir wissen, dass sie in unserem Quellcode angezeigt wird. Es wird blinken und dann wird jQuery eintreten und es wird sagen, oh, eigentlich, lasst uns es loswerden. Lassen Sie es uns verstecken. Wir löschen es nicht aus dem DOM. Wir sorgen dafür, dass wir später noch darauf zugreifen können. Es wird also nicht entfernt, es wird nicht gelöscht, es wird einfach ausgeblendet. Was ich möchte, dass Sie tun, ist, dass eine Chance geben, aber ich möchte, dass Sie einen Ereignis-Listener damit schreiben. Lassen Sie uns daran gewöhnen, Ereignis-Listener zu schreiben, denn darum geht es bei jQuery. Es dreht sich alles um Ereignis-Listener. Also richtig, ein Ereignis-Listener auf einer Schaltfläche, wenn Sie auf diese Schaltfläche klicken, blenden Sie das Feld aus. Wenn Sie das getan haben, werden wir in der nächsten Lektion gehen und diese Box wieder sichtbar machen. 20. Elemente zeigen: Ordnung, also geht das nur von der letzten Lektion ab. Dies ist das exakte Beispiel aus der letzten Lektion. Also haben wir eine Schaltfläche und eine Box, und wenn wir die Seite speichern und aktualisieren, ist das, was wir hier haben. Jetzt werde ich sicherstellen, dass dieses Feld standardmäßig ausgeblendet ist, ich werde Anzeige nicht blockieren verwenden, aber keine anzeigen. Kiste erscheint nicht. Es ist nur, es ist da, es ist im DOM, aber es ist einfach unsichtbar. Also, was wir tun können, ist, wenn wir auf diese Schaltfläche anstelle von verstecken klicken, können wir Dots zeigen. Und das ist auch wirklich wichtig. Lassen Sie uns das hier unten im Auge behalten, aktualisieren wir diese Seite. Und hier unten werden wir den Anzeigeblock sehen. Und so nahm es automatisch an, dass es ein Blockelement war und ging für Anzeigeblock. Und so zeigte es nur das Element. Und eigentlich sollte ich hier oben nicht die Höhe sagen, also ist es ein Show-Element. Zeigen Sie das Element an. Da gehen wir. Das ist alles, was es dazu gibt. Schön und süß. Es ist sehr ähnlich wie Verstecken. Also haben wir uns verstecken, um etwas zu verbergen und dann etwas zu zeigen. Jetzt als das vollständige Beispiel, wir könnten id auswählen. Klicken Sie auf Me, das wird, um diese Schaltfläche zu wählen. Lassen Sie uns die schreiben, die alte Art und Weise, wie wir funktionieren könnten. Und das ist nur eine andere Syntax und wir verwenden normalerweise den Punkt auf Syntax, aber wir können hier ein Click-Ereignis machen. Dann könnten wir das Kästchen auswählen und es nicht ausblenden, aber wir könnten es zeigen. Und es funktioniert für uns jedes Mal. Gehen Sie voran und geben Sie, dass eine Chance, wenn Sie fertig sind , werden wir in etwas ein wenig mehr Spaß bekommen. Wir werden anfangen, CSS-Klassen zu unseren Elementen hinzuzufügen. Wenn Sie also auf eine Schaltfläche klicken, können wir dem Element eine Klasse hinzufügen, damit es ein wenig anders aussieht. 21. CSS hinzufügen: Werfen wir einen Blick darauf, wie wir dynamisch eine Klasse zu einem vorhandenen Element hinzufügen können. Also habe ich hier oben ein bisschen CSS, und lasst uns das loswerden. Ich habe nur eine Box mit einer 100 Höhe 100 Hintergrundfarbe schwarz. Lassen Sie uns voran und ändern Sie diese Klasse oder fügen Sie eine Klasse hinzu, um diese Hintergrundfarbe zu ändern, sagen wir, blau. Wir könnten also sagen, dass es eine Klasse namens Blau gibt, und sie wird einfach eine Hintergrundfarbe von Blau haben. Jetzt brauche ich diese Box-Elemente, um tatsächlich zu existieren. Und in meiner jQuery hier kann ich einfach dot-box sagen, dot add class blue. Und bevor ich das mache, gehen wir eigentlich weiter und lassen Sie uns einfach ein wenig mit Klassen arbeiten. Lassen Sie uns mit anstelle von IDs arbeiten, die mit Klassen gearbeitet haben. Also haben wir Klassenbox, Box, Box, Box, und lasst uns das in Punktbox ändern. Also, wenn ich jetzt meine Seite aktualisiere, wird meine Blackbox blau und jetzt ist es, man kann irgendwie sehen, lassen Sie es wirklich schnell blinkt. Aber es änderte meine Box in blau. Und wir können dies tatsächlich als echtes Beispiel hier sehen, ist, dass wir dieses innere DOM löschen können. Und so sieht es standardmäßig aus. Und alles, was wir einfach tun, ist, Blau hinzuzufügen. Nun, gehen wir weiter und wickeln Sie das in eine Art Timeout ein. Also lassen Sie uns Timeout setzen. Und wir könnten dem eine Funktion geben. Und lassen Sie uns eine Zeitüberschreitung für zwei Sekunden machen. Und dann wählen Sie das Feld aus und fügen Sie die Klasse blau hinzu. Also, wenn ich die Seite hier aktualisiere, wird es nur zwei Sekunden warten, und dann wird es blau. Wenn wir nun modernes JavaScript schreiben wollen, brauchen wir dort keine Funktion zu verwenden. Wir können einfach eine Pfeilfunktion verwenden, die genau dasselbe tun wird, aktualisieren, zwei Sekunden warten, es wird blau. Wir können dies auch in jede Art von Ereignis-Listener einschließen, die wir wollen. So könnten wir so etwas wie die Schaltfläche sagen, wenn sie angeklickt wird. Funktion. Oder weil wir das Schlüsselwort „this“ nicht benötigen, können wir eine Pfeilfunktion ausführen. Und lasst uns das loswerden und das nach oben bewegen. Und weil wir einen Schaltflächen-Event-Listener haben, brauchten wir einen Knopf auf der Seite. Also lassen Sie uns voran und fügen Sie diese Schaltfläche hinzu. - Knopf Klicken Sie auf mich. Und wenn wir auf diese Schaltfläche klicken, wird dieses Feld auswählen und eine Klasse von blau hinzufügen. Gehen wir weiter und erfrischen wir uns. Klicken Sie auf. Und etwas ist hier nicht richtig. Und das liegt daran, dass ich geklickt habe, es soll Click sein. So erfrischen Sie sich. Klicken Sie auf. Da gehen wir. Aktualisieren, klicken, es ändert sich, aktualisieren, klicken, es ändert sich. Wir können alle möglichen Dinge hier machen und wir könnten auch die Breite ändern. Also ist es eine Breite 100, und das wird einfach die Breite zu 100% ändern. Und so können wir Klasse blau hinzufügen. Wir können auch Klassenbreite 100 hinzufügen und aktualisieren. Und es ändert seine Breite von 100%. Ich möchte, dass du das anschaust. Probieren Sie das aus. Das wird sehr, sehr wichtig sein. Sie werden dies viel in Vanille-JavaScript sowie regulärem jQuery verwenden. Sie werden also in der Lage sein, eine Klasse hinzuzufügen. Sie können mehrere Klassen hinzufügen, indem Sie einfach ein Leerzeichen hinzufügen. Und jQuery wird es herausfinden und diese Klassen für Sie hinzufügen. Wickeln Sie das in einen Ereignis-Listener ein, wenn Sie das, dieses Schlüsselwort nicht benötigen , sage ich das so. Wenn Sie das nicht innerhalb Ihrer Funktion benötigen, können Sie einfach eine Pfeilfunktion schreiben. Es ist nur ein wenig mehr Leistung, ein wenig moderneres JavaScript. Und dann können Sie Ihre Box oder Ihr Element auswählen. Und dann können Sie eine Klasse hinzufügen, was auch immer Ihre Klassen sind. Sie müssen also ein wenig CSS dafür wissen. Wenn Sie CSS nicht wirklich kennen, ist das okay. Sie können das Video einfach hier pausieren und kopieren, was ich auf meinem Bildschirm habe. Ich habe einfach eine Box, Box-Klasse. Ich habe eine blaue Klasse, jede Breite 100 Klasse. Und alles, was tut, ist, diese Klassen hinzuzufügen. Und wieder, wenn wir inspizieren, haben wir jetzt Klasse Box blau und Breite 100. Geh weiter und gib dem eine Chance. Und wenn wir bereit sind, wenn wir nett und bereit sind. Lassen Sie uns voran und nehmen Sie dieses genaue Beispiel und tun das genaue Gegenteil, wo wir eine Klasse entfernen. 22. CSS entfernen: Okay, in diesem Beispiel gehen wir weiter und entfernen Sie die blaue Klasse und entfernen Sie die Breitenklasse. Und was ich hier habe, ist ein Element mit drei Klassen drauf, Box blau und Breite 100%. Dies ist nur aus der letzten Lektion, in der wir eine Klasse hinzugefügt haben. Und das ist mein Box-blaues Ende mit CSS, das wir hier gemacht haben. Also, was ich jetzt tun möchte, ist, zwei verschiedene Klick-Ereignisse zu registrieren. Wenn Sie auf Blau entfernen klicken, entfernen Sie Blau von hier. Und wenn Sie Breite entfernen, entfernen Sie die Breite 100 Klasse. Und damit wir ein bisschen schick werden können. Anstatt das Kästchen mehrmals auszuwählen, können wir es einmal auswählen. Also können wir sagen, const Box ist gleich, und wir werden nur die Box selbst als Klasse bekommen. Und das ist nur ein einfacher Selektor. Wir können auch tun const, entfernen blau ist gleich blau zu entfernen, die diese Schaltfläche auswählen wird. Und entfernen Sie Breite wird die Breite zu entfernen. Und so sind diese nur Selektor. Also habe ich die Box entfernt blau und entfernen Breite ausgewählt. Nun, hier, was ich tun wollte, ist, wenn Sie auf Entfernen blau klicken, wählen Sie dieses Feld und entfernen Sie diese Klasse. Und das können wir ganz einfach machen. Wir können sagen, Entfernen Sie blauen Punkt onclick, Funktion, vox Punkt entfernen Klasse. Das ist alles, was es ist, nur das Wort Klasse entfernen. Und dann wollen wir blau entfernen. Es geht voran und gib dem eine Chance. Und wenn wir blau entfernen. Und wie eigentlich, als besseres Beispiel hier, hier unten haben wir eine Box blau Breite 100. Wir könnten Blau entfernen und es wird es für uns loswerden. Dann können wir auf eine andere Schaltfläche klicken und die Breite entfernen. Und was ich mit diesen Konzepten hier mache ist, anstatt das Kästchen mehrmals auszuwählen. Anstatt das auswählen und dort einfügen zu müssen, kann ich es nur einmal auswählen, weil ich es wirklich nur einmal auswählen muss. Und dann können wir in einem zweiten Ereignis-Listener genau das Gleiche tun. So können wir sagen, Breite entfernen, Punkt auf Klick. Und weil wir das Schlüsselwort dieses überhaupt nicht benötigen, können wir eine Pfeilfunktion ausführen und wir können sagen, Box dot entfernen Klassenbreite. Und das wird nicht sein, es wird Breite 100 sein. Wir möchten diese Klasse entfernen. Gehen wir weiter und erfrischen wir uns. Wenn wir die Breite entfernen, wird dies eine perfekte Box sein. Wenn wir blau entfernen, ist es jetzt schwarz. Und das ist wirklich alles, was es gibt. Das einzige, was wir wirklich brauchen, um weg von dieser speziellen Lektion zu nehmen, ist entfernt Schließe. Also geh weiter und gib dem einen Schuss. Entfernen Sie Klasse, entfernen Sie eine Klasse, und versuchen Sie einfach, es für Sie funktioniert. Sollte Sie nur etwa ein oder zwei Minuten dauern und wenn Sie bereit sind, gehen wir zur nächsten Lektion, in der wir Klassen tatsächlich ein- und ausschalten, denn im Moment können wir nicht wirklich leicht erkennen, ob eine Klasse eine blaue Klasse oder eine Breite hat 100. Wir können nicht wirklich erkennen, ob ein Element diese Klassen hat. Was wir also tun können, ist, dass wir sie mit einer sehr einfachen jQuery-Funktion ein- und ausschalten können. 23. Toggling Toggling: In der letzten Lektion haben wir eine Art Box erstellt, und wir gaben ihr eine Breite von 100%. In diesem hier haben wir nur ein perfektes Quadrat. Und was wir tun wollen, ist blau umgeschaltet. Also möchten wir jedes Mal, wenn wir auf diese Schaltfläche klicken, das Blau loswerden, und dann erneut darauf klicken und es blau schalten und darauf klicken und einfach ein- und ausschalten. Und so können wir das tun, indem zunächst ein Click-Ereignis erstellen. Also wollen wir die Toggle blaue Klasse auswählen. Und das ist genau hier oben. Wir wollen alles unterhalten. Wir möchten diese Schaltfläche auswählen, Punkt auf Klick-Funktion. Und weil wir das Schlüsselwort dieses eigentlich nicht brauchen, können wir Pfeilfunktion machen. Dann können wir einfach die Box sagen, die wir hier oben ausgewählt haben, Klasse blau umschalten, und das war's. Und wenn jQuery erkennt, dass es bereits eine blaue Klasse gibt, wird es sie ausziehen. Und wenn es erkennt, dass es keine blaue Klasse gibt, wird es sie hinzufügen. Und so gehen wir weiter und geben das eine Chance, aktualisieren unsere Seite, und beobachten Sie das hier unten, wo blaue Dollar steht. Jedes Mal, wenn ich auf diese Schaltfläche ein- und ausklicke , ein- und ausschalten, einfach so. Und das ist alles, was es wirklich gibt. So schalten wir die Klasse ein und aus. Nun, wo ist das anwendbar? Nun, wenn Sie etwas verstecken und zeigen müssen oder wenn Sie etwas machen wollen, handeln Sie wegen einer gewissen anderen Sache. Und eigentlich als ein besseres Beispiel, lassen Sie uns das loswerden und lassen Sie uns eine Eingabe erstellen. Für eine Eingabe. Und wann immer wir diese Eingabe haben, lasst uns einfach so. Wenn wir haben, wenn wir diese Eingabe haben und wir Schlüssel nach oben, lassen Sie uns gehen und diesen Wert überprüfen. Und dann, wenn dieser Wert ein bestimmter Name ist, ändern wir den Umschalter, die Klasse in blau. Ansonsten ändern Sie es auf nicht blau. Also lasst uns voran gehen und diesen Wert bekommen. So const val u ist gleich diesem Punkt val. Jetzt erkennen Sie, dass ich das, dieses Schlüsselwort hier verwende. Also, jetzt müssen wir Funktion schreiben. Wir können sagen, wenn Wert gleich Caleb ist, Wir könnten sagen, Klasse hinzufügen. Sonst, Box Punkt, Klasse blau entfernen. Jetzt verwenden wir hier nicht wirklich Toggle in dem Sinne, dass wir keine Toggle-Funktion verwenden, aber wir schalten Klassen um, indem wir sie entfernen. Und eine Sache, die wir tun müssen, ist, dass Funktionen keine Pfeilfunktionen haben, es ist nur das Funktionsschlüsselwort. Lassen Sie uns voran und aktualisieren Sie unsere Seite hier. Und wenn ich tippe, Jacob funktioniert nicht, wenn ich Gully tippe funktioniert nicht, wenn ich tippe, Caleb, Boom, wird blau. Und jetzt kann ich es einfach so umschalten und indem ich wirklich alles andere tippe. Das sind zwei Möglichkeiten, wie wir basierend auf verschiedenen Ereignis-Listener umschalten können. Nun, was ich möchte, dass Sie tun, ist, gehen Sie voran und versuchen, die Klasse umzuschalten. Sie müssen dieses ganze Beispiel hier nicht machen. Dieses Beispiel ist, ja, ziemlich groß und nicht super relevant für diese Klasse. Aber stellen Sie sicher, dass Sie voran gehen und die Toggle-Klassenfunktion hier mit einem Selektor verwenden. So könntest du Box Dot Togo Klasse blau tun. Gehen Sie voran und geben Sie diesem einen Schuss, wenn Sie fertig sind Lassen Sie uns voran und fügen Sie benutzerdefinierte CSS hinzu, keine Klasse, aber fügen Sie ein benutzerdefiniertes CSS zu einem Element hinzu. 24. Custom CSS hinzufügen: Lassen Sie uns voran und fügen Sie ein benutzerdefiniertes CSS zu einem bestimmten Element hinzu. Also in dieser Lektion, was wir tun werden, ist, dass wir diese Box greifen und wir werden CSS hinzufügen. Und wir werden keine Klasse hinzufügen, wir werden keine Klasse entfernen. Wir werden dynamisches CSS hinzufügen. Also können wir eigentlich Recht haben. Stil ist gleich Breite 100%, zum Beispiel können wir das mit JavaScript und jQuery machen. Also zuerst müssen wir unser Box-Element greifen. Also lasst uns Dot Box machen. Und alles, was wir tun müssen, ist dot CSS zu tippen. Und das ist wirklich cool, weil wir Hintergrundfarbe machen könnten, blau, und diese Syntax ist ein wenig interessant. Was wir hier also tun, ist, dass wir Punkt-CSS sagen, der erste Wert in dieser Funktion wird sein, was wollen wir ändern? Welche CSS-Eigenschaft möchten wir ändern? Und dann wollen wir den tatsächlichen Wert ändern. Also können wir das in Blau ändern, aber gehen wir weiter und ändern Sie es in Orange. Und Sie können sehen, dass es tatsächlich schwarz lädt und dann zu Orange wechselt. Und Sie können hier sehen, Stil Hintergrundfarbe ist gleich orange. Wenn wir nun unseren Quellcode überprüfen, tun, tun, tun, tun, tun, tun, tun. Wo sind wir? Es gibt kein Style-Attribut auf ihrer jQuery, das dynamisch für uns hinzugefügt wurde. Wenn wir das wollten, könnten wir Vielfaches machen. Wir könnten Punkt-CSS, Grenze, Komma, zehn Pixel, solides Schwarz tun. Und das hat es dynamisch für uns verändert. Wir könnten noch einen machen. Wir könnten Punkt-CSS, Grenzradius, Komma 50% tun . Und jetzt verwandelt es ihn in einen orangefarbenen Kreis mit schwarzem Rand, anstatt nur ein normales schwarzes Quadrat zu sein. Und diese Art führt uns ein wenig in Animationen, die wir mehr auf der Straße sprechen werden. Jetzt gibt es einen besseren Weg, dies zu tun. Wir könnten das auskommentieren und wir könnten Punkt-CSS machen. Und wir können diesem ein Objekt geben. Wenn wir diesem nun ein Objekt geben, geben wir keine Hintergrundfarbe da Objekte keine Bindestriche in ihren Namen haben sollen. Wir machen Hintergrund, und dann haben wir CamelCase Es Farbe. Sehen Sie sich also den Unterschied zwischen diesem und diesem an. Hintergrund gestrichelte Farbe versus Hintergrundfarbe mit einem Großbuchstaben C Und lasst uns voran gehen und dies in Gelb ändern. Lasst uns die Grenze ändern. 210 Pixel, einfarbig blau Und lasst uns den Grenzradius ändern. Beachten Sie die Groß- und Kleinschreibung, und es gibt keinen Radius von Bindestrichen, der zehn Pixel beträgt. Und so ist dies nur ein normales JavaScript-Objekt. Gehen wir weiter und speichern Sie das und aktualisieren und schauen Sie sich das an. Wir können sie alle in einem Schuss ändern, oder wir können sie zusammenketten, wenn wir wollten. Nun möchte ich, dass du beide Methoden ausprobierst. Ich habe versucht, sie miteinander zu verketten. Also hast du den ersten und dann hast du einen zweiten, dann hast du einen dritten und kommentiere die dann aus. Und ketten Sie sie im Grunde nicht zusammen, ändern Sie sie einfach alle zur gleichen Zeit, denn jetzt muss jQuery hier gehen, ändern, Lesen Sie das Styling hier, ändern Sie. Ich hatte das Styling hier gelesen, das Geschlechter-Styling gelesen, anstatt in diese Methode einzugehen , wo wir nur alles geben. Wir können einfach sagen, hey, jQuery, beschäftigen Sie sich mit allem auf einmal. Statt drei verschiedene Aufgaben zu erledigen, führen Sie eine große Aufgabe aus. Als Nächstes lernen wir, wie man Dinge einblendet und die Dinge in Ohnmacht macht. 25. Einblasen und ausblenden: Werfen wir einen Blick darauf, wie wir ein Element ein- und ausgeblendet Element ausblenden können. Also in dieser Lektion werde ich meine Konsole verwenden. Und das ist eine coole kleine Sache, denn in meinem Code verwende ich hier ein CDN. Ich habe Zugang zu diesem kleinen Dollarzeichen, das bedeutet jQuery, dieses kleine Dollarzeichen. Und damit ich diese Box auswählen kann, kann ich sagen const. Ja, lass uns Const machen. Box ist gleich und geben Sie ihm einen Selektor. Und wenn ich Dollarzeichenbox tippe, gibt es mir diese Box das gesamte Element. Es ist eigentlich eine Liste von Knoten technisch, aber es gibt nur einen darin, so dass wir nur mit dem einen arbeiten können. Es ist völlig in Ordnung. Nun, um etwas in einem Out zu verblassen, alles, was wir tun müssen, ist Doe Dot Box einblenden. Eigentlich ist es schon verblasst. Die Einlässe verblassen und es verblasst aus. Wir könnten auch Dot Box tun, Punkt einblenden und es verblasst. Wir können ihm auch ein Timeout geben oder nicht ein Timeout, sondern einen Timer. Wie lange sollte das dauern, bis es verblasst wird? Nehmen wir an, das wird 4,5 Sekunden dauern. Also machen wir 4500 Millisekunden, also sind das 4,5 Sekunden ausblenden und es wird langsamer. Der Phaedo. Wir können das Gleiche mit Fade in machen. Fade ein, verblasst langsam. Und es gibt tatsächlich eine andere coole Sache, die wir tun können , ist, dass wir diesem eine Callback-Funktion geben können, wird ein wenig später über Callback-Funktionen sprechen, aber wir können ihm sagen, dass es etwas tut, wenn es fertig ist, in fertig verblasst. Also, was ich möchte, dass Sie tun, ist, Ihren Code diesmal nicht unbedingt in Ihren Editor zu schreiben. Gehen Sie weiter und öffnen Sie einfach Ihre Konsole. Sie können immer mit der rechten Maustaste klicken, überprüfen. Klicken Sie auf die Registerkarte „Konsole“. Wählen Sie Ihre Box wie das, was wir getan haben. Wir haben Const-Boxen, die dieser Box entsprechen. Und dann haben wir das Fade-Out, Box Dot Fade-in. Gib dem einen Schuss einmal, der für dich funktioniert, lass uns zur nächsten Lektion gehen, wo wir lernen, wie man ein Fade umschaltet und ein Display umschaltet. 26. Ausklingen und Displays: Gehen wir voran und schalten Sie ein Fade, einen Fade-Effekt und einen Anzeigeeffekt ein. Also müssen wir hier zwei verschiedene Dinge tun. Vor allem brauchen wir eine Art Ereignis-Listener. Klicken Sie auf „Me“, und es ist nur eine einfache Schaltfläche. Also lassen Sie uns voran und registrieren Sie diese Schaltfläche als Klick-Ereignis. Knopf. Punkt-on-Klick-Funktion. Und so registrieren wir den Click-Event-Listener. Dann müssen wir das Kästchen auswählen. Und wir können umschalten. Und wir können Fade Toggle tun. Und das wird entweder ein- oder ausblenden, je nachdem, wie sichtbar es ist. Also lassen Sie uns voran und geben das eine Chance. Wenn wir auf diese klicken, verblasst, verblasst einfach so aus. Und wir können hier sehen, dass es ein Stilattribut gibt und es beobachten. Wenn ich darauf klicke, wird es ausgeblendet. Und es ändert die Deckkraft auf 0, und dann ändert es die Anzeige in keine. Und wenn es wieder verblasst, ändert es den UPC. Es scrollt diese Sicherung zu einem oder einem 100% und macht es Anzeigeblock oder tatsächlich wird die Anzeigeeigenschaft vollständig loswerden. Wir können sehen, es ist keine Anzeige. Und es wird alles sein, was ich vorher gesagt habe. Also, wenn es Inline-Block ist, wird es inline-Block sein. Wenn es Block oder Flexbox angezeigt wird, wird es Flexbox sein, es wird alles sein, was wir in CSS gesetzt haben. Damit wir ausblenden können. Die andere Sache, die wir tun können, ist einfach umschalten. Dadurch wird es so umgeschaltet, dass sie angezeigt wird oder nicht angezeigt wird. Also einfach, einfach so, das ist alles, was wir tun. Wir klicken darauf. Und jedes Mal, wenn wir darauf klicken, macht es entweder sichtbar oder macht es unsichtbar. Das ist alles, was es tut. Genau als Zusammenfassung wird Toggle im Grunde Verbergen und Anzeigen verwenden. Während Fade Toggle wird Fade in und Fade Out verwenden. Geh weiter und gib dem eine Chance. Versuchen Sie Fade Toggle und versuchen Sie, regelmäßig umzuschalten. Diese werden nützlich sein, wenn Sie interaktive Websites für Menschen erstellen. Wenn jemand auf etwas klickt, wird es sichtbar? Wenn sie aus ihm rausklicken? Wird es nicht sichtbar wie ein Menüsystem, wie ein Drop-Down-Menü-System. Wenn Sie auf das kleine Symbol klicken, das vorschlägt, dass Sie ein Menü haben könnten, und es fällt nach unten. Vielleicht willst du umschalten. Es gibt also viele verschiedene Möglichkeiten, wie wir dies verwenden würden. Nein, ehrlich ein- und ausblenden wird nicht mehr zu oft verwendet. Nur weil es ein bisschen kitschig aussieht, aber, wissen Sie, vielleicht in ein paar Jahren, wo das ganze Internet, das ganze Internet, das Ein- und Ausblenden entscheidet ist eine Sache, die wir wieder tun wollten. Lassen Sie uns in der nächsten Lektion fortfahren und darüber sprechen, wie eine andere Form der Animation nach oben und unten rutschen. 27. Nach und nach: Okay, reden wir darüber, nach oben zu rutschen und nach unten zu rutschen. Echt einfach hier ist das eine Menge wie ein- und ausblenden. Also habe ich eine Schaltfläche hier ist als Klick-Ereignis registriert. Und ich möchte diese Box nach oben schieben und nach unten schieben. So wie eine FAQ-Frage, eine häufig gestellte Frage Abschnitt auf einer Website und FAQ. So können wir dieses Feld auswählen, wenn auf die Schaltfläche geklickt wird. Und wir könnten sagen, rutschen nach unten oder wir können sagen, rutschen nach oben. Also lasst uns zuerst, SlideUp, rutschen nach oben wird es verstecken. Aktualisieren. Es, gleitet es nach oben. Ziemlich ordentlich, oder? Wir könnten auch nach unten rutschen, was es einfach nach unten schieben und sichtbar machen wird. Oder wir können umschalten und das wird es umschalten, um nach oben zu rutschen und nach unten zu rutschen. Also lasst uns voran und erfrischen. Rauf, runter, rauf, runter. Das ist also eine kurze Lektion. Ehrlich gesagt, an dieser Stelle müssen Sie das wahrscheinlich nicht mehr üben. Halte das einfach in deiner Gesäßtasche versteckt. Schieben Sie umschalten. Sie können nach oben gleiten und Sie können nach unten rutschen. Sie werden dieses ein mehr als ein Fade in und verblassen sicher verwenden. Also, wenn Sie ein wenig Erfahrung wollen, ja, gehen Sie auf jeden Fall und erstellen Sie ein Beispiel wie dieses. Du kannst hier sogar mein Beispiel stehlen. Andernfalls lasse ich uns zur nächsten Lektion gehen, in der wir über Callback-Funktionen sprechen. 28. Callback-Funktionen: Okay, lassen Sie uns über Callback-Funktionen sprechen. In einer Callback-Funktion. Wirklich alles eine Callback-Funktion ist, ist eine Funktion eines kleinen Stückes Code, der ausgeführt werden sollte, nachdem etwas ausgeführt wurde. So haben wir zum Beispiel einen Selektor hier und wir sagten Registrieren Sie einen Klick Event Listener. Und jederzeit, wenn das ausgeführt werden soll, führen Sie diese Funktion aus, das ist eine Callback-Funktion. Also, wenn ein Klick passiert, tun Sie etwas. Wir können auch See wählen Sie unsere Box aus unserer vorherigen Lektion. Und wir könnten so etwas wie Fade Out sagen. Und wir könnten diesen Parameter geben, sagen wir, es wird 1,5 Sekunden dauern. Und dann könnten wir dem auch eine Funktion geben. Und das ist eine Callback-Funktion. Und so gaben wir ihm einen Parameter, wie lange es Komma-Funktion dauern sollte und dann nur eine reguläre Funktion hier. Und dann können wir Konsolenpunktprotokoll sagen. Fade-Out ist abgeschlossen. Gehen wir weiter und geben das eine Chance und gehen wir hier zu unserer Konsole. Es wird verblassen. Fade Out ist abgeschlossen. Und wir können das mit vielen verschiedenen Dingen tun, die wir tun könnten, verblassen und wir könnten nach oben rutschen. Als tödlich, ist es abgeschlossen. Dies sollte gesagt haben, dass Slide Out vollständig Taste ist, unabhängig davon, die Callback-Funktion funktioniert immer noch. Und so wirklich alles, was wir hier tun, ist, wenn wir dies ein wenig vereinfachen, wir sagen, wählen Sie die Box, schieben Sie nach oben, nehmen Sie 1,5 Sekunden, wenn Sie fertig sind dass Konsolenprotokoll ODE abgeschlossen ist oder SlideUp abgeschlossen ist. Wir können dies mit vielen verschiedenen Animationen tun. Also haben wir Rutsche, wir könnten verblassen. Wir könnten es auch mit Togas gebrauchen. Wenn Sie also umschalten, dauert das Fade 1,5 Sekunden, um ein- oder auszublenden. Und Fade-Effekt ist abgeschlossen. Und so lassen Sie uns voran und klicken Sie darauf. Oh, etwas ist hier nicht richtig. Es ist nicht umgeschaltet, verblassen, es ist Fade Toggle. Ich bekomme das jedes Mal rückwärts und hin und wieder. Und so war alles, was tat, automatisch verblassen, weil es bereits sichtbar war. Nun lasst uns dies in einen Ereignis-Listener einbinden. Wählen Sie diese Schaltfläche, Punkt auf Klick-Funktion. Aufgrund der aufgrund, und Sie sehen, dass sie ziemlich schnell hier geht es, es wird viel einfacher im Laufe der Zeit. Und Sie können sehen, dass dies ein Muster in jQuery ist, wir haben einen Selektor, tun eine Sache, einen Funktionsselektor, tun Sie etwas, machen Sie etwas direkt dort. Ein Funktions-Selektor, tun Sie eine Sache, eine Funktion. Und lasst uns das loswerden. 1500 Millisekunden oder 1,52, einblenden, ausblenden. Und lassen Sie uns einfach einen Schuss geben, um darauf zu klicken. Verblasst aus. Fade-Effekt ist abgeschlossen. Sie können es direkt da unten sehen. Perfekt. Sieh dir das an. Das funktioniert genau so, wie wir wollen, dass es funktioniert. Jetzt ist eine Callback-Funktion wirklich nützlich, wenn etwas ausgeblendet ist, vielleicht möchten Sie es dann entfernen. Also lasst uns das tun, lasst uns ausblenden. Und wir können diesen Punkt entfernen. Und so, sobald das ausgeblendet ist, denn jetzt können Sie sehen, dass, wenn wir darauf klicken, es verblassen wird. Es ist immer noch in unserem DOM. Vielleicht wollen wir, dass es aus irgendeinem Grund komplett entfernt wird. Wir könnten hier klicken. Und Sie bemerken, dass es sich tatsächlich vollständig aus dem Dokumentobjektmodell entfernt. Sehen Sie sich das hier unten an. Achten Sie darauf, dass es verschwindet, es wird vollständig entfernt. Und jetzt können wir das nicht anklicken, wenn es nutzlos gemacht wird. Wenn Sie also ein einmaliges Ereignis benötigen, ist das ein guter Weg, dies zu tun. Jetzt müssen Sie eigentlich nichts mit Callback-Funktionen üben. Wir haben die ganze Zeit Callback-Funktionen geschrieben. So wenig Überraschung, die Callback-Funktionen sind, sind Sie zu diesem Zeitpunkt ziemlich ein Großmeister Wizard bei Callback-Funktionen. Lassen Sie uns in der nächsten Lektion über das Hinzufügen unserer eigenen Animationen sprechen. 29. jQuery Animationen: Okay, lass uns über Animationen reden. In jQuery. Wir können bestimmte Dinge animieren und wir können bestimmte Dinge nicht animieren. Alles, was einen Zahlenwert hat, können wir animieren. So ist eine Breite von 500 und zum Beispiel, ein Zahlenwert. Und wir können die Insassen auf vierhundertdreihundertundzehnhundert hinzufügen , wenn wir wollten. Eine Farbe ist nicht unbedingt eine nummerierte ist eine Mischung aus Zahlen und Buchstaben. Es ist wie Schwarz 000000 oder F, F, F, F, F, F, F, und das ist weiß. Wir könnten einen cremefarbenen F5, F5, F5 machen. Und ein Computer weiß einfach nicht wirklich, wissen Sie, nativ, wie man das nach F, F, F, F, F, F, F oder runter zu 000000 scrollt . Aber wenn Sie eine Breite von 500 haben, na ja, das ist einfach dekrementieren die Sie können es von 500 auf 400 ändern, indem Sie zu 499 gehen, dann 498487 für 9645, et cetera, et cetera, et cetera, et cetera. Es gibt eine lineare Reihenfolge der Operationen hier. Also lassen Sie uns voran gehen und unsere Box animieren. Also, wenn wir auf diese Schaltfläche klicken, haben wir eine Schaltfläche hier oben, die sagt Klicken Sie mich, registriert, klicken Sie auf Ereignis. Wählen wir dieses Feld aus und animieren es. So könnten wir so etwas wie Dot Box animieren. Und das wird ein Objekt nehmen. Und so hier können wir sagen, dass die Deckkraft derzeit ist es eine, die wir ändern könnten, dass zu Lake 0,5 ist . Die Breite ist derzeit auf 100 Pixel eingestellt. Und nur weil es Pixel sagt, bedeutet das nicht, dass es nicht weiß wie man mit einer Zahl arbeitet und weiß, wie man das teilt und sagt, okay, die Breite ist derzeit eine 100, und es sind auch Pixel. Also lasst uns das auf fünfhundert, fünfhundert Pixel ändern , weil wir die Messung dort drin brauchen. Gehen wir weiter und erfrischen wir uns. Und es animiert schön. Es ist schön und glatt und funktioniert perfekt für uns. Und wenn wir es wollten, könnten wir das auch verlangsamen. Wir könnten sagen, animieren Sie dies über vier Sekunden oder 4 Tausend Millisekunden. Und es braucht seine Zeit, genau so. Nun, was nicht funktionieren wird, ist, wenn wir diese Hintergrundfarbe, Hintergrundfarbe ändern wollten . Wenn wir meine Hintergrundfarbe in Blau ändern wollten, weiß es einfach nicht, wie man von schwarz zu blau Link geht. Was ist die Definition oder was ist die Funktion oder was ist die lineare Logik hinter dem Ändern einer Farbe in eine andere Farbe? So dass es animiert aussieht. Wie geht es von schwarz über rot zu blau oder von schwarz zu lila zu blau oder von schwarz nach weiß zu blau. Als ob ein Computer das einfach nicht weiß. Aber ein Computer weiß ganz einfach, wie man mit harten Zahlen arbeitet. Wir werden also sehen, dass das Ändern der Hintergrundfarbe hier auf Blau einfach nicht funktionieren wird. Es wird verblassen. Es wird ein Grau sein. Aber das ist absolut nicht blau. Ihre Aufgabe für diese Lektion besteht darin, ein Element auszuwählen und es zu animieren. können wir loswerden. Sie können ihm ein Objekt mit dem geben, was Sie in Eds Wert ändern möchten. Also Breite, Höhe, Kapazität, so etwas wie das. Sogar Ihre Schriftgröße, wenn Sie wollten. Und dann geben Sie ihm eine Art Dauer. Wie lange sollte das dauern? Für mich? Ich sagte, es sollte vier Sekunden für dich dauern. Vielleicht wollten Sie 1 Sekunde oder 20 Sekunden nehmen, oder vielleicht möchten Sie, dass es sich ändert, um vollständig durchsichtig zu sein. Mit der Zeit bekommt man eine 100% und das sollte fünf Sekunden dauern, wird Ihnen so etwas geben, das ist eine jener Zeiten, in denen es gut ist, etwas Spaß zu haben, nur um mit ihm herumzubasteln. Und weißt du, du musst nichts Besonderes tun. Sie müssen nur sicherstellen, dass etwas mit einem numerischen Wert geändert wird. Und wieder, wir verwenden CSS hier. Javascript, CSS und HTML funktionieren alle sehr gut zusammen. Sie sind alle so konzipiert, dass sie miteinander arbeiten. Und denken Sie auch daran, dass Sie nur mit tatsächlichen harten Zahlen arbeiten können. 100% ist eine Zahl, blau ist keine Zahl. Gehen Sie voran und haben Sie etwas Spaß damit in den nächsten paar Lektionen, lassen Sie uns über Breitenmaße und Höhendimensionen sprechen. 30. Breitendimensionen: Lassen Sie uns über Höhendimensionen sprechen. Also haben wir diese Sache, die ein Document Object Model genannt wird. Und wenn wir mit der rechten Maustaste auf diese Box klicken und sie hier auswählen, kommen wir runter. Wir können sehen, dass wir Marge, Randauffüllung und die tatsächliche Größe des Elements selbst haben. Wir können überprüfen, um zu sehen, was diese Dimensionierung ist. Also können wir diese Box auswählen. Lassen Sie uns const Boxen gleich Punkt-Box tun. Und dann könnten wir Box Dot machen. Wir hatten ein paar verschiedene Dinge. Wir hatten äußere Breite und Breite. Wenn wir also einen Blick auf die Breite hier werfen, was eigentlich eine Funktion ist. Also, wenn Sie dieses kleine lockige f hier sehen, bedeutet das normalerweise, dass es eine Funktion ist. Das bedeutet in der Regel, dass Sie einfach Ihre Klammern vergessen haben. Meine Box-Breite beträgt also derzeit 100. Und lasst uns sehen, ob ich das rauskriegen kann. Da gehen wir. Wir können auch die Box machen. Höhe ist auch ein 100. Wir können die Kiste machen. Die äußere Breite ist ein 100. Wir können auch tun, die Box innere Breite ist ein 100. Und wir werden sehen, dass alle drei Dinge gleich sind, aber sie sind tatsächlich anders. Und das hängt vom Box-Modell ab. Und wenn wir hierher zurückgehen und was ich tun will, ist etwas Polsterung hinzuzufügen. A 100 Pixel. Nein, lass uns keine 100 machen. Das ist eine Menge. Lasst uns 20 machen. Und lassen Sie uns auch einen Rand von 20 Pixeln machen. Und wir werden sehen, dass dies das Element anstößt und das Element tatsächlich etwas größer aussehen lässt. Also, wenn ich jetzt wieder nach oben gehe, wähle meine Box, und ich könnte Box Punktbreite tun. Es ist jetzt eine 100. Das ist das Innere. Das Innere ist eine 100. Und wir werden sehen, ob wir zu Elementen gehen, die hier drin 100 sind. Jetzt lasst uns Box Dot machen, innere Breite. Es sind 140. Nun, woher kriegen wir 1 Viertel? Wenn wir zu Elementen zurückkehren, können wir sehen, dass es hier eine Polsterung gibt. Dies ist die gesamte Box selbst, die innere Breite der Box. Also haben wir eine 100 und dann haben wir 20 auf beiden Seiten. So 100101140. dort haben wir eine 140 bekommen. Jetzt können wir auch die äußere Breite tun, Box Punkt Geruchsbreite. Jetzt schauen wir uns hier die äußere Breite an. Und dann hat die äußere Breite hier zwei Möglichkeiten. Also haben wir regelmäßige äußere Breite, Geruchsbreite, und das ist das Äußere hier. Oder wir können äußere Breite tun, wahr. Und was das tun wird, ist, alles zu nehmen, einschließlich der Marge. Also hatten wir hunderteinundzwanzig einundvierzig einundsechzig, eins achtzig, und das ist, wo wir eine 180 bekommen. Nun möchte ich, dass Sie für diese spezielle Lektion tun , ist, dass Sie sich keine Sorgen um die Breite, innere Breite oder äußere Breite machen. Was ich will, dass du das Gleiche mit der Höhe machst. Also greifen Sie Ihr Box-Element und dann machen Sie innere Höhe, oder einfach Höhe oder äußere Höhe, und versuchen Sie es mit true darin. Geben Sie dem einen Schuss. Und versuchen Sie es mit verschiedenen Größen. Machen Sie Ihre Schachtel von unterschiedlicher Größe. Es muss auch kein perfektes Quadrat sein. Und dann möchte ich, dass Sie Ihr gesamtes Fenster auswählen, das ist Ihr gesamtes Ansichtsfenster, und dann Breite und Höhe tun. Nun, genau wie ein Kopf nach oben, ist meine Höhe sehr niedrig, nur weil ich hier super gezoomt bin. Wenn ich nicht vergrößert würde, wäre dies deutlich höher als 289. Geh weiter und gib dem eine Chance. Diese sind wichtig, wenn Sie mit der Positionierung von Dingen auf Ihrer Seite mit JavaScript arbeiten . Sie werden also wissen müssen, wie diese funktionieren, wenn Sie das erledigt Lassen Sie uns zur nächsten Lektion gehen, in der wir über einen neuen Ereignis-Listener sprechen , wo er prüft, ob wir unsere Seite überhaupt ändern. 31. window: Lassen Sie uns über die Größe des Fensters sprechen. Zu diesem Zeitpunkt hatten wir immer eine Art Selektor in einer Reihe von Zitaten wie unserer Box. Wir können aber auch einen Selektor festlegen, um Ihr Fenster oder Ihr Dokument zu sein. Und dazu möchten wir sehen, dass sich das Ansichtsfenster ändert. Nun, das Ansichtsfenster ist dieser ganze weiße Bereich. Wie groß ist das genau? Und wir haben uns das in der letzten Lektion angesehen als wir Box Dot Elder mit Box Punkt, innere Breite und Fensterhöhe, Fensterpunkt mit solchen Dingen gemacht innere Breite und Fensterhöhe, haben. Was passiert, wenn wir die Größe unserer Seite ändern? Nun, wir können verschiedene Aktionen basierend auf verschiedenen Fenstergrößen durchführen. Also lassen Sie uns voran und tun Fenster Punkt auf, Größe ändern Funktion, console.log. Und dann wollen wir console.log die Fensterbreite. Und deshalb habe ich dich dazu gebracht, das in der letzten Lektion zu tun. Fensterpunktbreite durch Fensterpunkthöhe. Und so lassen Sie uns unsere Tools hier öffnen und das ist Redox dies und aktualisieren Sie die Seite. Und jedes Mal, wenn ich das bewege, können Sie sehen, dass sich diese Zahlen ändern. Und die Höhe ändert sich nicht, aber die Breite ändert sich, die Breite wird immer kleiner und kleiner. Und so nein, wir können etwas tun, das darauf basiert. Wir können sagen, wenn die Seitenbreite kleiner ist als, sagen wir, 230 hat die Hintergrundfarbe in Schwarz geändert. Nun, dies ist kein sehr hässliches Beispiel, aber das ist ein gutes Praxisbeispiel. Also lasst uns das loswerden. Und wir können sagen, ob die Fensterbreite kleiner oder gleich 230 ist. Wir wissen jetzt, dass wir die Körperpunkt-CSS-Hintergrundfarbe ändern können , um schwarz oder anderweitig zu sein, können wir dasselbe tun und die Hintergrundfarbe in Weiß ändern. Okay, also wird das eher schwarz oder weiß bleiben, zu zweihundertdreißig führt. Zwei dreißig. Da gehen wir hin. Und es wird einfach so umschalten. Jetzt können wir das Gleiche auch basierend auf der Höhe tun. Und ich werde nur das Konsolenprotokoll wieder hier einlegen, wo wir die Breite und die Höhe protokollieren werden. Und ich werde ändern, wo das angedockt ist, hier nach unten wechseln und die Seite aktualisieren. Aktualisieren. Und jetzt, wenn ich die Größe ändere, werden wir sehen, dass sich die Breite nicht ändert, aber die Höhe ändert sich. Und wir könnten eine Art von Aktion ergreifen, wenn jemand die Seite zum Beispiel auf den 87 Pixel hoch ist , etwas anderes tun, Sie könnten ihnen eine Warnung geben. Sie könnten, Sie könnten buchstäblich alles aus Ihrem Document Object Model löschen und einfach sagen, hey, Ihr Browser ist ein Weg zu klein für diese Website. Tatsächlich ist Ihr Browser, wenn er 87 Pixel hoch ist, viel zu klein für jede Website. Und das ist, wie wir die Größe des Fensters ändern. Jetzt ist es zu diesem Zeitpunkt nicht wirklich super nützlich. Und ich habe das seit einigen Jahren nicht mehr benutzt. Aber es ist gut zu wissen, weil ich manchmal auf alten Code stoße, der dies tut, und dann wandle ich es einfach in die CSS-Medienabfrage um, um es reaktionsschnell zu machen. Und das ist eine Art, wo CSS beginnt, für JavaScript zu übernehmen. Aber manchmal muss man das auch in JavaScript wissen. Vor allem, wenn du ein Spiel irgendeiner Art erschaffen wirst. Wenn Sie ein Spiel erstellen möchten, werden Sie wissen wollen, was die Dimensionen des Spiels sind, das Ansichtsfenster, dieses Spielportal hier, dieser ganze weiße Abschnitt, Sie werden wissen wollen, was diese Größe ist und arbeiten mit ihm. 32. jQuery jede Loops: Alles klar, willkommen zurück. Lassen Sie uns über das Durchschleifen von Elementen sprechen. Und wenn wir einen Selektor irgendeiner Art, eine Art von Element haben , könnte dies ein Element sein oder dies könnte mehrere Elemente sein. Und ein gutes Beispiel dafür ist, wenn wir wie eine ungeordnete Liste mit einem Verbündeten hier drin haben, erster Gegenstand, das zweite Element, das dritte Element. Und wir wählen alle diese Verbündeten aus. Was, wenn wir mit all diesen Verbündeten etwas anderes machen wollten? Aber wir wollen immer noch alle von ihnen auswählen. Wir möchten jedes dieser drei Listenelemente auswählen. Nun, wenn wir LI-Punkttext gemacht haben, wird dies es auf allen drei von ihnen ändern. Und sicher genug, das tat es. Das ist nicht das, wonach wir suchen. Vielleicht wollen wir für jeden von ihnen etwas anderes tun, aber wir wollen einen Selektor verwenden. Also könnten wir entweder LI machen und das erste packen. Wir können einen Selektor wie diesen machen. Wir tun zuerst, wir könnten zuletzt machen, oder wir können alle diese durchlaufen und etwas anderes basierend auf einem Selektor tun. Und manchmal ist das Durchschleifen der richtige Weg, um Dinge zu tun. Es ist nur ein schnellerer Weg, Dinge zu tun. So können wir sagen, Punkt jeder. Und das wird einen Funktionsindex nehmen. Und das Element. Und dieses Element selbst wird dieses ganze Element hier sein. Und dieser Index wird sein, ist es die erste Iteration, zweite Iteration, dritte Iteration. So können wir jetzt das Element selbst speichern, was ähnlich ist, wie dies zu sagen, was wir zuvor verwendet haben. Aber das bezieht sich nur auf dieses bestimmte Element in dieser Schleife. Punkttext wird Index neues Element hier sein. Und wenn ich die Seite aktualisiere, können Sie sehen, dass 0 neues Element hier steht, ein neues Element hier zu einem neuen Element hier. Nun, wenn Sie etwas neu in JavaScript sind und Sie mögen, warum heißt es 0? Es liegt daran, dass Computer technisch anfangen, bei 0 statt der Nummer eins zu zählen. Wir könnten immer Index plus eins tun, nur um das zu kompensieren. Sie sind Rio, neuer Artikel hier, neuer Artikel hier, neuer Artikel hier, 1-2-3. Wenn wir uns unsere Quelle ansehen, es nur das alte Zeug, das wir hatten. Es ist nicht das neue Zeug. Jetzt können wir etwas sagen, wie wenn der Index gleich zwei ist, wählen Sie dieses Element. Ändern Sie bei CSS, um eine Hintergrundfarbe von Schwarz zu haben. Und dann können wir diese miteinander verketten. Und das haben wir schon mal gemacht. Ich ändere die Farbe, um weiß zu sein, so wird nur die Farben invertieren. Und es ist wie dieser hier. Denk dran 012. Jetzt haben wir auch nicht mit Lügen zu tun. Wir können es mit dibs tun und lasst uns voran gehen und diese beiden divs ändern wird jedes div auf der Seite greifen wird, um sie zu durchlaufen. Sagt das erste Element, das zweite Element, das dritte Element, da ist etwas schief gelaufen. Oh, weil ich meinen Selektor nicht gewechselt habe. Da gehen wir. Ein neuer Artikel hier zum neuen Artikel, drei neue Artikel hier. Wir könnten sogar schicker damit werden und wir konnten seinen ursprünglichen Text behalten. So können wir sagen, etwas wie Kahns Originaltext ist gleich diesem Element 2.txt. Und wir werfen das hier als variablen, originalen Text rein. Und jetzt haben wir nicht den ersten Artikel, den zweiten Artikel, den dritten Artikel mit einer dynamischen Zahl nummeriert . Wenn wir das wollten, könnten wir damit alles lächerliche machen. Wir können dies mit 303 multiplizieren. Da gehen wir. Also bekommen wir 036. Wir könnten alles tun, was wir wollen. Das funktioniert nur mit dem Index, dem Element selbst. Sie können alles mit diesem Element tun und es ist nur eine regelmäßige Selektoren. Also denken Sie daran, wenn Sie Punkt h verwenden, Es dauert zwei Elemente sind keine Elemente, sondern Parameter. Ihr erster wird der Index sein, wo in der Schleifeniteration ist, ist es die erste Iteration, zweite Iteration, dritte Iteration, et cetera, et cetera. Und der zweite Parameter ist Ihr Element. Und dein Element. Sie können dann den Selektor verwenden, was ähnlich ist, wie dies zu sagen, aber wir sind nicht wirklich innerhalb der Funktion. Wir wollen nicht, dass das Teil der Funktion ist. Wir wollen das Element selbst. Also wählen wir dieses Element aus und dann können wir damit arbeiten. Und es wird es für jedes einzelne div tun, das es in die Hände bekommen kann, oder jedes LI oder jeden Klassenwähler, alles. Ich möchte, dass du hier machst, ist, dass du das hier machst. Ich möchte, dass Sie ein Element auswählen, das nicht mehrere Elemente auf der Seite enthält. Dopunktieren Sie jedes Funktionsindexelement. Und dann möchte ich, dass Sie entweder den Text ändern oder mit dem Index arbeiten oder mindestens dieses Element auswählen und etwas CSS ändern, damit Sie wissen, dass es funktioniert. 33. Attribute ändern: Lassen Sie uns über das Ändern von Elementattributen sprechen. Und ich habe hier ein wirklich gutes Beispiel aufgereiht. Nehmen wir an, wir haben ein Eingabeelement und wir möchten dies von Text zu Passwort ändern. Und so ist die Idee hier, dass wir so etwas schreiben können, aber was, wenn wir wollten, dass es tatsächlich mehr so aussieht, wie Passwort, Passwort, Passwort und so. können wir ganz einfach machen. Gehen wir also voran und wählen Sie diese Eingabe aus. Lasst uns Const machen. Die Eingabe ist gleich und dann ist nur die Eingabe die einzige auf der Seite. Also muss ich mir keine Sorgen machen, damit spezifisch zu werden. Und mit dem Selektor. Dann kann ich sagen, der Eingabepunkt ATTR, das steht für Attribut ATTR. Sie keinen Texttyp ein. Und so lassen Sie uns Konsolenprotokoll dieser Konsolenpunktprotokoll diesen Typ. Und das sollte sagen, wenn wir es richtig machen Text. Und lasst uns das ansprechen. Da ist es. Textfehler, wenn wir 123123123. Ja, das Gleiche. Kuckuck, Kuckuck, cool, cool. Aber was, wenn wir es ändern wollten? Das ist also viel wie Val oder Text oder HTML. Und was ich hier sage, ist dot val, dot text, dot html. Es macht eines von zwei Dingen. Entweder geben Sie ihm einen Parameter oder Sie haben einen Parameter festgelegt. Und so sagen wir einfach das Typattribut erhalten. Das ist unser Parameter. Es ist nur den Typ hier zu bekommen, der dem entspricht. Nun, wenn wir das ändern wollten, könnten wir sagen, ATTR-Typ und dann ändern Sie es in Passwort. Und das wird so schnell passieren und sieht so aus, als würde es hinter den Kulissen passieren. Aber wenn ich so tippe, nachdem ich die Seite aktualisiert habe, wird es wie ein Passwortfeld wie dieses aussehen. Nun, was irgendwie cool ist, wenn Sie mein Passwort sehen möchten, kann ich einfach den Eingabepunkt ATTR-Typ auswählen, und lassen Sie uns es von einem Passwortfeld in ein Textfeld ändern. Und Sie können sehen, mein Passwort ist jetzt im Klartext, mein Passwort ist auch. So erhalten wir ein Attribut und so legen wir ein Attribut fest. Und nur als eine kurze kleine Erinnerung, um ein Attribut zu erhalten, braucht nur einen Parameter genau so. Und wenn es einen zweiten Parameter hat, wird versuchen, dieses Attribut zu setzen. In der nächsten Lektion gehen wir weiter und beginnen mit einigen Ajax-Zeug zu arbeiten. Ajax macht wirklich, wirklich Spaß. Es funktioniert mit APIs. Wir kommen hier in ein gutes JavaScript, einige echte lustige Sachen, mehr Produktionsniveau, professionellere Art von JavaScript, das Sie mit jQuery schreiben werden. 34. Ajax GET Anfragen: Okay, schauen wir uns Ajax an und einige Daten mit einem kleinen Rückruf. Jetzt brauchen wir einen Ort, von dem Daten abgerufen werden können. Und einer meiner persönlichen Favoriten ist sumpfigen Dot Dev ist als Star Wars API. Und wenn Sie gehen, um e dot dev slash api Slash Menschen Slash eins zu tauschen, werden Sie diese Informationen über Luke Skywalker sehen. Und so können wir tatsächlich dorthin gehen tauschen dot.gov Schrägstrich API Menschen Schrägstrich eins. Und wir sehen all diese Informationen. Aber Luke Skywalker, jetzt ist das die URL. Wir wollen, dass dies ein API-Endpunkt ist. Wir möchten in der Lage sein, diese Informationen, diese JSON-Informationen zu erhalten und ganz einfach darauf zuzugreifen. Also, was wir hier tun können, ist, wenn ich das einfach nach oben schiebe und eigentlich nein, lass uns das losdocken ist, dass wir Zugang zu jQuery hier mit einem Dollarzeichen haben. Sie können sehen, dass wir dot get und dann diese URL verwenden können. Nun, wenn wir genau das tun, werden wir sehen, dass es nur eine normale Ajax-Anfrage ist. Aber wenn ich das lösche und ihm eine Callback-Funktion gebe, wissen wir über Callbacks, wir kennen Funktionen. Lassen Sie uns Konsolenpunktprotokoll die Daten tun. Und wir werden sehen, dass das hier die Ajax-Anfrage ist, und das sind unsere Daten. Und so machen wir hier eine Get Anfrage. Wir fragen einfach nach Daten. Und so, indem Sie Dollarzeichen dot get verwenden, gibt es hier keinen Selektor, weil wir nichts auswählen. Und weil es keinen Selektor gibt, haben wir keinen Sektor, es ist nur Dollarzeichen Punkt bekommen. Und so haben wir jetzt all diese Informationen auf unserer Seite oder in unserer Konsole zumindest geladen , die hier verfügbar war, genannt Luke Skywalker Höhe 172 Masse 77. 172, Messe 77, Name Luke Skywalker. Es sind alle die gleichen Informationen. Und so machen wir eine einfache Ajax-Anfrage in jQuery. Wissen Wald wild darüber ist das ist so unglaublich einfach. Wir können Dot bekommen. Und ich habe gerade diese URL eingefügt, die Daten. Und dann können wir Dot Log Datenname Konsole. Das war es, wonach wir suchen, richtiger Name. Also lasst uns voran gehen und das speichern. Und lasst uns einfach diese Seite aktualisieren. Und es geht und bekommt es. Da steht Luke Skywalker, wir könnten seine Größe bekommen. Wir könnten sein Gewicht bekommen, wenn wir es wollten. Luke Skywalker 172. Warte, war nicht da drin. Es nennt sich Masse. Deswegen ist seine Messe 77. Und jetzt müssen wir uns keine Sorgen machen, wie ein Abruf API-Anfragen. Wir müssen uns keine Sorgen darüber machen, dass wir diese Daten aufnehmen und den JSON im Grunde analysieren und in ein JSON- oder JavaScript-Objekt verwandeln. Wir müssen uns um nichts davon kümmern, weil jQuery all das hinter den Kulissen tut und es mit einer einzigen Codezeile mit der Punkt-Get-Funktion tut, die Sie dies für Ihr endgültiges Projekt wissen müssen. Also empfehle ich, dass Sie dies eine Chance geben, um es auszuprobieren. 35. Ajax POST-Anfragen: Alles klar, in der letzten Lektion haben wir uns eine jQuery GET-Anfrage angesehen. Und in dieser Lektion werden wir uns eine jQuery-Post-Anfrage ansehen. Und so senden wir Daten an einen Server und bitten ihn, Daten zu aktualisieren oder neue Daten zu erstellen. Und das ist wirklich, wirklich einfach zu, es ist nur Punkt-Post und dann einige URL hier drin, einige Daten hier drin und eine Callback-Funktion mit den Daten, die zurückgegeben werden. Das ist buchstäblich alles, was es ist. Ihre Daten sollten also ein Objekt irgendeiner Art sein. Also bekommen wir sagen, Hallo Welt. Und diese URL, an die wir irgendwo posten müssen. Und es ist wirklich, wirklich schwer, einen Ort zu finden, um sicher zu posten, aber ich habe einen namens HTTP bin gefunden. Also tun wir dies als URL, HTTPS Doppelpunkt Schrägstrich HTTP bin.org Schrägstrich Post. Und wenn wir wollen, können wir diese auf separate Linien setzen , nur um das ein wenig schöner aussehen zu lassen. Und dann können wir sagen, console.log Post war komplett mit diesen Daten. Console.log Datenpost wurde mit diesen Daten abgeschlossen. Und schauen wir uns mal an. Das sind all die Daten, die wir zurückbekommen haben. Ein HTTP, HTTP bin.org neigt dazu, uns alle unsere Daten in Form von Eigentum hier zurück zu geben. Es steht also hallo Welt, wir können aber alles hineinlegen. Wir werden sagen, Instagram ist gleich bei Codierung Punkt für Punkt alle. Was, wenn Sie kostenlose Codierungs-Tipps und Tricks auf jeden Fall kommen, schauen Sie sich das an. Und forme Instagram-Codierung für alle. Und so wissen wir, dass das tatsächlich funktioniert. Nun, wenn wir sicherstellen wollen, dass es nicht funktioniert, könnten wir immer versuchen, es zu bekommen. Wir werden Punkt bekommen und werden es tun, wird eine get Anfrage an den Schrägstrich Post URL erstellen. Und Sie können vier oder fünf sehen, das bedeutet nicht erlaubt. darfst du nicht tun. Es muss eine Post-Anfrage sein. Also geh weiter und gib dem eine Chance. Verwenden Sie HTTP bin.org. Vergessen Sie nicht, dass Sie HTTPS benötigen. Sie können auf diesen Fehler stoßen, wenn er von einem unsicheren Speicherort an einen sicheren Ort kommt . Stellen Sie einfach sicher, dass Sie das S und dort haben. Dies wird Ihre Nutzlast genannt. Dies sind die Daten, die Sie ihnen senden werden. Und dann hast du eine Callback-Funktion, wenn es fertig ist, was machst du mit diesen Daten? Alles, was wir hier tun, ist, dass wir console.log Daten machen. Dies ist jetzt wirklich nützlich, wenn Sie eine einzelne Seite Anwendung oder progressiven Web-App erstellen , in der Sie jemanden zum Registrieren oder Anmelden benötigen und Sie sie nicht auf eine andere Seite bringen möchten, oder Sie haben einen API-Endpunkt oder sie müssen sich über eine andere Website einloggen, so etwas. Sie können diese Daten woanders zur Verarbeitung senden. Und diese Daten können normalerweise in Form von JSON zurückkommen. Und dann kann jQuery sehr anmutig damit umgehen. Lassen Sie uns in der nächsten Lektion einen zufälligen Star Wars-Charaktergenerator erstellen , der auf so ziemlich allem basiert , was wir in diesem Kurs getan haben. 36. Abschlussprojekt: Okay, willkommen zu deinem endgültigen Projekt. Wir werden einen zufälligen Star Wars-Charakter erstellen, einen Generator mit jQuery und JavaScript. Also, was ich möchte, dass Sie hier zu dieser URL gehen, ich werde vergrößern, damit Sie dies sehen können. Und wir müssen hier zu dieser URL gehen. Und wir können alle möglichen Sachen sehen, die wir nicht wollen, alles, was wir wollen, eine ID. Also lasst uns zu ID gehen. Und wir können gehen, zum Beispiel, Slash Star Wars API Schrägstrich API Schrägstrich ID ein Punkt JSON. Und wir bekommen Luke Skywalker, und wir bekommen auch ein Bild und ein Wiki und allerlei andere Sachen da drin. Wir könnten zum Charakter gehen. Ich glaube, hier sind nur 83. Ja. Dieser hat nicht so viele Informationen, aber zumindest hat er einen Namen und ein Bild, das ist wirklich alles, was wir an dieser Stelle wollen. Gehen wir zu 84. Es gibt eine, es gibt eine Menge neuer Informationen hier drin, denke ich. Aber es gibt keine 100 Zeichen, es gibt nicht 100. Und mal sehen, ob es 90. Mal sehen, ob es siebenundachtzig, achtundachtzig, neunundachtzig sind. Das ist wichtig, dass wir das tun. Ok, es gibt 88 Zeichen, also müssen wir zufällig eine Zahl zwischen 088 erhalten und zu dieser URL gehen und 88 durch eine Zufallszahl ersetzen. Und dann auf unserer Seite möchte ich, dass Sie in der Lage sein, den Namen der Person und ihr Bild zu zeigen . Und so müssen wir mit einem inneren Text arbeiten. Wir müssen mit dem Ändern eines Attributs arbeiten. Wir müssen mit einer get-Anfrage und einigen Zufallszahlen arbeiten. Nun, ich möchte, dass Sie, wenn Sie können, wenn Sie genug wissen, JavaScript versucht hat, all dies zu diesem Zeitpunkt selbst zu tun , ohne mir zuzusehen, wie ich meine Lösung mache. Nun, wenn Sie wirklich, wirklich stecken, vor allem, auf jeden Fall gehen und googeln, die Hälfte der Web-Entwicklung ist Google-Zeug . Aber wenn Sie auf Google stecken bleiben und Sie nicht wissen, wohin Sie gehen sollen, können Sie immer zu dem Lernen kommen, um Facebook-Gruppe zu programmieren oder einfach dieses Video fortsetzen, sobald ich verblasst und zu schwarz verblassen. Und dann kannst du mir zuschauen, wie ich meine Lösung mache. Also ich möchte, dass du uns eine Chance gibst, dass es aussehen kann wie alles, was du willst. Übrigens, das liegt ganz bei Ihnen. Lass es fantastisch aussehen. Wenn du willst, lass es schrecklich aussehen. Wenn Sie wollen, liegt das zu 100% bei Ihnen. Geh weiter und erstelle einen zufälligen Star Wars-Charaktergenerator basierend auf den sehr kleinen Informationen, die ich dir gegeben habe. Und ich habe Ihnen hier absichtlich sehr wenig Informationen gegeben , denn das wird sehr gute Praxis sein. Als professioneller Webentwickler. Die Leute werden dir sehr wenig Informationen geben und du wirst irgendwie damit arbeiten müssen. Also werde ich ausblenden und dann werde ich einblenden und du kannst meine Lösung später ansehen. also sicher, dass Sie pausieren, wenn der Bildschirm schwarz wird. Okay, lass uns weitermachen und einen zufälligen Star Wars Charaktergenerator erstellen. Das erste, was ich hier mache, ist, dass ich meine API-Endpunkte betrachte und sie durchlese. Und das ist sehr wichtig, um es zu lesen. Nimm nicht einfach jemand anderes, wie mein Wort von vorhin. Lesen Sie es tatsächlich durch, wenn Sie können. Wir haben also eine Basis-URL oder eine zwischengespeicherte CDN-URL. Lassen Sie uns voran und verwenden Sie diesen Cache CDN URL. Und wir haben zwei Routen. So können wir diesen URL Schrägstrich, alle Punkt JSON oder Schrägstrich ID verwenden. Also gehen wir weiter und machen Schrägstrich. Eins. Wird das für mich funktionieren? Nein, das wird für mich nicht funktionieren. Es muss ein ab.js IN Problem für wahrscheinlich Schrägstrich sein, richtig? Nein, das wird auch nicht funktionieren. Das hat also nicht funktioniert. Also lesen wir das durch und wir sehen, dass dies ID sagt, aber es sollte eigentlich id und dann den Zahlenpunkt JSON sagen. Und so könnte die Dokumentation hier etwas besser sein, aber wir sehen hier ein Beispiel dafür. Also lassen Sie uns voran und setzen Sie diese URL hier ein und tun Schrägstrich ID, Schrägstrich 1 Punkt JSON. Und wir haben Luke Skywalker. Wie viele Charaktere gibt es? Was ist unsere maximale Anzahl oder maximale Zahl wird 89 sein. Nein, das wird nicht richtig sein. Es wird Schrägstrich ID Schrägstrich 88 Punkt JSON sein. Da gehen wir, Captain Plasmas, die letzte Figur, die wir haben, also haben wir die Zahlen eins bis acht, mit denen wir arbeiten können. Also gehen wir zu unserem Code hier und lassen Sie uns eine Schaltfläche erstellen. Und es sagt, Charakter generieren. Und wir müssen, wenn diese Schaltfläche geklickt wird, Punkt auf Klick, tun eine Sache Funktion. Also, das ist nur die Registrierung eines regelmäßigen Klick-Events. Jetzt müssen wir eine Art von GET-Anfragen tun. Wir können Dot bekommen und dann diese URL. Und so habe ich diese URL hier drin, und ich werde das nur eine Berührung kleiner als nur 88 Punkt JSON machen, was auch immer das gerade zurückgegeben wird, das ist in Ordnung. können wir später ändern. Und dann wollen wir diese Daten und console.log die Daten bekommen. Wir möchten sicherstellen, dass dies für uns in unserem Browser funktioniert. Also gehen wir zurück zu unserem Browser und aktualisieren Sie unsere Seite, generieren Charakter. Und es tat, es hat Captain faszinierenden Gott, unsere Informationen hier drin, das ist perfekt. Aber jetzt müssen wir es randomisieren, denn wenn wir es nochmals anklicken, wird es einfach weiter ein Plasma bekommen. Also lasst uns voran gehen und diese Zahl zufällig bestimmen. Wir wissen, dass wir eine Zufallszahl erstellen müssen, und das ist nicht jQuery, das ist nur JavaScript. So können wir konstant tun. Zufallszahl ist gleich dem mathematischen Punkt zufällig. Und das wird uns eine Zahl zwischen 01 mal 88 geben, und das wird uns eine Zahl zwischen 188 geben. Und dann wollen wir mathematische Punktversiegelung machen. Und was zufällig tun wird, ist, dass es uns tatsächlich eine seltsame Zahl geben wird. Es wird 0, 1-2-3, 4-5-6 sein. Das wird ein paar Dezimalstellen haben und das wollen wir nicht. Was wir stattdessen wollen, ist, was auch immer diese Zahl mit 88 multipliziert wird und dann auf die nächste höchste Zahl stoßen wird. Wenn es also 74.1 ist, wird es jetzt 75. Und lassen Sie uns fortfahren und dies in ein Template-Literal ändern. Dies ist nur normales, einfaches altes JavaScript an dieser Stelle. Und wir werden die Zufallszahl hier reinlegen. Lassen Sie uns fortfahren und speichern Sie das und aktualisieren Sie unsere Seite. Generieren Sie ein Zeichen 0 Zufallszahl ist nicht an einem Tippfehler irgendwo genau dort. Okay, versuchen wir es noch einmal. Hier bekommen wir eine Chewbacca ID 13. ID, ID 21. Dies sind alle niedrige Zahlen. Seltsamerweise, ID 64. Da gehen wir. Jetzt müssen wir ihren Namen und ihr Image bekommen. Also haben wir alle möglichen Sachen. Wir haben wie, wenn sie geboren werden, geboren Ort Yada, Yada. Wir wollen ihren Namen wie Palpieren und ein Bild. Also lasst uns das nur ein kleines bisschen runterwerfen. Und lassen Sie uns einen Namen geben. Also lasst uns den Namen H1 machen. Lassen Sie es einfach leer und wählen Sie ein Bild aus. Src wird auch nichts sein. Bitte geben Sie diesem eine Klasse von Charakter I mg. Und lassen Sie uns weitermachen und mit etwas davon arbeiten. So, jetzt wissen wir, dass wir Namen mit Datennamen, Datennamen füllen können , und das ist zugänglich. Und wenn ich hier reinklicke, sind das alle Daten in einem Objekt. Ich kann nach unten scrollen, um Namen zu nennen. Jetzt kann ich diesen Namen auswählen. Ich kann H1 Punktnamen machen. 2.txt wird Datenname sein. Und so sehen wir nichts. Boom, Boom, Boom, sieh dir das an. Es funktioniert jetzt so gut. Lassen Sie uns voran und fügen Sie ein Bild hinzu. Und das ist auch, lassen Sie uns verkleinern, weil wir bei etwa 250% sind , die sich anziehen, um zu viel zu sein. Jetzt können wir dieses Bild auswählen, können wir das Zeichen IMG auswählen. Wir können dieses Attribut von SRC auswählen und es als das, was wir haben, was hier drin. Wenn wir es betrachten, wird es nur Bild genannt. Also machen wir Daten, IMG. Okay, mal sehen, ob das funktioniert. Ok. Ich habe keine Ahnung, wer das ist, aber cool. Kuckuck, Kuckuck. In Ordnung. In Ordnung. Alles klar, ja, das sieht ziemlich gut aus. Also im Grunde haben wir das jetzt funktioniert. Jetzt können wir das ein bisschen schöner machen, wenn wir es wollten, indem wir ein wenig Styling hinzufügen. So könnten wir so etwas wie Stil machen. Wir können unsere H1, Text ausrichten, zentrieren, text-dekoration, unterstreichen, Schriftfamilie auswählen. Lasst uns eine serifenartige Schrift machen. Es spielt keine Rolle, was die Schrift ist, nur eine Sans Serif Schriftart. Und lassen Sie uns den Zeichennamen darunter generieren. Lasst uns Knopf machen. Die Anzeige wird Block sein, Rand wird automatisch sein, und dies sollte zentriert sein. Da gehen wir. Das sieht ein bisschen besser aus. Lassen Sie uns voran und stylen Sie dieses Bild ein wenig. Und wir machen IMG. Die Breite wird sein, sagen wir, 200 Pixel. Die Höhe wird automatisch sein. Bach-Schatten. Zehn Pixel, zehn Pixel. Lassen Sie uns ein wenig Unschärfe geben. Und lasst es uns schwarz machen. Jetzt schauen wir mal, wie das aussieht. Oh, das Bild ist nicht aufgetaucht und hat wahrscheinlich kein Bild. Okay, nicht schlecht, nicht schlecht. Lasst uns weitermachen und das auch zentrieren. Lassen Sie uns anzeigen, Block, Rand, Auto, Charaktergenerator, Greedo, Charaktergenerator, Riegel, Charaktergenerator, alle Arten von Menschen hier drin, schauen Sie sich diese an. Und so ist das unser Zufalls- und Charaktergenerator. Das ist ein erschreckendes Foto. Und das haben wir technisch in etwa sieben Codezeilen gemacht. Ja, es ist irgendwo da drauf. Also haben wir Mapping-Lauf 12345678 Codezeilen. Also haben wir unseren Event-Zuhörer. Immer wenn Sie auf die Schaltfläche klicken, erhalten Sie zufällig einen Charakter. Erstellen Sie nach dem Zufallsprinzip ein Zeichen oder eine Zahl, eher mieten zufällig erstellen Sie eine Zahl, erhalten. Und dann nur die URL, das ist diese API-URL. Und anstatt wie 88 Punkt JSON oder ein Punkt JSON zu bekommen, und wir haben gerade gesagt, jedes Mal, wenn Sie auf diese Schaltfläche klicken, erstellen Sie eine neue Zufallszahl und setzen Sie sie hier ein. Dann, wenn es fertig ist, haben wir eine Rückruffunktion und wir bekommen einfach den Namen und das Bild, und wir setzen diesen H1-Namen und das Zeichen-Image-Attribut, das SRC. Das ist alles, was es dazu gibt. Meine ist ziemlich hässlich. Wenn Sie meinen Code nehmen und es deutlich schöner aussehend machen wollten, seien Sie bitte meine Vermutung, ich würde es lieben, wenn Sie das tun könnten. Vergessen Sie nicht, Ihr Projekt zu teilen. Es ist wirklich wichtig, dass Sie Ihr Projekt mit dem Rest der Klasse teilen. Es ist sowohl inspirierend als auch hilfreich für andere Menschen, Ihren Code zu sehen und zu sehen, woran Sie gearbeitet haben. Eine letzte Sache, wenn Sie sind wie, na ja, was ist Math.sqrt, mathematischer Punkt zufällig. Diese wurden in JavaScript eins-zu-eins und JavaScript zu eins als auch abgedeckt, wo wir tatsächlich ein sehr, sehr ähnliches Projekt mit nur einfachem Vanille-JavaScript gemacht haben. Dieser Weg ist nur ein wenig weniger Code, der nur gerade jQuery verwendet, als nur gerade. 37. Zusammenfassung: Danke, dass Sie jQuery eins zu eins mit mir nehmen, Caleb, sagen, ich hoffe, Sie lernen zu lieben, wie einfach jQuery zu arbeiten ist. Vergiss nicht, du kannst mir auch auf Social Media bei Caleb tall lean auf Twitter folgen. Oder für tolle kleine Code-Snippets und Updates zu neuen Kursen. Sie können immer Codierung Punkt für Punkt alle auf Instagram folgen. Schließlich, wenn Sie auf der Suche nach einer Beschichtungsgemeinschaft sind, kommen Sie mit dem Lernen, Code auf Facebook. Es ist eine völlig freie Gruppe und Sie können jede Web-Entwicklungsfrage stellen. Nochmals vielen Dank für die Einnahme von jQuery 101 und ich werde Sie hoffentlich in einem anderen Kurs sehen. Glückliche Codierung.