jQuery - Übersicht

Was ist jQuery?

jQuery ist eine schnelle und prägnante JavaScript-Bibliothek, die 2006 von John Resig unter einem guten Motto erstellt wurde: Write less, do more. jQuery vereinfacht das Durchlaufen von HTML-Dokumenten, das Behandeln von Ereignissen, das Animieren und Ajax-Interaktionen für eine schnelle Webentwicklung. jQuery ist ein JavaScript-Toolkit, das verschiedene Aufgaben vereinfacht, indem weniger Code geschrieben wird. Hier ist die Liste der wichtigsten Kernfunktionen, die von jQuery unterstützt werden:

DOM manipulation - Die jQuery machte es einfach, DOM-Elemente auszuwählen, auszuhandeln und ihren Inhalt zu ändern, indem die browserübergreifende Open-Source-Selector-Engine namens aufgerufen wurde Sizzle.
Event handling - Die jQuery bietet eine elegante Möglichkeit, eine Vielzahl von Ereignissen zu erfassen, z. B. wenn ein Benutzer auf einen Link klickt, ohne den HTML-Code selbst mit Ereignishandlern überladen zu müssen.
AJAX Support - Die jQuery hilft Ihnen sehr dabei, mithilfe der AJAX-Technologie eine reaktionsschnelle und funktionierende Website zu entwickeln.
Animations - Die jQuery verfügt über zahlreiche integrierte Animationseffekte, die Sie auf Ihren Websites verwenden können.
Lightweight - Die jQuery ist eine sehr leichte Bibliothek - ungefähr 19 KB groß (minimiert und gezippt).
Cross Browser Support - Die jQuery bietet browserübergreifende Unterstützung und funktioniert gut in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome und Opera 9.0+
Latest Technology - Die jQuery unterstützt CSS3-Selektoren und die grundlegende XPath-Syntax.

Wie benutzt man jQuery?

Es gibt zwei Möglichkeiten, jQuery zu verwenden.

Local Installation - Sie können die jQuery-Bibliothek auf Ihren lokalen Computer herunterladen und in Ihren HTML-Code aufnehmen.
CDN Based Version - Sie können die jQuery-Bibliothek direkt aus dem Content Delivery Network (CDN) in Ihren HTML-Code aufnehmen.

Lokale Installation

Gehe zum https://jquery.com/download/ um die neueste verfügbare Version herunterzuladen.
Jetzt heruntergeladen jquery-2.1.3.min.js Datei in einem Verzeichnis Ihrer Website, z. B. / jquery.

Beispiel

Jetzt können Sie die jquery- Bibliothek wie folgt in Ihre HTML-Datei aufnehmen:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

CDN-basierte Version

Sie können die jQuery-Bibliothek direkt aus dem Content Delivery Network (CDN) in Ihren HTML-Code aufnehmen. Google und Microsoft bieten Content Delivery für die neueste Version.

In diesem Tutorial verwenden wir die Google CDN-Version der Bibliothek.

Beispiel

Lassen Sie uns nun das obige Beispiel mit der jQuery-Bibliothek von Google CDN neu schreiben.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Wie rufe ich eine jQuery-Bibliothek auf?

Wie fast alles, was wir tun, wenn jQuery das Dokumentobjektmodell (DOM) liest oder manipuliert, müssen wir sicherstellen, dass wir mit dem Hinzufügen von Ereignissen usw. beginnen, sobald das DOM bereit ist.

Wenn ein Ereignis auf Ihrer Seite funktionieren soll, sollten Sie es in der Funktion $ (document) .ready () aufrufen. Alles darin wird geladen, sobald das DOM geladen ist und bevor der Seiteninhalt geladen wird.

Zu diesem Zweck registrieren wir ein fertiges Ereignis für das Dokument wie folgt:

$(document).ready(function() {
   // do stuff when DOM is ready
});

Verwenden Sie HTML-Skript-Tags wie unten gezeigt, um eine jQuery-Bibliotheksfunktion aufzurufen.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Wie verwende ich benutzerdefinierte Skripte?

Es ist besser, unseren benutzerdefinierten Code in die benutzerdefinierte JavaScript-Datei zu schreiben: custom.jswie folgt -

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Jetzt können wir einschließen custom.js Datei in unserer HTML-Datei wie folgt -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Verwenden mehrerer Bibliotheken

Sie können mehrere Bibliotheken zusammen verwenden, ohne sich zu widersprechen. Beispielsweise können Sie die Javascript-Bibliotheken jQuery und MooTool zusammen verwenden. Sie können die jQuery noConflict- Methode auf weitere Details überprüfen .

Was kommt als nächstes ?

Machen Sie sich nicht zu viele Sorgen, wenn Sie die obigen Beispiele nicht verstanden haben. Sie werden sie in den folgenden Kapiteln sehr bald verstehen.

Im nächsten Kapitel wird versucht, einige grundlegende Konzepte zu behandeln, die aus herkömmlichem JavaScript stammen.