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

Der "endet mit"-Elementselektor eignet sich hervorragend für die Entwicklung von ASP.NET-Webformularen, da Sie sich nicht um die vorangestellte ctl00-Irritation kümmern müssen:

$("[id$='txtFirstName']");

Wie in den Kommentaren erwähnt, kann dieser Selektor (wie jede Abstraktionsebene) bei unvorsichtiger Verwendung langsam sein. Ziehen Sie es vor, den Selektor auf ein enthaltendes Element zu beschränken, z. B.,

$(".container [id$='txtFirstName']");

um die Anzahl der zu durchlaufenden Elemente zu verringern.

jQuery-Dokumentation

Answer 2

Konfliktfreier Modus

jQuery.noConflict();

"Führen Sie diese Funktion aus, um die Kontrolle über die $ Variable an die Bibliothek zurück, die sie zuerst implementiert hat. Dies hilft sicherzustellen, dass jQuery nicht in Konflikt mit der $ Objekt anderer Bibliotheken.

Wenn Sie diese Funktion verwenden, können Sie auf jQuery nur über die jQuery Variable. Zum Beispiel, wo Sie früher $("div p") müssen Sie nun Folgendes tun jQuery("div p") ".

Answer 3

Zeilenindex im Namen inkrementieren

Hier ist eine elegante Möglichkeit, den Zeilenindex eines geklonten Eingabeelements zu erhöhen, wenn der Name des Eingabeelements einen Zeilenindex enthält wie '0_row' :

$(this).attr('name', $(this).attr('name').replace(/^\d+/, function(n){ return ++n; }));

Der Name des geklonten Elements lautet nun '1_row'

Answer 4

Eine schamlose Werbung... Das jQuery-Vorlagen-Plugin: Implementierung komplexer Logik mit Render-Funktionen

Das neue jQuery-Vorlagen-Plugin ist großartig. Davon abgesehen, sind die doppelt geschwungenen Klammervorlagen-Tags sind nicht gerade mein Fall. In einer komplexeren komplexen Vorlage verdecken die Tags die Vorlagenauszeichnung, und die Implementierung von Logik über einfache if/else-Anweisungen hinaus ist eine Qual.

Nach dem Herumprobieren mit dem Plug-in ein paar Stunden herumgespielt hatte, begann mein Kopf zu schmerzen bei dem Versuch, das Markup in meiner Vorlage von den Millionen von doppelten geschweiften Klammern zu unterscheiden.

Also habe ich eine Aspirin genommen und mit der Arbeit begonnen. an einer Alternative

Answer 5

Bindung an ein Ereignis und sofortige Ausführung des Ereignishandlers:

$('selector').bind('change now', function () { // bind to two events: 'change' and 'now'
    // update other portions of the UI
}).trigger('now'); // 'now' is a custom event

Das ist wie

function update() {
    // update other portions of the UI
}
$('selector').change(update);
update();

aber ohne die Notwendigkeit, eine separate benannte Funktion zu erstellen.