Share
Wenn Sie, wie viele Flash-Entwickler, HTML5 für Ihre Webanwendungen verwenden möchten, sind Sie mit jQuery ganz sicher in Kontakt gekommen. Es ist eine sehr beliebte JavaScript-Bibliothek, die von einem großen Prozentsatz der am häufigsten besuchten Websites verwendet wird. Aber worum geht es hier??
Wenn Sie sich mit AS3 auskennen, kennen Sie im Grunde schon viel JavaScript. Die beiden Sprachen sind sehr ähnlich. Es ist also verlockend, direkt in den Code einzusteigen, aber es gibt einige wichtige Konzepte, die Sie zuerst verstehen müssen. Eines davon ist die Idee des DOM.
Wenn Sie eine Webseite laden, wandelt Ihr Browser flaches HTML in eine baumartige Struktur von JavaScript-Objekten um, die als DOM (Document Object Model) bezeichnet wird. Das JavaScript-DOM ist der ActionScript-Anzeigeliste sehr ähnlich. Wenn Sie ein Flex-Entwickler sind, können Sie die Ähnlichkeiten zwischen MXML und HTML erkennen.
In Flash können wir auf bestimmte Anzeigeobjekte zugreifen, indem wir durch die Anzeigeliste zu ihnen navigieren, z stage.getChildAt (3) .getChildAt (0), aber das ist ziemlich lächerlich. Stattdessen geben wir eher Instanznamen von Anzeigeobjekten (über die Flash-IDE) an oder speichern Referenzen in Variablen, Arrays oder Objekteigenschaften wie dialogBox.okButton = new SimpleButton ().
In JavaScript haben wir könnte Bauen Sie unser DOM vollständig über JS auf und teilen Sie dem Browser mit, dass er es wiedergeben soll. Dies ist jedoch ein ungewöhnlicher Ansatz. Es ist viel wahrscheinlicher, das DOM über HTML zu definieren, vielleicht mit einer kleinen JS-Erweiterung. JavaScript bietet also verschiedene Methoden, um auf Elemente des DOM zuzugreifen.
Die einfachste davon ist document.getElementById (). Wenn wir ein HTML-Dokument wie folgt definiert haben:
Beispielseite Hier ist ein Beispieltext.
… dann document.getElementById ("Beispiel") wird uns das hervorgehoben bekommen Spanne Objekt aus dem DOM. Wir könnten dann eine Sekunde hinzufügen p Tag wie folgt:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Weitere Beispieltexte, die wir spontan erstellt haben."); newPara.appendChild (newTextNode); document.getElementById ("example"). appendChild (newPara); Dies würde das DOM aktualisieren, sodass es dem entspricht, was erstellt worden wäre, wenn der ursprüngliche HTML-Code folgendermaßen lautet:
Beispielseite Hier ist ein Beispieltext.
Weitere Beispieltexte, die wir spontan erstellt haben.
Was wäre, wenn Sie dann auf die beiden zugreifen wollten p Elemente? Wir können nicht direkt auf sie zugreifen document.getElementById (), da sie keine ID haben, können wir aber verwenden document.getElementsByTagName ("p") um ein Array zu erhalten, das beide enthält.
Und wenn wir noch einen gehabt hätten Spanne, so was:
Hier ist ein Beispieltext.
Weitere Beispieltexte, die wir spontan erstellt haben.
Eine zweite Spanne.
Wir interessieren uns nicht für diese Absätze.
… Und wir wollten nur die ersten beiden bekommen p Tags könnten wir anrufen document.getElementById ("example1"). getElementsByTagName ("p") Diese beiden DOM-Funktionen können auf jeder Ebene der Baumstruktur verwendet werden, genau wie bei jedem Flash DisplayObjectContainer hat Methoden wie getChildAt ().
Das ist einfach genug zu verstehen, aber es gibt Probleme. Das erste, was Sie vielleicht nicht überrascht, betrifft Internet Explorer.
Impressive Webs bietet eine großartige Übersicht über Internet Explorer getElementById () Problem. Im Wesentlichen, wenn Sie ein solches HTML-Element haben:
… Dann in den meisten Browsern, document.getElementById ("exampleName") werden nicht gib dir das Spanne fraglich, aber in IE7 werden. (Andere Browser könnten verwenden document.getElementsByName ("exampleName") [0] um dieses besondere zurückzugeben Spanne.)
Dies bedeutet, dass wir, um in allen Browsern konsistent zu sein (und vorausgesetzt, wir können den HTML-Code nicht ändern können), Code wie folgt schreiben:
var theSpan; if (usingIE) // Ich werde nicht erklären, wie der Browser hier erkannt wird. var temp = document.getElementById ("exampleId"); // Dies könnte ein Element mit dem Namen "exampleId" zurückgegeben haben. Daher müssen wir Folgendes prüfen: if (temp.getAttribute ("id") == "exampleId") theSpan = temp; else theSpan = document.getElementById ("exampleId"); Im Allgemeinen könnten wir das in eine wiederverwendbare Funktion einbinden:
function getElById (id) if (usingIE) var temp = document.getElementById (id); if (temp.getAttribute ("id") == id) return temp; else theSpan = document.getElementById (id); Großartig! Leider gibt es so viele dieser irritierenden kleinen Unterschiede; Es wird Sie wahrscheinlich überraschen, wenn Sie aus einem direkten Flash-Hintergrund kommen, wobei "Kompatibilitätsproblem" im Allgemeinen bedeutet, dass der Flash Player auf bestimmten Plattformen etwas langsam ist.
jQuery löst das. Es bespricht die Risse zwischen verschiedenen Browsern mit eigenen Funktionen. Wenn der Browser des Benutzers mindestens so gut wie IE6 ist, kann Ihr Code eine konsistente Benutzeroberfläche haben.
Dies ist nicht die einzige Möglichkeit, mit der jQuery JavaScript vereinfacht.
Gehen wir zurück zu diesem HTML-Snippet und nehmen wir an, wir möchten das hervorgehobene abrufen p Elemente aus dem DOM:
Hier ist ein Beispieltext.
Weitere Beispieltexte, die wir spontan erstellt haben.
Eine zweite Spanne.
Wir interessieren uns nicht für diese Absätze.
Mit jQuery können wir einfach schreiben:
jQuery ("# example1 p") Das ist alles was wir brauchen! #Beispiel 1 sagt "Holen Sie sich das Element mit einer ID von Beispiel 1" und p sagt "Holen Sie sich alle p Elemente, die dem Element untergeordnet sind ". Es gibt ein" jQuery-Objekt "zurück, bei dem es sich um ein JavaScript-Objekt handelt, das die beiden enthält p Elemente selbst aus dem JS DOM sowie einige zusätzliche Eigenschaften und Methoden, die für jQuery spezifisch sind.
Wir können es noch kürzer machen, indem wir es ersetzen jQuery mit $ - Hier gibt es kein Rätsel. $ ist nur ein kurzer Variablenname. Vergleichen Sie es mit nativem JavaScript-Code:
// regulärer JS, ohne Browser-Kompatibilität: document.getElementById ("example1"). getElementsByTagName ("p") // jQuery, mit browserübergreifender Kompatibilität: $ ("# example1 p") Es ist nicht nur kürzer, sondern konsistent mit CSS, was es einfach macht, es zu finden. Wir könnten genau das gleiche verwenden Wähler wie in unserem jQuery () Aufruf zum Stilieren dieser spezifischen Absätze in einem CSS-Stylesheet:
# example1 p color: red
Das ist nur ein sehr einfaches Beispiel. Ich werde nicht ins Detail gehen, aber ich bin sicher, dass Sie den Vorteil erkennen können, dass Sie in CSS und jQuery die gleichen Selektoren verwenden können.
Ich habe erwähnt, dass die jQuery-Objekte von a zurückgegeben werden $ () Aufruf hatte zusätzliche Methoden und Eigenschaften. Diese geben Ihnen eine einfache Syntax für das Schreiben anderer gebräuchlicher Codeteile.
Zum Beispiel könnten wir einen Mausklick-Ereignislistener und eine Handler-Funktion zu beiden hinzufügen p Elemente wie so:
$ ("# example1 p"). click (function () alert ("Sie haben auf einen Absatz geklickt!");); Oder Sie könnten sie alle unsichtbar machen:
$ ("# example1 p"). hide (); Oder Sie könnten etwas allgemeineres JavaScript für sie verwenden:
var allText = ""; $ ("# example1 p"). each (function () allText + = $ (this) .text ();); In jedem Fall bietet jQuery eine einfache, kurze und konsistente Schreibweise. Das bedeutet, dass Sie schneller Code von Ihrem Kopf an den Browser übertragen können - und das nicht nur, weil weniger Zeichen erforderlich sind.
Da Flash seine Wurzeln in der Animation hat, sind wir daran gewöhnt, dass viele Tweening-Funktionen integriert sind - sowohl in der Flash-IDE als auch in der Tween Klasse, ganz zu schweigen von den verschiedenen verfügbaren Tweening-Bibliotheken.
JavaScript ist anders; Animation ist kein wesentlicher Bestandteil der Plattform. Aber kleine Tweens und Übergänge sind erwartete Teile der Benutzerinteraktion der modernen Web-App: Wenn ich einen neuen Kommentar zu einem Thread hinzufüge, wird dieser eingefügt. Wenn ich einen Artikel aus meinem Warenkorb entferne, blinkt er rot und verschwindet. Ohne diese sehen Apps unpoliert aus.
jQuery fügt diese kleinen Übergänge hinzu.
Nehmen wir zum Beispiel an, wir möchten, dass einer der oben genannten Absätze ausgeblendet wird, wenn er angeklickt wird. Einfach:
$ ("# example1 p"). click (function () $ (this) .fadeOut ();); Nichts dazu! Und du kannst eine Dauer und Ruf zurück zum ausblenden() Funktion, wenn Sie die Standardeinstellungen nicht mögen.
Für etwas mehr Kraft können wir das verwenden animieren() Methode. Dies entspricht im Wesentlichen einem Tween. Übergeben Sie eine Reihe von CSS-Eigenschaften und Werten, die animiert werden sollen, eine Dauer, eine Art der Erleichterung und einen Rückruf, und es erledigt alles für Sie.
Es ist nicht genau Greensock, aber es ist viel bequemer als das Schreiben dieser Effekte von Grund auf und ideal für Web-App-Schnittstellen.
Apropos…
In HTML sind natürlich einige UI-Komponenten integriert: Schaltflächen, Textfelder usw. HTML5 definiert einige neue, wie eine Popup-Kalenderauswahl und eine Farbauswahl (obwohl diese derzeit nur in Opera unterstützt werden)..
Diese reichen jedoch nicht aus, um eine vollständige, moderne Web-App-Oberfläche zu erstellen. Es gibt nichts, was mit Registerkarten auf einer Seite, einer Fortschrittsleiste oder sogar einem einfachen Dialogfenster (außerhalb von) zu tun hat warnen() und Prompt()).
Die jQuery-Benutzeroberfläche, eine optionale Bibliothek, die auf jQuery aufbaut, fügt diese zusätzlichen Widgets mit Methoden und Ereignissen hinzu, die mit der üblichen jQuery-Syntax übereinstimmen. Betrachten Sie es als JavaScript-Äquivalent zu Keith Peters AS3 MinimalComps. Die Demo-Seite zeigt es besser, als ich es erklären kann.
Jedes Widget kann benutzerdefinierte Designs unterstützen, sodass Sie eine einzelne Skin erstellen können, die zu Ihrer Website passt, und diese auf jede Komponente anwenden kann, um das Erscheinungsbild auf einmal zu ändern. Wieder: Konsistenz! Außerdem können Sie UI-bezogene Effekte auf andere Elemente anwenden. Ermöglichen, dass der Benutzer ein DOM-Element ziehen oder seine Größe ändern kann, oder ein Feld um eine Gruppe von Elementen klicken und ziehen, um sie zur Übermittlung auszuwählen.
Die Cross-Browser-Kompatibilität, die einfache Syntax, die Tween-Funktionen und die Elemente der Benutzeroberfläche sind in meinen Augen die Hauptvorteile von jQuery gegenüber dem einfachen JS. Es gibt jedoch andere Gründe, warum es Ihnen gefällt:
Warum also würde nicht verwendest du jQuery? Bei den meisten Technologieoptionen ist es wichtig, sicherzustellen, dass Sie das richtige Werkzeug für den Job verwenden. Wenn Sie eine einfache DOM-Struktur haben oder keine ausgefallenen Animationen und Übergänge benötigen oder hauptsächlich die Segeltuch Um Ihre Benutzeroberfläche anstelle von Widgets darzustellen, ist jQuery wahrscheinlich nicht erforderlich.
Wenn Sie bereits eine oder mehrere JavaScript-Bibliotheken verwenden (Dojo, MooTools, YUI usw.), stellen Sie möglicherweise fest, dass Sie die Funktionalität von jQuery nicht zusätzlich zu den angebotenen Funktionen benötigen. Aber mein Ziel in diesem Artikel ist nicht zu versuchen, Sie in einer bestimmten Bibliothek über einer anderen zu verkaufen.
Ich hoffe, dass dieser Artikel dazu beigetragen hat, zu erklären, was die große Sache um jQuery ist, insbesondere wenn Sie aus der Welt von AS3 und Flash kommen. Wenn Sie es lernen möchten, lesen Sie das jQuery-Tag auf Nettuts + - jQuery für absolute Anfänger ist ein guter Anfang.
Lassen Sie mich wissen, wenn Sie Fragen haben!
