jQuery Tips and Tricks

javascript, jquery

Solution

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

Problem

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

Original source

Related problems