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

Kurzform für das Ready-Event

Der explizite und ausführliche Weg:

$(document).ready(function ()
{
    // ...
});

Die Kurzform:

$(function ()
{
    // ...
});

Answer 2

Geben Sie bei der Kernfunktion von jQuery zusätzlich zum Parameter selector den Parameter context an. Die Angabe des Kontextparameters ermöglicht es jQuery, von einer tieferen Verzweigung im DOM anzufangen, anstatt von der DOM-Wurzel. Bei einem ausreichend großen DOM sollte die Angabe des Kontextparameters zu Leistungssteigerungen führen.

Beispiel: Findet alle Eingaben vom Typ Radio innerhalb des ersten Formulars im Dokument.

$("input:radio", document.forms[0]);

Referenz: http://docs.jquery.com/Core/jQuery#expressioncontext

Answer 3

Nicht wirklich nur jQuery, aber ich habe eine nette kleine Brücke für jQuery und MS AJAX gemacht:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

Es ist wirklich schön, wenn Sie viel ASP.NET AJAX tun, da jQuery von MS unterstützt wird jetzt mit einer schönen Brücke bedeutet es wirklich einfach, jQuery-Operationen zu tun:

$get('#myControl').j().hide();

Also das obige Beispiel ist nicht großartig, aber wenn Sie ASP.NET AJAX-Server-Steuerelemente schreiben, macht es einfach, jQuery in Ihrem Client-seitigen Steuerelement Implementierung haben.

Answer 4

Optimierung der Leistung komplexer Selektoren

Die Abfrage einer Teilmenge des DOM bei der Verwendung komplexer Selektoren verbessert die Leistung drastisch:

var subset = $("");

$("input[value^='']", subset);

Answer 5

Apropos Tipps und Tricks und auch einige Tutorials. Ich fand diese Reihe von Tutorials ( Video-Serie "jQuery für absolute Anfänger") por Jeffery Way sind SEHR HILFREICH.

Es richtet sich an Entwickler, die neu in jQuery sind. Er zeigt, wie man viele coole Sachen mit jQuery erstellen kann, wie Animationen, Erstellen und Entfernen von Elementen und mehr...

Ich habe eine Menge daraus gelernt. Er zeigt, wie einfach es ist, jQuery zu benutzen. Jetzt liebe ich es und ich kann jedes jQuery-Skript lesen und verstehen, auch wenn es komplex ist.

Hier ist ein Beispiel, das mir gefällt " Textgröße ändern "

1- jQuery...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- CSS-Styling...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

Diese Tutorials sind sehr zu empfehlen...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/