Tipps und Tricks zur jQuery

Syntax

• Abkürzung für das Ready-Event von Roosteronacid
• Zeilenumbrüche und Verkettbarkeit durch Hahnsäure
• Nesting Filter von Nathan Long
• Zwischenspeichern Sie eine Sammlung und führen Sie Befehle in derselben Zeile von roosteronacid aus
• Enthält Selektor von Roosteronacid
• Definieren von Eigenschaften bei der Elementerstellung durch Roosteronsäure
• Der Zugriff auf jQuery funktioniert wie ein Array von roosteronacid
• Die noConflict-Funktion - Freigabe der $ -Variablen durch Oli
• Isolieren Sie die Variable $ im noConflict-Modus mit nickf
• No- Conflict -Modus von Roosteronacid

Datenspeicher

• Die Datenfunktion - Daten von TenebrousX an Elemente binden
• Unterstützung für HTML5-Datenattribute bei Steroiden! durch Hahnsäure
• Das jQuery-Metadaten-Plug-In von Filip Dupanović

Optimierung

• Optimieren Sie die Leistung komplexer Selektoren durch Roosteronsäure
• Der Kontextparameter von lupefiasco
• Speichern und Wiederverwenden von Suchanfragen von Nathan Long
• Erstellen eines HTML-Elements und Beibehalten einer Referenz, Überprüfen, ob ein Element vorhanden ist, Schreiben Ihrer eigenen Selektoren von Andreas Grech

Sonstiges

• Überprüfen Sie den Index eines Elements in einer Sammlung mit redsquare
• Live Event Handler von TM
• Ersetzen Sie anonyme Funktionen durch benannte Funktionen durch Ken
• Microsoft AJAX Framework und jQuery Bridge von Slace
• jQuery-Tutorials von egyamado
• Entfernen Sie Elemente aus einer Sammlung und bewahren Sie die Verkettbarkeit durch Roosteronsäure
• Deklarieren Sie $ this zu Beginn anonymer Funktionen von Ben
• FireBug Lite, Hotbox-Plug-In, zeigt an, wann ein Bild geladen wurde, und Google CDN von Color Blend
• Vernünftige Verwendung von jQuery-Skripten von Drittanbietern durch harriyott
• Die jede Funktion von Jan Zich
• Formularerweiterungs-Plug-In von Chris S.
• Asynchrone Funktion von OneNerd
• Das jQuery-Vorlagen-Plug-In: Implementierung komplexer Logik mithilfe von Renderfunktionen von roosteronacid

Erstellen eines HTML-Elements und Beibehalten einer Referenz

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 */

Überprüfen, ob ein Element vorhanden ist

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

Schreiben Sie Ihre eigenen Selektoren

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

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

Die data()Methode von jQuery ist nützlich und nicht bekannt. Sie können Daten an DOM-Elemente binden, ohne das DOM zu ändern.

Verschachtelungsfilter

Sie können Filter verschachteln (wie hier gezeigt ).

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

Ich bin wirklich kein Fan der $(document).ready(fn)Abkürzung. Sicher, es verringert den Code, aber es verringert auch die Lesbarkeit des Codes erheblich. Wenn Sie sehen $(document).ready(...), wissen Sie, was Sie sehen. $(...)wird auf viel zu viele andere Arten verwendet, um sofort einen Sinn zu ergeben.

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

var $j = jQuery.noConflict();

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

Sehr nützlich, wenn Sie mehrere Frameworks haben, die auf $x(...)Aufrufe im Stil reduziert werden können.

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

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

<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>

Live-Event-Handler

Legen Sie einen Ereignishandler für jedes Element fest, das einem Selektor entspricht, auch wenn es nach dem ersten Laden der Seite zum DOM hinzugefügt wird:

$('button.someClass').live('click', someFunction);

Auf diese Weise können Sie Inhalte über Ajax laden oder über Javascript hinzufügen und die Ereignishandler automatisch für diese Elemente einrichten.

Um die Live-Ereignisbehandlung zu stoppen:

$('button.someClass').die('click', someFunction);

Diese Live-Event-Handler haben im Vergleich zu regulären Events einige Einschränkungen, funktionieren jedoch in den meisten Fällen hervorragend.

Weitere Informationen finden Sie in der jQuery-Dokumentation .

UPDATE: live()und die()sind in jQuery 1.7 veraltet. Ähnliche Ersatzfunktionen finden Sie unter http://api.jquery.com/on/ und http://api.jquery.com/off/ .

UPDATE2: live()wurde schon vor jQuery 1.7 lange veraltet. Für Versionen jQuery 1.4.2+ vor 1.7 verwenden Sie delegate()und undelegate(). Das live()Beispiel ( $('button.someClass').live('click', someFunction);) kann folgendermaßen umgeschrieben werden delegate(): $(document).delegate('button.someClass', 'click', someFunction);.

Ersetzen Sie anonyme Funktionen durch benannte Funktionen. Dies ersetzt wirklich den jQuery-Kontext, aber es kommt eher ins Spiel, als wenn man jQuery verwendet, da es auf Rückruffunktionen angewiesen ist. Die Probleme, die ich mit anonymen Inline-Funktionen habe, sind, dass sie schwieriger zu debuggen sind (viel einfacher, einen Callstack mit eindeutig benannten Funktionen zu betrachten, statt 6 Ebenen von "anonym") und auch die Tatsache, dass mehrere anonyme Funktionen innerhalb derselben vorhanden sind Die jQuery-Kette kann unhandlich zum Lesen und / oder Verwalten werden. Darüber hinaus werden anonyme Funktionen normalerweise nicht wiederverwendet. Andererseits ermutigt mich das Deklarieren benannter Funktionen, Code zu schreiben, der mit größerer Wahrscheinlichkeit wiederverwendet wird.

Eine Illustration; anstatt:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

Ich bevorzuge:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Eigenschaften bei der Elementerstellung definieren

In jQuery 1.4 können Sie ein Objektliteral verwenden, um Eigenschaften beim Erstellen eines Elements zu definieren:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... Sie können sogar Stile hinzufügen:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

Hier ist ein Link zur Dokumentation .

Anstatt einen anderen Alias ​​für das jQuery-Objekt zu verwenden (wenn noConflict verwendet wird), schreibe ich meinen jQuery-Code immer, indem ich alles in einen Abschluss einbinde. Dies kann in der Funktion document.ready erfolgen:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

Alternativ können Sie dies folgendermaßen tun:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

Ich finde das am tragbarsten. Ich habe an einer Site gearbeitet, die sowohl Prototype als auch jQuery gleichzeitig verwendet, und diese Techniken haben alle Konflikte vermieden.

Überprüfen Sie den Index

jQuery hat .index, aber es ist schwierig, es zu verwenden, da Sie die Liste der Elemente benötigen und das Element übergeben, dessen Index Sie möchten:

var index = e.g $('#ul>li').index( liDomObject );

Folgendes ist viel einfacher:

Wenn Sie den Index eines Elements innerhalb einer Menge (z. B. Listenelemente) innerhalb einer ungeordneten Liste kennen möchten:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

Abkürzung für das Ready-Event

Der explizite und ausführliche Weg:

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

Die Abkürzung:

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

Geben Sie in der Kernfunktion jQuery zusätzlich zum Auswahlparameter den Kontextparameter an. Durch Angabe des Kontextparameters kann jQuery von einem tieferen Zweig im DOM anstatt vom DOM-Stamm aus beginnen. Bei einem ausreichend großen DOM sollte die Angabe des Kontextparameters zu Leistungssteigerungen führen.

Beispiel: Findet alle Eingänge vom Typ Radio im ersten Formular des Dokuments.

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

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

Nicht wirklich nur jQuery, aber ich habe eine schöne 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 ausführen, da jQuery von MS unterstützt wird und jetzt eine schöne Brücke hat, was bedeutet, dass es wirklich einfach ist, jQuery-Operationen durchzuführen:

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

Das obige Beispiel ist also nicht besonders gut, aber wenn Sie ASP.NET AJAX-Serversteuerelemente schreiben, ist es einfach, jQuery in Ihrer clientseitigen Steuerelementimplementierung zu haben.

Optimieren Sie die Leistung komplexer Selektoren

Das Abfragen einer Teilmenge des DOM bei Verwendung komplexer Selektoren verbessert die Leistung drastisch:

var subset = $("");

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

Apropos Tipps und Tricks und einige Tutorials. Ich habe diese Reihe von Tutorials ( "jQuery for Absolute Beginners" -Videoserie) von Jeffery Way gefunden -Videoserie SEHR HILFREICH.

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

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

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

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>

Ich kann diese Tutorials nur empfehlen ...

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

Asynchrone Funktion von each ()

Wenn Sie wirklich komplexe Dokumente haben, in denen die Funktion jquery each () ausgeführt wird, sperrt der Browser während der Iteration und / oder Internet Explorer zeigt die Meldung "Möchten Sie dieses Skript weiter ausführen? " Auf. Diese Lösung spart den Tag.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

Die erste Möglichkeit, es zu verwenden, ist wie bei jedem ():

$('your_selector').forEach( function() {} );

Mit einem optionalen zweiten Parameter können Sie die Geschwindigkeit / Verzögerung zwischen den Iterationen angeben, die für Animationen nützlich sein kann ( das folgende Beispiel wartet zwischen den Iterationen 1 Sekunde ):

$('your_selector').forEach( function() {}, 1000 );

Denken Sie daran, dass Sie sich nicht darauf verlassen können, dass die Iterationen vor der nächsten Codezeile abgeschlossen sind, da dies asynchron funktioniert. Beispiel:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

Ich habe dies für ein internes Projekt geschrieben, und obwohl ich sicher bin, dass es verbessert werden kann, hat es für das funktioniert, was wir brauchten. Hoffen Sie also, dass einige von Ihnen es nützlich finden. Vielen Dank -

Syntaktische Kurzschrift-Zucker-Sache - Zwischenspeichern einer Objektsammlung und Ausführen von Befehlen in einer Zeile:

Anstatt:

var jQueryCollection = $("");

jQueryCollection.command().command();

Ich mache:

var jQueryCollection = $("").command().command();

Ein etwas "realer" Anwendungsfall könnte in diese Richtung gehen:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

Ich mag es, eine $thisVariable am Anfang anonymer Funktionen zu deklarieren , damit ich weiß, dass ich auf eine jQueried verweisen kann.

Wie so:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

Speichern Sie jQuery-Objekte in Variablen zur Wiederverwendung

Wenn Sie ein jQuery-Objekt in einer Variablen speichern, können Sie es wiederverwenden, ohne das DOM durchsuchen zu müssen, um es zu finden.

(Wie von @Louis vorgeschlagen, verwende ich jetzt $, um anzugeben, dass eine Variable ein jQuery-Objekt enthält.)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

Angenommen, Sie haben eine Liste mit Lebensmitteln in einem Geschäft und möchten nur diejenigen anzeigen, die den Kriterien eines Benutzers entsprechen. Sie haben ein Formular mit Kontrollkästchen, die jeweils ein Kriterium enthalten. Die Kontrollkästchen haben Namen wie organicund lowfatund die Produkte haben entsprechende Klassen - .organicusw.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

Jetzt können Sie mit diesem jQuery-Objekt weiterarbeiten. Beginnen Sie jedes Mal, wenn ein Kontrollkästchen angeklickt wird (zum Aktivieren oder Deaktivieren), mit der Hauptliste der Lebensmittel und filtern Sie anhand der aktivierten Kontrollkästchen nach unten:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

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

Der kleine Tipp ist die Funktion jQuery.each (Objekt, Rückruf) . Jeder benutzt wahrscheinlich die jQuery.each (Rückruf) Funktion , um über das jQuery-Objekt selbst zu iterieren, da dies natürlich ist. Die Dienstprogrammfunktion jQuery.each (Objekt, Rückruf) iteriert über Objekte und Arrays. Lange Zeit habe ich irgendwie nicht gesehen, wofür es sein könnte, abgesehen von einer anderen Syntax (es macht mir nichts aus, alle modischen Loops zu schreiben), und ich schäme mich ein bisschen, dass ich erst kürzlich seine Hauptstärke erkannt habe.

Da der Hauptteil der Schleife in jQuery.each (Objekt, Rückruf) eine Funktion ist , erhalten Sie jedes Mal in der Schleife einen neuen Bereich, was besonders praktisch ist, wenn Sie Abschlüsse in der Schleife erstellen .

Mit anderen Worten, ein typischer häufiger Fehler besteht darin, Folgendes zu tun:

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 im functionsArray aufrufen , erhalten Sie dreimal eine Warnung mit dem Inhalt undefined, der höchstwahrscheinlich nicht Ihren Wünschen entspricht. Das Problem ist, dass es nur eine Variable igibt und alle drei Verschlüsse darauf verweisen. Wenn die Schleife beendet ist, ist der Endwert von i3 und someArrary[3]ist undefined. Sie können dies umgehen, indem Sie eine andere Funktion aufrufen, die den Abschluss für Sie erstellt. Oder Sie verwenden das Dienstprogramm jQuery, das es im Grunde für Sie erledigt:

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

Wenn Sie nun die Funktionen aufrufen, erhalten Sie erwartungsgemäß drei Warnungen mit den Inhalten 1, 2 und 3.

Im Allgemeinen ist es nichts, was Sie nicht selbst tun könnten, aber es ist schön zu haben.

Der Zugriff auf jQuery funktioniert wie ein Array

Hinzufügen / Entfernen einer Klasse basierend auf einem Booleschen ...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

Ist die kürzere Version von ...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

Nicht so viele Anwendungsfälle dafür. Dennoch; Ich finde es ordentlich :)

Aktualisieren

Nur für den Fall, dass Sie kein Typ zum Lesen von Kommentaren sind, weist ThiefMaster darauf hin, dass die toggleClass einen booleschen Wert akzeptiert , der bestimmt, ob eine Klasse hinzugefügt oder entfernt werden soll. Was meinen obigen Beispielcode angeht, wäre dies der beste Ansatz ...

$('selector').toggleClass('name_of_the_class', true/false);

Aktualisieren:

Fügen Sie einfach dieses Skript in die Site ein und Sie erhalten eine Firebug-Konsole, die zum Debuggen in einem beliebigen Browser angezeigt wird. Nicht ganz so voll ausgestattet, aber trotzdem ziemlich hilfreich! Denken Sie daran, es zu entfernen, wenn Sie fertig sind.

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

Schauen Sie sich diesen Link an:

Aus CSS-Tricks

Update: Ich habe etwas Neues gefunden; Es ist die JQuery Hotbox.

JQuery Hotbox

Google hostet mehrere JavaScript-Bibliotheken in Google Code. Das Laden von dort spart Bandbreite und lädt schnell, da es bereits zwischengespeichert wurde.

<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 festzustellen, 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 Nachrichten und Variablen auf dem Bildschirm ausgeben können, ohne Warnfelder verwenden zu müssen. Mit "console.time" können Sie ganz einfach einen Timer einrichten, um eine Menge 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');

Verwenden Sie nach Möglichkeit Filtermethoden über Pseudo-Selektoren, damit jQuery querySelectorAll verwenden kann (was viel schneller als sizzle ist). Betrachten Sie diesen Selektor:

$('.class:first')

Die gleiche Auswahl kann getroffen werden mit:

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

Das muss schneller gehen, da die anfängliche Auswahl von '.class' QSA-kompatibel ist

Entfernen Sie Elemente aus einer Sammlung und bewahren Sie die Verkettbarkeit

Folgendes berücksichtigen:

<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());
});

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

Ändern des Typs eines Eingabeelements

Ich bin auf dieses Problem gestoßen, als ich versucht habe, den Typ eines Eingabeelements zu ändern, das bereits an das DOM angehängt 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");

Umsichtige Verwendung von jQuery-Skripten von Drittanbietern, z. B. Formularfeldvalidierung oder URL-Analyse. Es lohnt sich zu sehen, worum es geht, damit Sie wissen, wann Sie das nächste Mal auf eine JavaScript-Anforderung stoßen.

Zeilenumbrüche und Verkettbarkeit

Bei der Verkettung mehrerer Aufrufe von Sammlungen ...

$("a").hide().addClass().fadeIn().hide();

Sie können die Lesbarkeit mit Zeilenumbrüchen verbessern. So was:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

Verwenden Sie beim Auslösen einer Animation .stop (true, true), um zu verhindern, dass die Animation wiederholt wird. Dies ist besonders hilfreich für Rollover-Animationen.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Verwenden selbstausführender anonymer Funktionen in einem Methodenaufruf wie z .append() , um etwas zu durchlaufen. IE:

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

Ich benutze dies, um Dinge zu durchlaufen, die groß und unangenehm wären, um aus meiner Verkettung auszubrechen und zu bauen.

Unterstützung für HTML5-Datenattribute bei Steroiden!

Das Datenfunktion wurde bereits erwähnt. Damit können Sie Daten mit DOM-Elementen verknüpfen.

Kürzlich hat das jQuery-Team Unterstützung für hinzugefügt benutzerdefinierte HTML5-Datenattribute * . Und als ob das nicht genug wäre; Sie haben die Datenfunktion mit Steroiden zwangsernährt, was bedeutet, dass Sie komplexe Objekte in Form von JSON direkt in Ihrem Markup speichern können.

Der 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!