Was Sie über jQuery 1.3 wissen müssen

Die Webentwicklungs-Community wurde am 14. Januar 2009, als jQuery Version 1.3.0 offiziell veröffentlicht wurde, sehr begeistert. jQuery 1.3 bringt erhebliche Verbesserungen mit sich, besonders wenn es um Geschwindigkeit geht. Darüber hinaus konnten die Entwickler jQuery so klein wie möglich halten und dabei einige großartige und häufig angeforderte Funktionen hinzufügen. Heute werden wir uns eingehend mit den neuen Funktionen beschäftigen und erfahren, wie Sie das Beste daraus machen können.

Erste Schritte und Upgrade

Wenn Sie jQuery noch nicht kennen und die neueste Version herunterladen müssen, besuchen Sie die jQuery-Startseite und klicken Sie auf den Download-Link, um zu beginnen. Wenn Sie ein Upgrade von einer früheren Version durchführen, werden Sie erfreut sein, dass das API konsistent und mit älteren Versionen kompatibel ist. Um ein Upgrade durchzuführen, aktualisieren Sie einfach die jQuery-Version auf Ihrem Server und verknüpfen Sie sie ordnungsgemäß. Y In diesem Artikel werden wir alle Änderungen besprechen, die Probleme mit Ihrem aktuellen Code verursachen können.

Sizzle CSS Selector Engine

Die Entwickler von jQuery haben mit ihrer css-Selector-Engine einen großen Schritt nach vorne gemacht und ein eigenständiges Projekt namens "Sizzle" gestartet. Sizzle ist jetzt das CSS-Auswahlmodul für jQuery und wird von der Dojo Foundation betrieben. Sizzle sieht bereits vielversprechend aus für mehr Frameworks als nur jQuery, da es offen ist und für alle Entwickler verfügbar ist, die es in ihren Projekten verwenden möchten. Weitere Informationen zu Sizzle finden Sie auf der jQuery-Release-Seite und auf der Homepage von Sizzle. jQuery arbeitet derzeit mit Prototype, Dojo, Yahoo UI, MochiKit, TinyMCE und vielen weiteren Bibliotheken zusammen, um diese Engine noch leistungsfähiger zu machen.

Viel schnellere Auswahlleistung

Mit der Veröffentlichung eines neuen Motors kommt eine wesentlich schnellere Leistung zustande. in manchen Fällen über 400% schneller, abhängig vom verwendeten Browser. jQuery veröffentlichte ihre Testergebnisse mit Selektoren, die die Leute tatsächlich verwenden (die wir im nächsten Abschnitt dargestellt haben). In der Grafik unten finden Sie die neuen Ergebnisse der Auswahl.

Gemeinsame Selektoren und ihre Geschwindigkeit

Wie bereits erwähnt, basierten die Selektor-Leistungstests auf den von den Benutzern tatsächlich verwendeten Selektoren. Ich fand diese Daten an sich interessant und Sie finden sie hier. Es ist jedoch nur in einem Textformat und ich mag Diagramme und Diagramme. Eine der Dingen, die mir auffielen, war, wie ein so kleiner Prozentsatz von Menschen die Sichtbarkeitsauswahl nutzte. Nachfolgend finden Sie die Selektoren, die Entwickler heutzutage am häufigsten in jQuery-Skripts verwenden.

jQuery API von Remy Sharp

Eine weitere wirklich aufregende Sache bei der Veröffentlichung von jQuery 1.3 ist die Veröffentlichung eines neuen jQuery-API-Browsers, der von Remy Sharp erstellt wurde. Sie können über das Internet darauf zugreifen, um eine beliebige jQuery-Methode oder -Funktion zu suchen. Noch besser ist es, als Offline-Browser mit dem Adobe Air Flash-Installationsprogramm herunterzuladen. Grundsätzlich macht die jQuery-API alle Informationen oder Dokumentationen mit oder ohne Internetverbindung mit wenigen Klicks zugänglich.

Über:Offline-Browser läuft.

Kein Browser-Sniffing mehr!

Bis jetzt hat jQuery einen Prozess ausgeführt, der als Browser-Sniffing bezeichnet wird, um die Aktion zu bestimmen, die der Code ausführen soll. Der Nachteil dabei ist, dass davon ausgegangen wird, dass immer ein Fehler oder ein Feature vorhanden ist. jQuery überwindet dies, indem ein einzelnes Objekt verwendet wird, das als jQuery.support bezeichnet wird, und es wird kein Sängerbenutzer-Agent mehr ausgewählt. John erklärt, wie jQuery.support selbst am besten funktioniert:

Wir verwenden eine Technik namens Feature Detection, bei der wir eine bestimmte Browserfunktion oder einen Fehler simulieren, um ihre Existenz zu überprüfen. Wir haben alle Prüfungen, die wir in jQuery verwenden, in einem einzigen Objekt zusammengefasst: jQuery.support. Weitere Informationen dazu, zur Funktionserkennung und zu den Funktionen dieser Funktion finden Sie in der Dokumentation zu jQuery.support.

Was bedeutet das am Ende? Dies bedeutet, dass jQuery- und jQuery-Plugins mit der Zeit viel zuverlässiger werden, da wir nicht mehr auf das Browser-Sniffing angewiesen sind, um einen bestimmten Browser / Benutzeragenten zu bestimmen. John merkt auch an, dass jQuery.browser immer noch in jQuery bleibt und noch eine Weile bestehen bleibt. Es ist veraltet und es wird empfohlen, stattdessen die Funktionserkennung zu verwenden.

Neue Live-Events und Event-Delegierung

Eine aufregende und sicherlich nützliche Funktion, die mit 1.3 veröffentlicht wurde, ist die neue Funktion "Live Events". Live-Ereignisdelegierung bedeutet, wenn einem Element ein Ereignishandler zugeordnet ist, wird bei allen weiteren erstellten Elementen auch dieser Ereignishandler angehängt. Nimm den Code, der in der Live-Dokumentation enthalten ist.

 $ ("p"). live ("click", function () $ (this) .after ("

Noch ein Absatz!

"););

Auf den ersten Blick fragen Sie sich vielleicht: Warum sollte ich nicht einfach einen Click-Event-Handler an das p-Tag anhängen? Bei genauerer Betrachtung stellen wir fest, dass alle nach dem aktuellen Absatz eingefügten p-Elemente auch den Event-Handler enthalten, wodurch der Effekt uneingeschränkt genutzt werden kann. Weitere Informationen zu den Live-Events finden Sie in den jQuery-Dokumenten.

Close () vorstellen

Ein weiteres großartiges Feature von 1.3 wurde angehäuft, und die Entwickler gaben uns am nächsten (), was genau das tut, was Sie denken. Die Funktion close () kann verwendet werden, um das nächstgelegene Element innerhalb eines bestimmten Parametersatzes zu finden. Sehen wir uns noch einmal die Demo an.

 $ (document) .bind ("click", Funktion (e) $ (e.target) .closest ("li"). toggleClass ("highlight"););

Im obigen Code binden wir eine Klickfunktion an das aktuelle Dokument und fügen / entfernen die Klasse 'Highlight' zum nächstgelegenen li-Element, wenn ein Benutzer klickt. Wenn kein Element gefunden wird, wird das Dokument weiter nach oben verschoben, bis es eine Übereinstimmung findet. Wenn keine Übereinstimmung gefunden wird, wird nichts ausgeführt. Erfahren Sie mehr über das Befahren mit dem nächstgelegenen ().

Schnellere DOM-Manipulation und HTML-Einfügung

Bei der DOM-Manipulation und beim Einfügen / Erstellen neuer HTML-Elemente konnte jQuery eine deutliche Geschwindigkeitsverbesserung feststellen. Dies würde für die Verwendung von Methoden wie .insertBefore () und append () usw. gelten. Um eine bessere Vorstellung von den Geschwindigkeitsänderungen zu erhalten, werden wir uns einen anderen, erstaunlichen Graphen anschauen.

Schneller ausblenden / Ergebnisse anzeigen

Es ist sinnvoll, dass sich die Entwickler Zeit genommen haben, um die Geschwindigkeit der Hide / Show-Effekte zu erhöhen. Dies sind zwei der am häufigsten verwendeten jQuery-Effekte. Geschwindigkeitsergebnisse siehe unten.

Schneller Offset () Ergebnisse

Wenn Sie in Ihren jQuery-Skripts häufig offset () verwenden, werden Sie erfreut sein, dass sich auch die Offsetgeschwindigkeit erheblich verbessert hat. Falls Sie sich gefragt haben, erhält offset () einfach den aktuellen Versatz des übereinstimmenden Elements relativ zum Dokument. Ergebnisse siehe unten.

Andere Funktionen, die es zu beachten gilt

  • Die ready () -Methode wartet nicht länger auf das Laden der CSS. Das Skript sollte nach den CSS-Dateien platziert werden.
  • Das '@' in [@attr] wurde in 1.3 entfernt und ist schon lange nicht mehr aktuell. Um ein Upgrade durchzuführen, müssen Sie einfach das @ entfernen..
  • John empfiehlt, Ihr Bestes zu tun, um sicherzustellen, dass Ihre Seiten im Standardmodus ausgeführt werden. Wenn Sie im Quirks-Modus laufen, besteht die Gefahr, dass einige Fehler auftreten, insbesondere in Safari.
  • Safari 2 wird nicht mehr unterstützt.
  • Direkt aus der Dokumentation: "Wenn Sie ab jQuery 1.3 eine Animationsdauer von 0 angeben, setzt die Animation die Elemente synchron auf ihren Endzustand (dies unterscheidet sich von früheren Versionen, bei denen eine kurze asynchrone Verzögerung vor dem Endzustand würde gesetzt werden). "
  • Toggle () akzeptiert jetzt einen booleschen Wert.
  • Aus der Dokumentation: "Complex: not () -Ausdrücke sind jetzt gültig. Zum Beispiel:: nicht (a, b) und: nicht (div a)."

Zusätzliche Ressourcen

  • jQuery 1.3 Versionsdokumentation

    Ihr erster Halt, um alles und alles, was in dieser Version enthalten ist, herauszufinden. Und wenn Sie noch mehr Grafiken und Diagramme wünschen, können Sie sie auch dort finden.

    Besuche die Website

  • jQuery-API

    Vergessen Sie nicht, den neuen jQuery API / Offline-Browser auszuprobieren. Er erspart Ihnen viel Zeit und Fragen, wenn Sie nicht weiterkommen.

    Besuche die Website

  • jQuery für absolute Einsteiger-Videoserien

    Jeffrey hat im ThemeForest Blog eine hervorragende 15-teilige Serie mit einer Vielzahl von jQuery-Tipps, -Tricks und -Techniken erstellt. Verpassen Sie es nicht!

    Besuche die Website