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

Ein HTML-Element erstellen und einen Verweis behalten

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

Prüfen, ob ein Element existiert

if ($("#someDiv").length)
{
    // It exists...
}

Eigene Selektoren schreiben

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

Answer 2

JQuery's data() Methode ist nützlich und nicht sehr bekannt. Sie ermöglicht es Ihnen, Daten an DOM-Elemente zu binden, ohne das DOM zu verändern.

Answer 3

Verschachtelung von Filtern

Sie können Filter verschachteln (als nickf zeigte hier ).

.filter(":not(:has(.selected))")

Answer 4

Ich bin wirklich kein Fan von der $(document).ready(fn) Abkürzung. Sicherlich wird dadurch der Code reduziert, aber auch die Lesbarkeit des Codes leidet darunter. Wenn Sie sehen $(document).ready(...) wissen Sie, was Sie vor sich haben. $(...) wird auf viel zu viele andere Arten verwendet, um auf Anhieb Sinn zu ergeben.

Wenn Sie mehrere Frameworks haben, können Sie jQuery.noConflict(); wie Sie sagen, aber Sie können auch eine andere Variable dafür zuweisen, etwa so:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

Sehr nützlich, wenn Sie mehrere Frameworks haben, die sich auf folgende Punkte reduzieren lassen $x(...) -Style anruft.

Answer 5

Ooooh, nicht zu vergessen jQuery-Metadaten ! Die Funktion data() ist großartig, aber sie muss über jQuery-Aufrufe gefüllt werden.

Anstatt die W3C-Konformität mit benutzerdefinierten Elementattributen wie z. B.:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

Verwenden Sie stattdessen Metadaten:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>