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

Gezielter Einsatz von jQuery-Skripten von Drittanbietern, z. B. zur Validierung von Formularfeldern oder zum Parsen von URLs. Es lohnt sich zu sehen, worum es geht, damit Sie wissen, wenn Sie das nächste Mal eine JavaScript-Anforderung haben.

Answer 2

Die Verwendung selbstausführender anonymer Funktionen in einem Methodenaufruf wie .append() um etwas zu iterieren. I.E.:

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

Ich verwende dies, um Dinge zu wiederholen, die zu groß und unbequem wären, um sie aus meiner Verkettung herauszulösen.

Answer 3

Die Verwendung von .stop(true,true) beim Auslösen einer Animation verhindert, dass die Animation wiederholt wird. Dies ist besonders hilfreich für Rollover-Animationen.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Answer 4

Leitungsunterbrechungen und Verkettbarkeit

Bei der Verkettung mehrerer Aufrufe von Sammlungen...

$("a").hide().addClass().fadeIn().hide();

Sie können die Lesbarkeit mit Zeilenumbrüchen erhöhen. Zum Beispiel so:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

Answer 5

Dieser Beitrag geht an Kobi .

Betrachten Sie den folgenden Codeschnipsel:

// hide all elements which contains the text "abc"
$("p").each(function ()
{
    var that = $(this);

    if (that.text().indexOf("abc") > -1) that.hide();
});    

Hier ist eine Kurzschrift, die etwa doppelt so schnell ist:

$("p.value:contains('abc')").hide();