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

Unterstützung von HTML5-Datenattributen, auf Steroiden!

Le site Datenfunktion wurde bereits erwähnt. Mit ihm können Sie Daten mit DOM-Elementen verknüpfen.

Vor kurzem hat das jQuery-Team die Unterstützung für HTML5 benutzerdefinierte Daten-*-Attribute . Und als ob das noch nicht genug wäre, haben sie die Datenfunktion mit Steroiden gefüttert, was bedeutet, dass Sie in der Lage sind, komplexe Objekte in Form von JSON zu speichern, direkt in Ihrem Markup.

Das HTML:

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

Das JavaScript:

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!

Answer 2

Hinzufügen eines Selektors für Elemente oberhalb des Falzes

Als jQuery-Selektor-Plugin

 $.extend($.expr[':'], {
 "aboveFold": function(a, i, m) {
   var container = m[3],
   var fold;
  if (typeof container === "undefined") {
     fold = $(window).height() + $(window).scrollTop();
  } else {
     if ($(container).length == 0 || $(container).offset().top == null) return false;
     fold = $(container).offset().top + $(container).height();
  }
  return fold >= $(a).offset().top;
 } 
});

Uso:

$("p:aboveFold").css({color:"red"});

Vielen Dank an scottymac

Answer 3

(Dies ist eine unverschämte Werbung)

Anstatt wiederholten Code für die Formularbearbeitung zu schreiben, können Sie Folgendes ausprobieren dieses Plugin Ich schrieb, dass fügt hinzu, dass die fließende API von jQuery durch Hinzufügen von Formular-bezogenen Methoden:

// elementExists is also added
if ($("#someid").elementExists())
  alert("found it");

// Select box related
$("#mydropdown").isDropDownList();

// Can be any of the items from a list of radio boxes - it will use the name
$("#randomradioboxitem").isRadioBox("myvalue");
$("#radioboxitem").isSelected("myvalue");

// The value of the item selected. For multiple selects it's the first value
$("#radioboxitem").selectedValue();

// Various, others include password, hidden. Buttons also
$("#mytextbox").isTextBox();
$("#mycheck").isCheckBox();
$("#multi-select").isSelected("one", "two", "three");

// Returns the 'type' property or 'select-one' 'select-multiple'
var fieldType = $("#someid").formElementType();

Answer 4

Grundsätzlich können Sie versuchen, den grundlegenden Selektor-Mechanismus von jQuery zu emulieren, indem Sie Ihr eigenes kleines Framework schreiben (das ist einfacher als es klingt). Das wird nicht nur Ihr Javascript unendlich verbessern, sondern Ihnen auch helfen zu verstehen, warum $("#elementId") von jQuery um ein Vielfaches schneller ist als $(".elementClass") und auch schneller als $("element#elementId") (was auf den ersten Blick vielleicht kontra-intuitiv ist).

Dies wird Sie auch dazu zwingen, objektorientiertes Javascript zu erlernen, was Ihnen helfen wird, Ihren Code modularer zu organisieren und so die Spaghetti-Code-Natur zu vermeiden, die schwere jQuery-Skriptblöcke annehmen können.

Answer 5

Zugriff auf iFrame-Elemente Iframes sind nicht die beste Lösung für die meisten Probleme, aber wenn Sie brauchen, um eine es ist sehr praktisch zu wissen, wie man die Elemente innerhalb es mit Javascript zugreifen. jQuery's contents() Methode macht dies ein Kinderspiel, so dass wir die iframe's DOM in einer Zeile wie diese zu laden:

$(function(){
    var iFrameDOM = $("iframe#someID").contents();
    //Now you can use <strong>find()</strong> to access any element in the iframe:

    iFrameDOM.find(".message").slideUp();
    //Slides up all elements classed 'message' in the iframe
});

Quelle