Use of jQuery noConflict();

In my short time of using jQuery I've come across the invaluable method of noConflict(). Why is it so handy? Well, in the world of web design and development, there are lots of very useful JavaScript libraries out there (i.e. YUI, MooTools, Prototype) and several of them use "$" to represent an object. If you are using this syntax within jQuery and another conflicting library simultaneously, you are likely going to run into some unexpected behavior.

Luckily noConflict() is very simple to use and you won't have to go swapping out all your "$" with "jQuery". And to keep it simplistic I'll use the following code to show you how to implement it.

$(function() {
  $("#foo").click(
    // your code here
  )
 
  // any additional code
});

NOTE: If you aren't familiar with the shorthand form $(function() { ... }); of $(document).ready(function() {...}); please read my blog post entitled Still using $(document).ready in your jQuery scripts?

Given the above example, here's how we'd implement the noConflict() method, which allows you to keep using "$" throughout your source:

jQuery.noConflict();
 
jQuery(function($) {
  $("#foo").click(
    // your code here
  )
 
  // any additional code
});

Pretty slick, eh? It's like magic and just another reason I love me some jQuery. If you have any questions, don't hesitate to post a comment.

UPDATE: See Paul Irish's comment for an even slicker way!