jQuery ist eine Javascript-Bibliothek, die die Programmierung mit JavaScript™ und AJAX (Asynchronous JavaScript + XML, Asynchronous Javascript and XML) vereinfacht. Im Gegensatz zu anderen Javascript-Bibliotheken verfügt jQuery über eine eigene Philosophie, die Ihnen das Schreiben von Code erleichtert. In diesem Artikel erfahren Sie mehr über die Philosophie von jQuery, diskutieren seine Merkmale und Funktionen und stellen einige Ajax-Beispiele sowie die Verwendung von Plug-Ins zur Erweiterung von jQuery bereit.
1. Was ist jQuery?
jQuery ist eine ausgezeichnete Javascript-Bibliothek. Sie wurde 2006 geboren und von John Resig erstellt. Egal, ob Sie ein JavaScript-Neuling sind, aber die Komplexität von DOM (Document Object Model) und Ajax ausprobieren möchten, oder ob Sie ein JavaScript-Experte sind, aber es satt haben, die langweiligen DOM- und Ajax-Skripte zu wiederholen, jQuery ist Ihre beste Wahl. Ihre beste Wahl .
jQuery hilft Ihnen, Ihren Code einfach und prägnant zu halten. Sie müssen nicht mehr viele sich wiederholende Schleifen oder DOM-Aufrufskripte schreiben. Mit jQuery finden Sie schnell die wichtigsten Punkte und können Ihre Ideen mit möglichst wenig Code ausdrücken.
Die Philosophie von jQuery ist eigentlich ganz einfach: einfach und wiederverwendbar. Wenn Sie diese Idee verstehen und ihr zustimmen, können Sie erkennen, wie einfach und angenehm die Verwendung von jQuery Ihre Programmierung machen kann!
2. Einige einfache Konzepte
Hier ist ein einfaches Beispiel, das Ihnen zeigt, wie sich jQuery auf den von Ihnen geschriebenen Code auswirkt. Was Sie tun, ist eigentlich sehr einfach, z. B. das Hinzufügen eines Klickantwortereignisses zu allen Links in einem bestimmten Bereich auf der Seite. Sie können es mit allgemeinem Javascript und DOM schreiben: Siehe Listing
1. DOM-Skripting ohne jQuery
var external_links = document.getElementById('external_links');var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) {var link = links.item(i) ;link.onclick = function() {return bestätigen('Sie besuchen: ' + this.href);};} Wenn Sie jQuery verwenden, sieht die Implementierung wie folgt aus: Listing 2. DOM-Skripting mit jQuery$(' #external_links a').click( function() {return activate('You are gonna visit: ' + this.href);}); Überrascht, oder? Mit jQuery können Sie schnell die wichtigsten Punkte finden und nur das ausdrücken, was Sie ausdrücken müssen, ohne wortreich zu sein. Es ist nicht nötig, diese Elemente in einer Schleife zu durchlaufen, die Funktion click() kümmert sich um alles. Und Sie müssen nicht zu viel Code schreiben, um das DOM zu manipulieren. Sie müssen lediglich ein paar Zeichen verwenden, um das gesuchte Element zu definieren. Werfen wir einen Blick darauf, wie dieser Code mit ein paar Tricks funktioniert. Schauen Sie sich zunächst die Funktion $() an – eine der nützlichsten und leistungsstärksten Funktionen in jQuery. Meistens verwenden Sie diese Funktion, um Elemente aus dem Dokument auszuwählen. In diesem Beispiel verwenden Sie diese Funktion, um For-Strings in Cascading zu übergeben Mit der Stylesheets-Syntax (CSS) kann jQuery dieses Element leicht finden. Wenn Sie sich ein wenig mit grundlegenden CSS-Selektoren auskennen, wird diese Syntax meiner Meinung nach in Listing2 verwendet, um Elemente mit der ID external_links zu finden Das folgende Leerzeichen bedeutet, dass jQuery alle <a>-Elemente innerhalb des #external_links-Elements finden muss. Es ist etwas schwierig, es in gesprochener Sprache auszudrücken – es ist auch ziemlich mühsam, in DOM-Skripten zu schreiben, aber in CSS ist nichts einfacher Als dies. Die Funktion $() gibt ein jQuery-Objekt zurück, das alle Elemente enthält, die dem CSS-Selektor entsprechen. Das Konzept eines jQuery-Objekts ähnelt einem Array, aber es kann beispielsweise die Click-Funktion enthalten Funktion zum Binden einer Klick-Ereignisantwort an jedes Element in einem jQuery-Objekt.
Sie können auch ein Element oder ein Array von Elementen an die Funktion $() übergeben, die alle Elemente in ein jQuery-Objekt packt Diese Funktion können Sie beispielsweise für Objekte wie Fenster verwenden, um Ereignisse zu laden:
window.onload = function() {// mach das, wenn die Seite fertig geladen ist}; Wenn du jQuery verwendest, kannst du so schreiben:
$(window).load(function() {// führen Sie dies aus, wenn die gesamte Seite heruntergeladen wurde}); Wie Sie wissen, ist das Warten auf das Laden eines Fensters äußerst schmerzhaft, da die gesamte Seite geladen werden muss, einschließlich allem darauf In einigen Fällen müssen Sie das Bild zuerst laden, aber meistens müssen Sie möglicherweise nur das Hypertext-Markup (HTML) sehen, indem jQuery ein ganz besonderes Ereignis im Dokument erstellt Die Verwendungsmethode lautet wie folgt: $(document).ready(function() {// tun Sie dies, wenn der HTML-Code fertig ist}); Dieser Code erstellt ein jQuery-Objekt des Dokumentelements und ruft es dann auf, wenn der HTML-DOM Dokument ist bereit Diese Instanz Sie können diese Funktion unbegrenzt oft aufrufen.
Bei der Codierung im echten jQuery-Stil gibt es auch eine Kurzform dieser Funktion. Übergeben Sie einfach eine Funktion an die Funktion $():
$(function() {// führen Sie dies aus, wenn der HTML-Download abgeschlossen ist}); Bisher habe ich Ihnen drei verschiedene Möglichkeiten gezeigt, die Funktion $() zu verwenden. Die vierte Möglichkeit ist, dass Sie ein Element mit einem String erstellen können. Das Ergebnis ist ein jQuery-Objekt, das dieses Element enthält. Listing 3 zeigt ein Beispiel für das Hinzufügen eines Absatzes zur Seite:
Listing 3. Erstellen und Anhängen eines einfachen Absatzes
$('<p></p>'). !').css('background', 'yellow').appendTo("body"); Wie Sie dem obigen Beispiel entnehmen können, ist die Methodenverkettung (Methodenverkettung) jedes Mal, wenn Sie a aufrufen Methode für ein jQuery-Objekt, diese Methode gibt auch ein jQuery-Objekt zurück. Das bedeutet, dass Sie CSS-Selektoren nicht wiederholt schreiben müssen.
$('#message').css('background', 'yellow').html('Hello!').show();3.jQuery macht Ajax extrem einfach verfügt über eine Reihe von Funktionen, die einfache Dinge wirklich einfach und komplexe Dinge so einfach wie möglich machen können. Eine häufige Verwendung von Ajax besteht darin, einen Teil des HTML-Codes in einen bestimmten Bereich auf der Seite zu laden Hier ist ein Beispiel für die Aktualisierung einiger Statistiken: $('#stats').load('stats.html'); Wie Sie vielleicht erraten haben, ist die Verwendung von jQuery natürlich je nach Ihren spezifischen Anforderungen sehr einfach optionales Datenobjekt und eine Callback-Funktion. Listing 4 ist ein einfaches Beispiel für das Senden von Daten und die Verwendung einer Callback-Funktion:
Listing 4. Senden von Daten an eine Seite mit Ajax
$.post('save.cgi', {text: 'my string' ,number: 23}, function() {alert('Ihre Daten wurden gespeichert.');}); Wenn Sie wirklich komplexen Ajax-Code wünschen, verwenden Sie die Funktion $.ajax(). Sie können den Datentyp angeben XML, HTML, Skript oder JSON, jQuery bereitet die Ergebnisse automatisch für Sie vor und Ihre Rückruffunktion kann die Daten sofort verwenden. Sie können auch die Rückruffunktionen beforeSend, Fehler, Erfolg und Vollständig festlegen, um dem Benutzer weitere Hinweise zum Ajax zu geben Darüber hinaus gibt es einige Parameter, mit denen Sie das Zeitlimit für Ajax-Anfragen oder den Status „Zuletzt geändert“ einer Seite festlegen können. Listing5 zeigt ein Beispiel für das Abrufen eines XML-Dokuments und die Verwendung der oben genannten Methode Beispiel einiger Parameter:
Listing 5. Komplexes Ajax einfach gemacht mit $.ajax()
$.ajax({url: 'document.xml',type: 'GET',dataType: 'xml',timeout: 1000, error: function (){alert('Fehler beim Laden des XML-Dokuments');},success: function(xml){// etwas mit XML tun}}); Wenn Sie erfolgreich XML-Feedback erhalten, können Sie jQuery einfach zum Durchlaufen des XML-Dokuments verwenden
Wie Sie es mit HTML tun, ist es sehr einfach, eine XML-Datei zu bearbeiten und den Inhalt in die Seite zu integrieren.Listing6
erweitert die Erfolgsfunktion entsprechend jedem <item> im XML-Dokument auf der Seite
. Arbeiten mit XML mit jQuery
erfolgreich: function(xml){$(xml).find('item').each(function(){var item_text = $(this). text();$('<li>< /li>').html(item_text).appendTo('ol');});}