Skip to main content
Ben Nadel at CFUNITED Express NYC (Apr. 2009) with: Nafisa Sabu and Javier Julio
Ben Nadel at CFUNITED Express NYC (Apr. 2009) with: Nafisa Sabu Javier Julio

jQuery's Passes Itself As An Argument To The "Ready" Event Callback

By
Published in Comments (3)

As I read through Cody Lindley's excellent jQuery Enlightenment book, I found myself dog-earing many pages that contained little tips and factoids that I had never seen before. One of these facts was that jQuery passes itself as an argument to the callback methods that you provide in the "ready" event bindings. While this might not seem at first like a useful piece of information, when you are working in an application that has "$" variable conflicts, having jQuery passed itself to your callbacks can make your life a whole lot easier.

To demonstrate this awesomeness, take a look at this code in which the "$" is already being used and must be released via the noConflict() method:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>jQuery Ready Event Argument</title>
	<script type="text/javascript">

		// Create a $ variable for conflict.
		window.$ = "Conflicted$";

	</script>
	<script type="text/javascript" src="jquery-1.3.2.js"></script>
	<script type="text/javascript">

		// Call no-conflict to release jQuery "$" shorthand.
		jQuery.noConflict();


		// When the document is ready, output the current $ value
		// to demonstrate that it is no longer jQuery.

		jQuery(
			function(){
				// This is a check to see if the "$" variable
				// exists if we are not using it as an argument.
				document.write(
					"Current ($): " + $ + "<br />"
					);
			}
		);


		// When you pass your anonymous, callback method to the
		// document::ready event binding, jQUery passes the
		// jQuery instance to the callback as an argument.

		jQuery( document ).ready(
			function( $ ){

				// Output the jQuery version.
				document.write( $.fn.jquery + "<br />" );

			}
		);


		// This also works for the short-hand notation in which
		// a callback method is passed directly to the jQuery
		// object.

		jQuery(
			function( $ ){

				// Output the jQuery version.
				document.write( $.fn.jquery + "<br />" );

			}
		);

	</script>
</head>
<body>
	<!--- Body content here. --->
</body>
</html>

As you can see in the above code, the "$" variable is already being used; as such, jQuery must release its hold on it as the library's short-hand reference. However, because jQuery passes itself to the document::ready event callbacks, as long as we define the callback method parameter as "$", we can use the short-hand reference with impunity. And, in fact, when we run the above code, we get the following output:

Current ($): Conflicted$
1.3.2
1.3.2

Because the callback method parameters are closer in the variable lookup chain to the method body than the window scope, the method body will check the parameters (argument collection) and find the "$" reference before it ever gets to the window scope. This allows our entire callback method to operate under the assumption (fact) that the "$" variable now references the jQuery library.

Want to use code from this post? Check out the license.

Reader Comments

14 Comments

@Ben

That is awesome! I run into that problem all of the time as a lot of our older applications run the Prototype library which uses $. I always end up replacing $ to "jQuery" using the noConflict method ... not now though :)

Good tip!

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel