jQuery / In HTML laden und verwenden

Laden Sie jQuery per script, bevor abhängiger Code läuft. Verwenden Sie ein CDN oder eine heruntergeladene Datei. Bibliotheksverfügbarkeit und Bereitschaft der HTML-Elemente sind getrennte Voraussetzungen.

Datei und Reihenfolge wählen

jQuery ist eine JavaScript-Bibliothek. Binden Sie sie mit script und src ein, wählen Sie Elemente und rufen Sie Methoden auf. Eigene HTML-Tags, npm und Build-Werkzeuge sind hier unnötig.

Verwendet wird die normale Script-Version 4.0.0 aus den offiziellen Downloads. min bedeutet Komprimierung, keinen anderen Funktionsumfang. Slim lässt Ajax und effects weg. Das sofortige Ein-/Ausblenden hier nutzt keine zeitgesteuerten Effekte oder Ajax.

Laden Sie die beabsichtigte Instanz einmal. Eine zusätzliche Kopie auf vorhandenen Seiten kann Plugins und Daten trennen. Prüfen Sie erst das unabhängige Beispiel und dann die Seitenabhängigkeiten.

Vollständiges CDN-Beispiel

Ein CDN, Content Delivery Network, liefert Dateien extern. Als UTF-8 cdn-demo.html speichern und mit Internet im Browser öffnen. Kein Server und keine Installation nötig. Wählen Sie Version und normalen Script-Typ in der offiziellen CDN-Liste. Getrennt in Windows Edge mit 3.7.1 und 4.0.0 ausgeführt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Load jQuery and use it</title>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});
  </script>
</body>
</html>

Erfolgreiche Ausgabe. Waiting for scripts. steht zunächst im HTML; erst ausgeführter Code setzt ready=true.

ready=true
message visible=true
clicks=0

1. Toggle message versteckt den Absatz: message visible=false, clicks=1.
2. Nochmals zeigt ihn mit clicks=2. aria-expanded folgt. Fokus und Enter funktionieren ebenfalls.
3. Reset stellt Text und null ohne Neuladen her.

Das normale Script nach jQuery führt abhängigen Code aus. Der DOM-bereit-Rückruf jQuery(function ($) { ... }) wartet auf das bearbeitbare Document Object Model. Lokales $ ist jQuery. Es wartet nicht auf die Bibliotheksdatei selbst; vor deren Verfügbarkeit schlägt der Aufruf fehl.

Lokale Dateien mit geordnetem defer

Laden Sie dieselbe Version offiziell herunter, um die CDN-Abhängigkeit zu vermeiden. index.html und app.js liegen zusammen, jquery-4.0.0.min.js im Unterordner vendor. Prüfen Sie echte Endungen gegen versehentliches .js.txt.

1. Bibliothek als vendor/jquery-4.0.0.min.js speichern, nicht mit app.js überschreiben.
2. Folgendes vollständiges HTML als index.html speichern. ./vendor/ ist relativ zu dieser Datei.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local jQuery with ordered deferred scripts</title>
  <script defer src="./vendor/jquery-4.0.0.min.js"></script>
  <script defer src="./app.js"></script>
  <style>body { font: 16px/1.6 sans-serif; margin: 20px; } button { font: inherit; margin: 4px; } pre { white-space: pre-wrap; }</style>
</head>
<body>
  <button type="button" id="toggle" aria-controls="message" aria-expanded="true">Toggle message</button>
  <button type="button" id="reset">Reset</button>
  <p id="message">This message is controlled by jQuery.</p>
  <pre id="status" aria-live="polite">Waiting for scripts.</pre>
</body>
</html>

Dieses ganze JavaScript daneben als app.js ohne script-Tags speichern.

jQuery(function ($) {
  let clicks = 0;
  function report() {
    const visible = $("#message").is(":visible");
    $("#toggle").attr("aria-expanded", String(visible));
    $("#status").text(`ready=true\nmessage visible=${visible}\nclicks=${clicks}`);
  }
  $("#toggle").on("click", function () { clicks++; $("#message").toggle(); report(); });
  $("#reset").on("click", function () { clicks = 0; $("#message").show(); report(); });
  report();
});

index.html liefert dasselbe Ergebnis, mit echter lokaler 4.0.0 in Windows Edge geprüft. Nach Vorbereitung ist kein externes CDN nötig.

ready=true
message visible=true
clicks=0

Normale externe defer-Scripts laufen nach dem HTML-Parsing in Dokumentreihenfolge: Bibliothek, dann app. async folgt fertigen Downloads und garantiert diese Abhängigkeit nicht. defer am Inlinecode ersetzt keine externe app-Datei.

Prüfung und Fehlersuche

Prüfen Sie typeof window.jQuery auf function und jQuery.fn.jquery auf die Version. Bei undefined zuerst Laden lösen statt Version lesen. Network zeigt URL, Antwort und Inhalt. Eine HTML-Fehlerseite unter .js ist keine Bibliothek.

Bei „jQuery is not defined“ prüfen Sie Pfad, Blockierung und Reihenfolge. Absichtlich blockiertes CDN ließ Waiting for scripts. stehen, der normale Absatz blieb sichtbar. Lokal zählen Großschreibung, Ordner und Endungen; HTTPS/HTTP-Mischung und Script-Richtlinien erscheinen ebenfalls in Network/Console.

Bei „$ is not a function“ prüfen Sie andere Besitzer des Namens. Falsche ids und doppelte Ereignisse löst korrektes Laden nicht. Trennen Sie Verfügbarkeit, Auswahl und Ereignisausführung.

Vor Einsatz Versionsänderungen und abhängige Plugins prüfen und die bisherige Verbindung aufbewahren. Bei CMS oder Frameworks mit vorhandener Verwaltung zuerst Registrierung und Abhängigkeiten untersuchen, statt eine weitere CDN-Datei einzufügen.