Many common tasks can be accomplished with only a few lines of jQuery code. Don't let the brevity fool you, though; often these examples replace dozens of lines of tedious DOM manipulation code. When the number of lines grows large, or you use the same code frequently, consider writing a plugin. There's nothing magical about jQuery plugins and they don't require specialized knowledge. Visit the Plugins page to see what has already been written.

Basic selector Speeds: (source)

$("#myId")

is very fast because

"#myId"

gets turned into

document.getElementById("myId")

$("div#myId")

is slower because jQuery has to find all the div elements on the page and then go through each of them and check if their ID is myId.

$(".myClass")

can be very slow because jQuery has to go through every element on the page and see if it has the class myClass.

$("div.myClass")

is faster because jQuery only has to go through all of the div's on the page instead of everything.

Activate objects in Internet Explorer: The fallout of Microsoft's patent lawsuit with Eolas requires IE to prompt the user with a "Click to activate" dialog for an embedded ActiveX object in the page. To banish the annoying dialog, add this code snippet immediately after the object that needs to be activated, where #yourdiv is the id of the object to be activated:

<!--[if IE]>
<script type="text/javascript">
  $('#yourdiv').html($('#yourdiv').html());
</script>
<![endif] -->

If you have several objects on the page that require activation, or would prefer a generic solution that doesn't require changes in each page, try this snippet that runs as soon as the document is ready:

$(function(){
  if ( !jQuery.browser.msie ) return;
  $('object, embed, applet').each(function() {
      this.outerHTML = this.outerHTML;
  });
});

Add a cross-browser hover class: Internet Explorer only supports the :hover pseudo-class for a limited set of elements. To work around this, you can use jQuery to add a class to the elements you want to style during hover:

$("#nav").hover(
  function(){ $(this).addClass("hovering"); },
  function(){ $(this).removeClass("hovering"); }
);

To complete the effect, create style rules for #nav.hovering.

Implement as a plugin: If you do this often, you could create a plugin.

jQuery.fn.hoverClass = function(class) {
  return this.hover(
    function(){ jQuery(this).addClass(class); },
    function(){ jQuery(this).removeClass(class); }
  )
};

Then just call:

$("#nav").hoverClass("hovering");

Remove background flicker in Internet Explorer: There are problems with Internet Explorer caching images when it isn't needed. To overcome this problem, a small fix is required to be added in the document.ready function:

$(function(){
  //If browser is IE, disable BackgroundImageCache
  if (jQuery.browser.msie)
  {
    try
    {
      document.execCommand(
        "BackgroundImageCache",
        false,
        true);
    } catch(err){}
  }
});

Traversal

  // the alternate rows in every table
  $('table tbody tr:even');
  // all inputs with the name 'foo'
  $('input[@name='foo']');
  // all links with the 'delete' class in thislist
  $('a.delete', thislist);

Accessing other windows When writing this:

$(...).doStuff();

Javascript implicits this:

window.$(...).doStuff();

This is very useful to know when you open new windows and want to control their DOM:

var w = window.open();
w.$(...).doStuff();

For this to work, the content of the new window must include jQuery, too!