jQuery's Passes Itself As An Argument To The "Ready" Event Callback
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
Very cool, Ben. Thanks for sharing.
@Marc,
Happy to share - I thought it was cool when I read it.
@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!