jQuery Tips and Tricks

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

jQuery's data() method is useful and not well known. It allows you to bind data to DOM elements without modifying the DOM.

Nesting Filters

You can nest filters (as nickf showed here).

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

I'm really not a fan of the $(document).ready(fn) shortcut. Sure it cuts down on the code but it also cuts way down on the readability of the code. When you see $(document).ready(...), you know what you're looking at. $(...) is used in far too many other ways to immediately make sense.

If you have multiple frameworks you can use jQuery.noConflict(); as you say, but you can also assign a different variable for it like this:

var $j = jQuery.noConflict();

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

Very useful if you have several frameworks that can be boiled down to $x(...)-style calls.

Ooooh, let's not forget jQuery metadata! The data() function is great, but it has to be populated via jQuery calls.

Instead of breaking W3C compliance with custom element attributes such as:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

Use metadata instead:

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

Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:

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

This allows you to load content via ajax, or add them via javascript and have the event handlers get set up properly for those elements automatically.

Likewise, to stop the live event handling:

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

These live event handlers have a few limitations compared to regular events, but they work great for the majority of cases.

For more info see the jQuery Documentation.

UPDATE: live() and die() are deprecated in jQuery 1.7. See http://api.jquery.com/on/ and http://api.jquery.com/off/ for similar replacement functionality.

UPDATE2: live() has been long deprecated, even before jQuery 1.7. For versions jQuery 1.4.2+ before 1.7 use delegate() and undelegate(). The live() example ($('button.someClass').live('click', someFunction);) can be rewritten using delegate() like that: $(document).delegate('button.someClass', 'click', someFunction);.

Replace anonymous functions with named functions. This really supercedes the jQuery context, but it comes into play more it seems like when using jQuery, due to its reliance on callback functions. The problems I have with inline anonymous functions, are that they are harder to debug (much easier to look at a callstack with distinctly-named functions, instead 6 levels of "anonymous"), and also the fact that multiple anonymous functions within the same jQuery-chain can become unwieldy to read and/or maintain. Additionally, anonymous functions are typically not re-used; on the other hand, declaring named functions encourages me to write code that is more likely to be re-used.

An illustration; instead of:

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

I prefer:

function onState(){
    // do something
}

function offState(){
    // do something else
}

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

Defining properties at element creation

In jQuery 1.4 you can use an object literal to define properties when you create an element:

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

... You can even add styles:

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

Here's a link to the documentation.

instead of using a different alias for the jQuery object (when using noConflict), I always write my jQuery code by wrapping it all in a closure. This can be done in the document.ready function:

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

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

alternatively you can do it like this:

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

I find this to be the most portable. I've been working on a site which uses both Prototype AND jQuery simultaneously and these techniques have avoided all conflicts.

Check the Index

jQuery has .index but it is a pain to use, as you need the list of elements, and pass in the element you want the index of:

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

The following is much easier:

If you want to know the index of an element within a set (e.g. list items) within a unordered list:

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

Shorthand for the ready-event

The explicit and verbose way:

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

The shorthand:

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

On the core jQuery function, specify the context parameter in addition to the selector parameter. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, rather than from the DOM root. Given a large enough DOM, specifying the context parameter should translate to performance gains.

Example: Finds all inputs of type radio within the first form in the document.

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

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

Not really jQuery only but I made a nice little bridge for jQuery and MS AJAX:

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

It's really nice if you're doing lots of ASP.NET AJAX, since jQuery is supported by MS now having a nice bridge means it's really easy to do jQuery operations:

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

So the above example isn't great, but if you're writing ASP.NET AJAX server controls, makes it easy to have jQuery inside your client-side control implementation.

Optimize performance of complex selectors

Query a subset of the DOM when using complex selectors drastically improves performance:

var subset = $("");

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

Speaking of Tips and Tricks and as well some tutorials. I found these series of tutorials (“jQuery for Absolute Beginners” Video Series) by Jeffery Way are VERY HELPFUL.

It targets those developers who are new to jQuery. He shows how to create many cool stuff with jQuery, like animation, Creating and Removing Elements and more...

I learned a lot from it. He shows how it's easy to use jQuery. Now I love it and i can read and understand any jQuery script even if it's complex.

Here is one example I like "Resizing Text"

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>

Highly recommend these tutorials...

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

Syntactic shorthand-sugar-thing--Cache an object collection and execute commands on one line:

Instead of:

var jQueryCollection = $("");

jQueryCollection.command().command();

I do:

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

A somewhat "real" use case could be something along these lines:

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

I like declare a $this variable at the beginning of anonymous functions, so I know I can reference a jQueried this.

Like so:

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

    // Other code
});

Save jQuery Objects in Variables for Reuse

Saving a jQuery object to a variable lets you reuse it without having to search back through the DOM to find it.

(As @Louis suggested, I now use $ to indicate that a variable holds a jQuery object.)

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

As a more complex example, say you've got a list of foods in a store, and you want to show only the ones that match a user's criteria. You have a form with checkboxes, each one containing a criteria. The checkboxes have names like organic and lowfat, and the products have corresponding classes - .organic, etc.

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

Now you can keep working with that jQuery object. Every time a checkbox is clicked (to check or uncheck), start from the master list of foods and filter down based on the checked boxes:

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

Remove elements from a collection and preserve chainability

Consider the following:

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

The filter() function removes elements from the jQuery object. In this case: All li-elements not containing the text "One" or "Two" will be removed.

Changing the type of an input element

I ran into this issue when I was trying to change the type of an input element already attached to the DOM. You have to clone the existing element, insert it before the old element, and then delete the old element. Otherwise it doesn't work:

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

Judicious use of third-party jQuery scripts, such as form field validation or url parsing. It's worth seeing what's about so you'll know when you next encounter a JavaScript requirement.

Line-breaks and chainability

When chaining multiple calls on collections...

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

You can increase readability with linebreaks. Like this:

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

(This is a shamless plug)

Instead of writing repetitive form handling code, you can try out this plugin I wrote that adds to the fluent API of jQuery by adding form related methods:

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

No-conflict mode

jQuery.noConflict();

"Run this function to give control of the $ variable back to whichever library first implemented it. This helps to make sure that jQuery doesn't conflict with the $ object of other libraries.

By using this function, you will only be able to access jQuery using the jQuery variable. For example, where you used to do $("div p"), you now must do jQuery("div p")".

A shameless plug... The jQuery template plug-in: implementing complex logic using render-functions

The new jQuery template plug-in is awesome. That being said, the double-curly brace template-tags are not exactly my cup of tea. In a more complex template the tags obscure the templates markup, and implementing logic past simple if/else statements is a pain.

After messing around with the plug-in for a few hours, my head began to hurt from trying to distinguish the markup in my template from the millions of double curly braces.

So I popped an aspirin and began work on an alternative