I just finished watching a session by Remy Sharp at NDC 2010 on jQuery.

I highly recommend checking out his session as it’s not your starter jQuery talk.

Here are a few of the tips:

  • Event delegation: live vs delegate, delegate FTW
    • Live checks from the top of the document.
    • Live is slower
    • Delegate will listen at a specific point instead of the whole document.  Event bubbling will only happen at the element you specify
  • Avoid the DOM, try to do as much preprocessing as possible before using append or any other type of manipulation

Don’t do this:

$("#foo").css({ top: "20px", left "100px" })

Use CSS classes instead.  It’s cleaner markup and it really is where you should be controlling your presentation markup.


  • Traversing: find vs context

Using $(“#foo”).find"(p”) to find all the ‘p’  tags is faster than $(“p”, “#foo”) since it uses it under the former underneath the hood.

  • Avoid .get(0).  Just use [0] if you need to get the first element.  Same reason as above.
  • Use $(“#foo”).bind(“click”,fn) vs $(“#foo”).click(fn)
    • The click|mouseover|blur|etc methods are shortcuts for the bind method.
  • Use $.data(this, key) vs. $(this).data(key)
    • Same reason as above
  • $(“div”).length to check of there any matched elements.  Simple, but effective before you go on processing anything.

Check the video to see the rest of the tips.  NDC put up a torrent link for all 121 sessions that comes in a whopping 56GB!