Einführung in jQuery: Beherrschen der Grundlagen

Einführung

Willkommen zur jQuery-Dokumentation! In diesem Lab erhalten Sie eine Einführung in jQuery.

Das Einstieg in jQuery kann einfach oder herausfordernd sein, je nachdem, wie viel Erfahrung Sie mit JavaScript, HTML, CSS und programmierungstechnischen Grundlagen im Allgemeinen haben.

Eines der wichtigsten Dinge, das Sie wissen sollten, ist, dass jQuery nur eine JavaScript-Bibliothek ist. Alle Funktionen von jQuery werden über JavaScript aufgerufen, daher ist es unerlässlich, eine gute Kenntnis von JavaScript zu haben, um Ihren Code zu verstehen, zu strukturieren und zu debuggen. Obwohl das regelmäßige Arbeiten mit jQuery im Laufe der Zeit Ihre JavaScript-Kenntnisse verbessern kann, kann es schwierig sein, mit jQuery zu beginnen, wenn Sie nicht über Kenntnisse von JavaScripts eingebauten Konstrukten und Syntax verfügen. Daher empfehlen wir Ihnen, wenn Sie neu in JavaScript sind, den JavaScript-Grundlagen-Tutorial auf der Website der Mozilla Developer Network (MDN) zu besuchen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 86% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Wie jQuery funktioniert

Die Datei index.html wurde bereits in der VM bereitgestellt.

Diese Datei wird automatisch während der Umgebungsinitialisierung erstellt. Wenn sie nicht automatisch erstellt wird, erstellen Sie die Datei und implementieren Sie die Funktion wie in der obigen Abbildung gezeigt. Der Funktionscode lautet wie folgt:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  <body>
    <p>jQuery</p>
    <script src="jquery.min.js"></script>
    <script>
      // Ihr Code hier.
    </script>
  </body>
</html>

Das src-Attribut im <script>-Element muss auf eine Kopie von jQuery verweisen. Laden Sie eine Kopie von jQuery von der Seite Downloading jQuery herunter und speichern Sie die Datei jquery.min.js im gleichen Verzeichnis wie Ihre HTML-Datei.

Hinweis: Wenn Sie jQuery herunterladen, kann der Dateiname eine Versionsnummer enthalten, z.B. jquery-x.y.z.js. Stellen Sie sicher, dass Sie diese Datei entweder in jquery.js umbenennen oder das src-Attribut des <script>-Elements aktualisieren, um mit dem Dateinamen übereinzustimmen.

Ausführen von Code beim Laden des Dokuments

Um sicherzustellen, dass ihr Code nach dem Laden des Dokuments durch den Browser ausgeführt wird, umschließen viele JavaScript-Programmierer ihren Code in einer onload-Funktion:

window.onload = function () {
  alert("welcome");
};

Leider wird der Code erst ausgeführt, nachdem alle Bilder, einschließlich Banner-Werbung, fertig heruntergeladen sind. Um Code so bald wie möglich auszuführen, wenn das Dokument manipuliert werden kann, hat jQuery eine Anweisung namens ready event:

$(document).ready(function () {
  // Ihr Code hier.
});

Hinweis: Die jQuery-Bibliothek stellt ihre Methoden und Eigenschaften über zwei Eigenschaften des window-Objekts namens jQuery und $ zur Verfügung. $ ist einfach ein Alias für jQuery und wird oft verwendet, da es kürzer und schneller zu schreiben ist.

Beispielsweise können Sie innerhalb des ready-Events einen Click-Handler für den Link hinzufügen:

$(document).ready(function () {
  $("button").click(function () {
    $("p").text("Hello jQuery!");
  });
});

Kopieren Sie den obigen jQuery-Code in Ihre HTML-Datei, wo es heißt // Ihr Code hier. Speichern Sie dann Ihre HTML-Datei und laden Sie die Testseite in Ihrem Browser neu.

Vollständiges Beispiel

Das folgende Beispiel veranschaulicht den oben diskutierten Click-Handling-Code, der direkt im HTML-<body> eingebettet ist. Beachten Sie, dass es in der Praxis normalerweise besser ist, Ihren Code in einer separaten JS-Datei zu platzieren und ihn mit dem src-Attribut eines <script>-Elements auf der Seite zu laden.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  <body>
    <button>click me</button>
    <p>Hello World</p>
    <script src="jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("button").click(function () {
          $("p").text("Hello jQuery!");
        });
      });
    </script>
  </body>
</html>

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Wie jQuery funktioniert" abgeschlossen. Um mehr über die jQuery-API zu erfahren, besuchen Sie bitte die offizielle jQuery-Dokumentation.