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

Es scheint, dass die meisten interessanten und wichtigen Tipps bereits erwähnt wurden, so dass dies nur eine kleine Ergänzung ist.

Der kleine Tipp ist die jQuery.each(object, callback) Funktion. Jeder benutzt wahrscheinlich die jQuery.each(Rückruf) Funktion, um über das jQuery-Objekt selbst zu iterieren, da dies selbstverständlich ist. Die Dienstprogrammfunktion jQuery.each(object, callback) iteriert über Objekte und Arrays. Lange Zeit habe ich irgendwie nicht gesehen, wozu sie dienen könnte, abgesehen von einer anderen Syntax (mir macht es nichts aus, ganz altmodische Schleifen zu schreiben), und ich schäme mich ein wenig, dass ich ihre Hauptstärke erst kürzlich erkannt habe.

Die Sache ist die, dass seit der Körper der Schleife in jQuery.each(object, callback) ist eine Funktion erhalten Sie eine neue Reichweite jedes Mal in der Schleife, was besonders praktisch ist, wenn Sie Verschlüsse in der Schleife.

Mit anderen Worten: Ein typischer, weit verbreiteter Fehler ist es, etwas zu tun wie:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

Wenn Sie nun die Funktionen in der Datei functions Array, erhalten Sie dreimal eine Meldung mit dem Inhalt undefined was höchstwahrscheinlich nicht das ist, was Sie wollten. Das Problem ist, dass es nur eine Variable gibt i und alle drei Abschlüsse beziehen sich darauf. Wenn die Schleife beendet ist, wird der Endwert von i ist 3, und someArrary[3] es undefined . Sie können das Problem umgehen, indem Sie eine andere Funktion aufrufen, die die Schließung für Sie erstellt. Oder Sie verwenden die jQuery-Dienstprogramm, das es im Grunde tun es für Sie:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

Wenn Sie nun die Funktionen aufrufen, erhalten Sie wie erwartet drei Warnmeldungen mit dem Inhalt 1, 2 und 3.

Im Allgemeinen ist es nichts, was man nicht auch selbst tun könnte, aber es ist schön, es zu haben.

Answer 2

Elemente aus einer Sammlung entfernen und Verkettbarkeit erhalten

Bedenken Sie Folgendes:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

Le site filter() Funktion werden Elemente aus dem jQuery-Objekt entfernt. In diesem Fall: Alle Li-Elemente, die nicht den Text "Eins" oder "Zwei" enthalten, werden entfernt.

Answer 3

Verwenden Sie Filtermethoden über Pseudo-Selektoren, wenn möglich, so dass jQuery querySelectorAll (die viel schneller als Sizzle ist) verwenden können. Betrachten Sie diesen Selektor:

$('.class:first')

Die gleiche Auswahl kann auch über die Schaltfläche getroffen werden:

$('.class').eq(0)

Das ist sicher schneller, weil die anfängliche Auswahl von '.class' QSA-kompatibel ist.

Answer 4

Aktualisierung:

Fügen Sie dieses Skript einfach in Ihre Website ein, und Sie erhalten eine Firebug-Konsole, die in jedem Browser zum Debuggen angezeigt wird. Nicht ganz so umfangreich, aber immer noch sehr hilfreich! Vergessen Sie nicht, es zu entfernen, wenn Sie fertig sind.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Sehen Sie sich diesen Link an:

Von CSS-Tricks

Aktualisierung: Ich habe etwas Neues gefunden; es ist die JQuery Hotbox.

JQuery-Hotbox

Google hostet mehrere JavaScript-Bibliotheken auf Google Code. Wenn Sie sie von dort laden, sparen Sie Bandbreite und sie werden schnell geladen, da sie bereits zwischengespeichert wurden.

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

Oder

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Sie können dies auch verwenden, um zu erkennen, wann ein Bild vollständig geladen ist.

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

Die "console.info" von Firebug, mit der Sie Meldungen und Variablen auf dem Bildschirm ausgeben können, ohne Alert-Boxen verwenden zu müssen. Mit "console.time" können Sie ganz einfach einen Timer einrichten, um einen Haufen Code zu verpacken und zu sehen, wie lange es dauert.

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

Answer 5

Ändern des Typs eines Eingabeelements

Ich bin auf dieses Problem gestoßen, als ich versucht habe, den Typ eines Eingabeelements zu ändern, das bereits mit dem DOM verbunden ist. Sie müssen das vorhandene Element klonen, es vor dem alten Element einfügen und dann das alte Element löschen. Sonst funktioniert es nicht:

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");