jQuery Tipps und Tricks

Question

Syntax

• Kurzform für das Ready-Event von roosteronacid
• Zeilenumbrüche und Verkettbarkeit von roosteronacid
• Verschachtelte Filter von Nathan Long
• Eine Sammlung zwischenspeichern und Befehle in der gleichen Zeile ausführen von roosteronacid
• Enthält Selektor von roosteronacid
• Definieren von Eigenschaften bei der Elementerstellung von roosteronacid
• Zugriff auf jQuery-Funktionen wie auf ein Array von roosteronacid
• Die Funktion noConflict - Freigeben der Variablen $ von Oli
• Die $-Variable im noConflict-Modus isolieren von nickf
• Konfliktfreier Modus von roosteronacid

Datenspeicherung

• Die Datenfunktion - Daten an Elemente binden von TenebrousX
• Unterstützung von HTML5-Datenattributen, auf Steroiden! von roosteronacid
• Das jQuery-Metadaten-Plugin von Filip Dupanovic

Optimierung

• Optimierung der Leistung komplexer Selektoren von roosteronacid
• Der Kontextparameter von lupefiasco
• Suchen speichern und wiederverwenden von Nathan Long
• Erstellen eines HTML-Elements und Beibehalten eines Verweises, Prüfen, ob ein Element existiert, Schreiben eigener Selektoren von Andreas Grech

Sonstiges

• Überprüfung des Index eines Elements in einer Sammlung von redsquare
• Live-Ereignishandler von TM
• Ersetzen Sie anonyme Funktionen durch benannte Funktionen von ken
• Microsoft AJAX-Framework und jQuery-Brücke von Slace
• jQuery-Tutorials von egyamado
• Elemente aus einer Sammlung entfernen und Verkettbarkeit erhalten von roosteronacid
• Deklarieren Sie $this am Anfang von anonymen Funktionen von Ben
• FireBug lite, Hotbox-Plugin, erkennen, wenn ein Bild geladen wurde und Google CDN von Colour Blend
• Umsichtige Verwendung von jQuery-Skripten Dritter von harriyott
• Die jeweilige Funktion von Jan Zich
• Formular-Erweiterungen-Plugin von Chris S
• Asynchrone jede Funktion von OneNerd
• Das jQuery-Vorlagen-Plugin: Implementierung komplexer Logik mit Render-Funktionen von roosteronacid

Answer 1

Live-Ereignis-Bearbeiter

Setzen Sie einen Eventhandler für tout Element, das mit einem Selektor übereinstimmt, auch wenn es dem DOM nach dem ersten Laden der Seite hinzugefügt wird:

$('button.someClass').live('click', someFunction);

Dies ermöglicht es Ihnen, Inhalte über Ajax zu laden, oder fügen Sie sie über Javascript und haben die Event-Handler bekommen richtig für diese Elemente automatisch eingerichtet.

Ebenso können Sie die Bearbeitung von Live-Ereignissen beenden:

$('button.someClass').die('click', someFunction);

Diese Live-Event-Handler haben einige Einschränkungen im Vergleich zu regulären Ereignissen, aber sie funktionieren in den meisten Fällen hervorragend.

Weitere Informationen finden Sie auf der jQuery-Dokumentation .

UPDATE: live() y die() sind in jQuery 1.7 veraltet. Siehe http://api.jquery.com/on/ y http://api.jquery.com/off/ für ähnliche Ersatzfunktionen.

UPDATE2: live() wurde lange veraltet, auch vor jQuery 1.7. Für Versionen jQuery 1.4.2+ vor 1.7 verwenden Sie delegate() y undelegate() . Die live() Beispiel ( $('button.someClass').live('click', someFunction); ) kann umgeschrieben werden mit delegate() so: $(document).delegate('button.someClass', 'click', someFunction); .

Answer 2

Ersetzen Sie anonyme Funktionen durch benannte Funktionen. Dies ist wirklich über den jQuery-Kontext, aber es kommt ins Spiel mehr scheint es, wenn mit jQuery, aufgrund seiner Abhängigkeit von Callback-Funktionen. Die Probleme, die ich mit anonymen Inline-Funktionen habe, sind, dass sie schwieriger zu debuggen sind (es ist viel einfacher, einen Callstack mit eindeutig benannten Funktionen zu betrachten, anstatt 6 Ebenen von "anonymous"), und auch die Tatsache, dass mehrere anonyme Funktionen innerhalb der gleichen jQuery-Kette unhandlich zu lesen und/oder zu pflegen werden können. Außerdem werden anonyme Funktionen in der Regel nicht wiederverwendet; andererseits ermutigt mich die Deklaration von benannten Funktionen dazu, Code zu schreiben, der mit größerer Wahrscheinlichkeit wiederverwendet wird.

Eine Illustration; anstelle von:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

Ich bevorzuge:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Answer 3

Definieren von Eigenschaften bei der Elementerstellung

In jQuery 1.4 können Sie ein Objektliteral verwenden, um beim Erstellen eines Elements Eigenschaften zu definieren:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... Sie können sogar Stile hinzufügen:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

Hier ist ein Link zur Dokumentation .

Answer 4

Anstatt einen anderen Alias für das jQuery-Objekt zu verwenden (bei Verwendung von noConflict), schreibe ich meinen jQuery-Code immer, indem ich ihn in eine Closure einpacke. Dies kann in der Funktion document.ready geschehen:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

Alternativ können Sie auch so vorgehen:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

Ich finde, das ist am besten tragbar. Ich habe an einer Website gearbeitet, die sowohl Prototype als auch jQuery gleichzeitig verwendet, und diese Techniken haben alle Konflikte vermieden.

Answer 5

Überprüfen Sie den Index

jQuery hat .index, aber es ist ein Schmerz zu verwenden, wie Sie die Liste der Elemente benötigen, und übergeben Sie in das Element, das Sie den Index von wollen:

var index = e.g $('#ul>li').index( liDomObject );

Das Folgende ist viel einfacher:

Wenn Sie den Index eines Elements innerhalb einer Menge (z. B. Listenelemente) in einer ungeordneten Liste wissen wollen:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});