Willkommen zum KnowledgeCity-Kurs auf Advanced JavaScript. In diesem Kapitel unseres Kurses werden wir uns mit jQuery befassen. Lassen Sie uns zunächst ein wenig darüber sprechen, warum Sie vielleicht wollen jQuery in Betracht ziehen, weil es viele gibt von JavaScript-Bibliotheken da draußen. Was ist so gut an diesem? Zunächst einmal ist es ziemlich beliebt. Ich habe neulich eine Statistik gelesen, in der stand: 96% aller Websites, die JavaScript verwenden, verwenden jQuery, Das sind über 75% aller Websites. Es ist also ziemlich beliebt. Dafür muss es einen Grund geben, und ja, es gibt Gründe. Mit weniger Code können Sie mehr erreichen. Zunächst das Dokumentobjektmodell bearbeiten. Mit normalem JavaScript sagen wir zum Beispiel: dass ich alle Absätze im DOM auswählen wollte, Ich würde es zum Beispiel mit document.querySelectorAll machen. Mit jQuery ist das alles, was ich tun muss. Und je weniger Code wir schreiben können, Je mehr Code wir rausschmeißen und produktiver sein können, desto mehr und das wollen wir definitiv. JQuery zeichnet sich also durch DOM-Manipulation aus. Dies erleichtert AJAX-Anrufe erheblich als quote-unquote würde normales JavaScript ausreichen. Und es hat eine ziemlich große Effektbibliothek das nutzt die Effekte von CSS. Und das große Ding ist, weil wir uns auch darüber keine Sorgen machen wollen, Es abstrahiert browserübergreifende Probleme. jQuery ist nur eine Bibliothek, Es ist eine ziemlich umfangreiche Bibliothek Wie Sie sehen werden, installieren wir es in dieser Lektion. Aber eines der Dinge, die es tut abstrahiert es browserübergreifende Probleme, damit wir uns keine Sorgen machen müssen. Unser jQuery-Code sollte ebenfalls ausgeführt werden in jeder Art von Browser ohne uns sich um die meisten Browser-Besonderheiten der Welt zu kümmern. Nachdem ich das alles gesagt habe, Hoffentlich haben wir einen Fall gemacht, wohin Sie gehen daran interessiert sein. Schauen wir uns an, wie wir dies installieren können. Nun zu diesem Kurs, Ich werde Visual Studio verwenden. Und das ist das vollständige Visual Studio, Community Edition ist eher das, was ich hier habe. Alle Tools sind hier verfügbar. Sie können dies kostenlos herunterladen, wenn Sie es nicht haben. Jetzt ist mir klar, dass es viele gibt von verschiedenen Orten, für die Sie jQuery schreiben möchten oder von verschiedenen Technologien, die Sie zusammen mit verwenden, Deshalb werde ich hier ein paar verschiedene Ansätze zeigen und dann werden wir darüber sprechen, was wir tun müssen um es speziell Teil der Anwendung zu machen dass ich hier renne. Aber vor allem das Einfachste ist einfach zu gehen und es zu bekommen. Also können wir zu jquery.com gehen, da ist die Dokumentation da, sehr gute Beispiele, wie man das benutzt. Sie können jQuery jedoch direkt hier herunterladen. Die aktuelle Version zum Zeitpunkt dieser Aufnahme ist 3.5.1, Das ist es, was ich in meinen Projekten verwenden werde. Wenn Sie es nicht direkt installieren möchten, wie bei den meisten Bibliotheken jeglicher Beliebtheit, Sie können auch das CDN verwenden. Sie verlinken also nur auf die nächstgelegene Version von, und mit jQuery bieten sie Ihnen dort diese vier Optionen. Das Unkomprimierte, das Minimierte, das Schlanke und der schlanke minimiert. Je nachdem, wo Sie sich in Ihrem Projekt befinden, Sie würden hier andere verwenden. Normalerweise verwenden wir die unkomprimierte Version zur Entwicklungszeit, damit wir etwas debuggen können, und dann die minimierte zur Produktionszeit, so dass unsere App ist performanter, läuft flüssiger, Dateien kleiner. All diese Sachen. Wenn Sie das CDN verwenden möchten, Klicken Sie einfach darauf und es gibt Ihren Skript-Link. Also kann ich das einfach da rein kopieren, und wie es heißt, sind Crossorigin und Integrität drin für die SRI-Prüfung. Wenn ich das mache, dann ist das alles, was ich haben muss in jedem Dokument, in dem ich das zur Verfügung haben möchte. Die anderen Optionen, wenn Sie NPM verwenden, was wir von Visual Studio aus tun können. Ich muss hier eine Befehlszeile öffnen. und ein nettes kleines Werkzeug, das ich dafür habe, Öffnen Sie die Befehlszeile. Dies ist eine Erweiterung, die Sie zu Visual Studio hinzufügen können. Wenn Sie Visual Studio nicht speziell verwenden, Mach dir nicht zu viele Sorgen um diesen Teil. Aber ich mag das als Erweiterung und Sie können hier einfach Erweiterungen hinzufügen über das Menü Erweiterungen. Aber Open Command Line gibt mir entweder PowerShell oder meine Dev-Eingabeaufforderung oder die Standard-Eingabeaufforderung. Und für diesen ist es nicht wirklich wichtig. Aber das Schöne, was ich nicht habe sich Sorgen zu machen, wenn ich das tue, ist zu bemerken, dass es mich genau dort bringt in dem Ordner, in dem ich sein muss, Denn was ich hier machen werde Installieren Sie einfach jQuery mit NPM, also Node Package Manager. Und der Name des Pakets ist einfach nur jQuery. Und das können Sie sehen, Es sieht so aus, als hätten wir kein NPM installiert. Nun, das ist ziemlich einfach zu beheben. Na, bitte. Sie können Node js und NPM zusammenbringen. Also werde ich weitermachen und das installieren. Und wir lassen das zu und kommen gleich wieder. In Ordnung, wir sind zurück durch die Magie des Videos. Mal sehen, ob NPM derzeit installiert ist. Das ist gut, wir bekommen die Dokumentation. Und dafür sorgen, dass jQuery da reinkommt, Auch hier ist es eine ziemlich einfache Sache des Pakets heißt nur jQuery und das sollte alles für uns installiert bekommen. Also, in diesem speziellen Projekt, was das für mich bedeutet hat hat einen Knotenmodulordner erstellt. Nun, wenn dies in Ihrem Projekt als ausgegraut angezeigt wird oder wenn Sie es überhaupt nicht sehen, So bekommen wir es in Visual Studio. Zunächst möchten wir sicherstellen, dass alle Dateien angezeigt werden zeigt alle Dateien an. Und hier sehen Sie Ordner und Dateien das wird eigentlich nicht als Teil Ihrer Lösung betrachtet aber sie sind im Verzeichnis. Also, wenn deine so auftaucht, zum Beispiel, dann wollen wir dort Include In Project machen, so dass es Teil des Projekts ist. Und dort werden alle unsere Knotenpakete enden. Und dort ist die jQuery. Nun, für diese besondere Art von Projekt, Ich mache eine ASP.NET Core-Anwendung. Und für diesen speziellen Projekttyp: damit statische Dateien bereitgestellt werden können, Ich muss eine Änderung in der Datei startup.cs vornehmen. Also noch einmal, wenn Sie Visual Studio nicht verwenden oder die Art und Weise des Core-Anwendungsprojekts, um es zu erstellen, Mach dir keine Sorgen um diesen Teil, Lassen Sie NPM jQuery installieren, wie auch immer Sie es tun können und dann mach einfach weiter und benutze es. Aber für diesen speziellen Anwendungstyp, Wir brauchen diesen Aufruf, um statische Dateien zu verwenden. Es ist nur etwas, was die Anwendung benötigt. Und ich gehe nur den Stammpfad meiner Anwendung, den Ordner mit den Knotenmodulen dort anheften, damit es der jQuery dient von diesem bestimmten Ort. Wenn ich das mache, dann zurück auf meiner Seite um die Referenz zu erhalten, Es ist immer noch nur eine Skriptreferenz. Und die Quelle dort ist, dass wir gehen werden von Knotenmodulen abwärts. Also hatten wir unser jQuery-Paket drin. Und mal sehen, ich glaube, das ist in einem anderen Unterordner. Also gibt es dist und ich werde nur verwenden Welche jQuery-Datei auch immer vorhanden ist. Das wäre also jQuery.js. Jeder dieser Wege ist also in Ordnung. Sie möchten dieses Skript jedoch dort einbinden. Was auch immer für Sie funktioniert, dann ist das in Ordnung. Und lassen Sie uns testen und sicherstellen dass wir tatsächlich etwas haben. Was wir immer aufrufen, ist die jQuery-Funktion. Und so können Sie das eigentliche Wort jQuery verwenden. Aber was werden Sie wahrscheinlich die meisten Leute tun sehen verwendet das Dollarzeichen. Also können wir eines davon machen, das ist in Ordnung. Jetzt gibt es eine Möglichkeit dass eine andere Bibliothek Dollarzeichen verwenden würde als etwas Bedeutendes. Also, was können Sie dann tun, ist im Grunde die Kontrolle über das Dollarzeichen zu dieser anderen Bibliothek, wenn Sie es haben, und Sie können den sogenannten No-Conflict-Modus ausführen. So könnte ich das zum Beispiel alles andere nennen, was ich will, jq ist ziemlich normal, und dann würden wir jquery.noConflict aufrufen. Also jetzt für den Rest von dem, was wir tun werden, jq ruft die jQuery-Funktion auf und dann können wir tun, was immer wir tun müssen. Dokumentbereit ist etwas, das Sie verwenden werden ziemlich oft in jQuery-Anwendungen. Dies ist, was läuft, wenn alles geladen wird. Ich brauche also keinen Konfliktmodus. Ich werde hier einfach die jQuery-Funktion verwenden. Und wir schauen uns das Dokumentobjekt an und dann läuft alles, wenn unser Dokument geladen wird. Also lasst uns hier einfach eine kurze kleine Hallo-Welt machen, und stellen Sie sicher, dass die von uns gewählte Methode funktioniert. Ich werde dieses CDN erst einmal verwenden. Und wir werden alles retten und wir sollten uns eine Seite haben. Bereit für die denkwürdigste Hallo-Welt aller Zeiten? Besser als alle anderen, die Sie jemals gesehen haben. Na, bitte. Hallo. Sehen Sie, es ist falsch geschrieben, es ist sehr unvergesslich. In dieser Lektion haben wir uns verschiedene Möglichkeiten angesehen um jQuery in Ihrem Projekt zu installieren. Bleib dran für die nächste Lektion, Wir werden uns die jQuery-Funktion genauer ansehen und die umschlossenen Elemente und die Verwendung von Selektoren.
