jQuery Tips and Tricks

Syntax

• Shorthand for the ready-event by roosteronacid
• Line breaks and chainability by roosteronacid
• Nesting filters by Nathan Long
• Cache a collection and execute commands on the same line by roosteronacid
• Contains selector by roosteronacid
• Defining properties at element creation by roosteronacid
• Access jQuery functions as you would an array by roosteronacid
• The noConflict function – Freeing up the $ variable by Oli
• Isolate the $ variable in noConflict mode by nickf
• No-conflict mode by roosteronacid

Data Storage

• The data function – bind data to elements by TenebrousX
• HTML5 data attributes support, on steroids! by roosteronacid
• The jQuery metadata plug-in by Filip Dupanović

Optimization

• Optimize performance of complex selectors by roosteronacid
• The context parameter by lupefiasco
• Save and reuse searches by Nathan Long
• Creating an HTML Element and keeping a reference, Checking if an element exists, Writing your own selectors by Andreas Grech

Miscellaneous

• Check the index of an element in a collection by redsquare
• Live event handlers by TM
• Replace anonymous functions with named functions by ken
• Microsoft AJAX framework and jQuery bridge by Slace
• jQuery tutorials by egyamado
• Remove elements from a collection and preserve chainability by roosteronacid
• Declare $this at the beginning of anonymous functions by Ben
• FireBug lite, Hotbox plug-in, tell when an image has been loaded and Google CDN by Colour Blend
• Judicious use of third-party jQuery scripts by harriyott
• The each function by Jan Zich
• Form Extensions plug-in by Chris S
• Asynchronous each function by OneNerd
• The jQuery template plug-in: implementing complex logic using render-functions by roosteronacid

Creating an HTML Element and keeping a reference

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

Checking if an element exists

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

Writing your own selectors

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

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