Nutzung von Javascript-"Bibliotheken" (am Beispiel jQuery)

Gute Programmierer kennen viele freie Quelltexte, welche sie in ihren Programmen einsetzen können. So können sie in kurzer Zeit sehr leistungsfähige Programme schreiben. So wie man Bücher in der Stadtbibliothek findet, so findet man die Quelltexte solcher Programme in so genannten Bibliotheken (Library). Bei jQuery handelt es sich um die meist genutzte Javascript-Library.

jQuery - Wozu?

  1. jQuery vereinfacht das Programmieren mit Javascript.
  2. Viele Befehle/Anweisungen sind intuitiver verwendbar.
  3. Die Kompatibilität des eigenen Quelltextes bei der Verwendung mit verschiedenen Browsern steigt.
  4. Webdesigner werden mit jQuery in die Lage versetzt, ihre Seiten deutlich "aufzupeppen".
siehe auch:

jQuery einbinden in eigene Seiten

Wie Sie bereits gelernt haben, können Sie Quelltexte in eigene Seiten integrieren, indem Sie einfach den Dateinamen des zu verwendenden Quelltexts im src-Attribut im Script-Tag verwenden, z.B.
<script src="beispiel.js"></script>
Genau so können Sie auch die aktuelle Version von jQuery einbinden:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Für den Fall, dass Sie Offline arbeiten oder Daten sparen möchten bekommen Sie die jQuery-Bibliothek auch hier als Download:
Sobald Sie die jQuery-Bibliothek in Ihre Seite eingebunden haben, können Sie jQuery verwenden. Ergänzend müssen Sie noch folgende Zeilen ergänzen, bevor Sie Ihren eigenen Quelltext hinzufügen können:
<script>
 
$(document).ready(function() {
 
  // erst nach dem vollständigen Laden der HTML-Seite
  // wird der hier stehende Quelltext ausgeführt ...
 
});
 
</script>
 
Bis hierhin ist noch nicht viel passiert. Sie können noch nicht feststellen, ob jQuery bei Ihnen funktioniert.
Wenn Sie einfach ein alert("Hallo") ergänzen, dann wird diese Anweisung beim Laden der Seite ausgeführt.
Sie können jetzt aber auch JQuery-Funktionen hinzufügen, welche Ereignisse behandeln, z.B.
$(document).click(function() {
  alert("Hallo");
});
Wenn Sie diese Funktion anstelle des obigen Kommentars (// erst nach vollständigem ...) hinzufügen, dann wird bei Klick irgendwo in die Seite das "Hallo" ausgegeben.
Wenn Sie den Klick gezielt auf ein HTML-Element in der Seite anwenden möchten, dann steht an der Stelle von 'document' die ID des Elements, z.B. "Eingabefeld".
$("#Eingabefeld").click(function() {
  alert("Hallo");
});

jQuery verwenden / Tutorials / Programmierschnittstelle

Manchmal ist es gut, eine ausführliche Anleitung zur Verwendung von jQuery zu studieren. Solche Anleitungen finden Sie z.B. hier:

Wie man jQuery korrekt verwendet, beschreibt die so genannte
  • Programmier-Schnittstelle (deutsch) bzw. die
  • API - application programming interface (englisch).
Hier finden Sie die Befehle zur Verwendung von jQuery in eigenen Programmen:

Übersicht ausgewählter jQuery-Funktionen


jQuery-Vorlage "Hällo Wörld!"

<!DOCTYPE html>
<html>
 
<head>
  <title>jQuery</title>
  <meta charset="utf-8">
 
  <style type="text/css">
  </style>
 
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script type="text/javascript">
 
    $(document).ready(function() {
      // Handler for .ready() called.
      alert("Hällo Wörld!");
    });
 
  </script>
 
</head>
 
<body>
 
  <h1>Halli Hallo!</h1>
 
</body>
 
</html>

jQuery - aktuelle Version

Sie können verschiedene jQuery-Bibliotheken nutzen, z.B.

jQuery - Verstecken und Anzeigen von Objekten

Versteckte Objekte (hide) können auch wieder angezeigt werden (show). Das folgende Beispiel zeigt, wie es funktioniert!
stopPropagation(), siehe https://www.w3schools.com/jquery/event_stoppropagation.asp
<!DOCTYPE html>
<html>
 
<head>
  <title>jQuery</title>
  <meta charset="utf-8">
 
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 
  <script>
      $(document).ready(function() {
 
          var klickcount=0;
 
          $("#klickmich").click(function(event)
          {
            event.stopPropagation();
            klickcount++;
            switch( klickcount )
            {
              case 1:
              {
                alert("Hällo Wörld!");
                break;
              }
              case 2:
              {
                $("#klickmich").hide();
                break;
              }
              default:
              {
                alert("Mist passiert");
              }
            }
          });
 
          $("p").click(function(event){
            event.stopPropagation();
            $("#klickmich").show();
            klickcount=0;
            $("p").hide();
          });
 
        });
  </script>
 
</head>
 
<body>
 
    <h1 id="klickmich">Halli Hallo!</h1>
    <p>
      new headline
    </p>
 
</body>
 
</html>
Es gibt weitere Möglichkeiten, Objekte zu verstecken. Ein paar Ratschläge zur Verwendung von 'Display', 'Visibility', 'Opacity' finden Sie z.B. hier:

jQuery - Selektor

Sie haben jetzt in diversen Beispielen gesehen, dass jQuery-Aktionen auf verschiedene Elemente angewendet werden können. Die Auswahl eines oder mehrerer Objekte geschieht über den so genannten Selektor.
Beispiele:
  • Tags, z.B. $("p")
  • IDs, z.B. $("#meineID")
  • Klassen, z.B. $(".farbe")
  • das aktuelle Objekt: $(this)

Farbe von Objekten ändern

Ergänzen Sie den obigen Code um ein div-Tag, welches die Überschrift und den Absatz enthält! Beim Klicken auf die vom div-Tag eingeschlossene Fläche wird dann zuerst die aktuelle Farbe ausgegeben und anschliessend geändert auf rot.
<!DOCTYPE html>
<html>
 
<head>
  <title>jQuery</title>
  <meta charset="utf-8">
 
  <style>
      #alles
      {
          position:     absolute;
          top:          0px;
          left:         0px;
          width:        400px;
          height:       400px;
          background-color: #444444;
          color:        white;
          font-size:    48px;
      }
  </style>
 
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 
  <script>
 
    $(document).ready(function()
    {
 
        $("#alles").click(function(event)
        {
            event.stopPropagation();
            var color = $( this ).css( "background-color" );
            alert("color: " + color);
            $("#alles").css("background-color","red");
        });
 
    });
 
  </script>
 
</head>
 
<body>
 
  <div id="alles">
    Hällo Wörld!
  </div>
 
</body>
 
</html>

load - Beispiel

Der Inhalt einer Datei namens bla.txt wird in das Element mit der ID "cb-container" geladen, sobald der Link mit der ID "meinLink" angeklickt wird.
<script>
  $(document).ready(function() {
 
    $( "a#meinLink" ).click( function( e ) {
 
      $( "#cb-container" ).load( "bla.txt" );
      return false;
 
    } );
 
  });
</script>
 
<div id="cb-container">alt</div>
<a id="meinLink" href="">lalala</a>

Ereignisse in jQuery / jQuery Event Methods

Mit jQuery Event Methods ist es möglich, auf Ereignisse - welche Elemente der Seite betreffen - zu reagieren.
siehe:

Beispiel: angefangenes "Tic Tac Toe"

TicTacToe-jQuery.png
siehe: Download

Objekte dynamisch erzeugen

to do , siehe z.B. ...
Früher gab es in jQuery die Funktion .live(). Ab jQuery 1.9 wird nur noch folgender Code verwendet:
$(document).on('click', '.elem', function() ...);
 

Weitere Links

Effekte:
Andere: