jQuery-Übersicht

Die jQuery-Bibliothek kann mit einer einfachen Markierung in eine Webseite eingefügt werden.

Merkmale der jQuery-Bibliothek

jQuery ist eine JavaScript-Funktionsbibliothek.

Die jQuery-Bibliothek umfasst folgende Merkmale:

  • Auswahl von HTML-Elementen
  • Operationen mit HTML-Elementen
  • CSS-Operationen
  • HTML-Ereignisfunktionen
  • JavaScript-Effekte und Animationen
  • Bereisen und Ändern des HTML DOM
  • AJAX
  • Nützliche Funktionen

Fügen Sie die jQuery-Bibliothek Ihrer Seite hinzu

Die jQuery-Bibliothek befindet sich in einer JavaScript-Datei und enthält alle jQuery-Funktionen.

jQuery kann auf die Webseite mit dem folgenden Tag hinzugefügt werden:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Beachten Sie, dass der <script>-Tag im <head>-Teil der Seite platziert sein sollte.

Basis-jQuery-Beispiel

Nachstehendes Beispiel zeigt die Funktion hide() von jQuery, die alle <p>-Elemente im HTML-Dokument ausblendet.

Beispiel

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Klicken Sie hier</button>
</body>
</html>

Selbst ausprobieren

jQuery herunterladen

Es gibt zwei Versionen von jQuery, die heruntergeladen werden können: eine ist komprimiert, die andere nicht (zur Fehlersuche oder zum Lesen).

Beide Versionen sind verfügbar jQuery.com Herunterladen.

Alternative Bibliotheken

Google und Microsoft unterstützen jQuery sehr gut.

Wenn Sie jQuery-Bibliotheken nicht auf Ihrem Computer speichern möchten, können Sie die CDN-Dateien von Google oder Microsoft laden.

Verwenden Sie den CDN von Google

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Verwenden Sie den CDN von Microsoft

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>