JQuery: understanding the jQuery function

Yesterday we’ve started looking at JQuery. One of the most important things we’ve seen yesterday was that there’s an important JQuery object which has lots of methods and events we can interact with. Today, we’re going to take a more detailed look at the code we’ve written yesterday and we’re going to start looking at JQuery’s internals. Here’s yesterday’s code:

<input type="button"value="click me"id="bt" />  
<
script src="jquery-1.3.2.js" type="text/javascript"></script>
<
script type="text/javascript">
  jQuery(document).ready(
                 
function() {
                    $(
"#bt").click(
                             
function( evt ){
                                alert(
"hello JQuery");
                              })
                  });
</
script>
</
html>

The first important thing you should notice in this code is that we’re passing an anonymous function to the ready method. What does this method do? As I’ve said yesterday, this method will be fired whenever the DOM is ready to be used from scripting blocks. For Mozilla and Opera browsers, this means handling the DOMContentLoaded event. If you’re stuck with IE, then the platform will be calling document.attachEvent for handling the onreadystatechange event. As you can see, this means that you’ll be able to start interacting with the DOM before everything has been loaded (this is great for those cases where you’ve got huge images; without this event, you’d have to wait for those downloads before starting interacting with the DOM)

Notice that all this is done internally by the platform; you only need to pass a valid function to the ready event and that method will be called whenever one of those events are fired by the browser. Before going on, I’d also like to make a small improvement to the previous code:

<script type="text/javascript"> 
  $(
function() {
                    $(
"#bt").click(
                             
function( evt ){
                                alert(
"hello JQuery");
                              })
                  });
</
script>

The previous snippet presents a shortcut for the ready event: whenever you pass a function to the $() function, you’re actually hooking up the ready event! This is a nice shortcut and shows what JQuery is all about: simple and elegant code!

Btw, and since I’m still on vacations, I’ll wrap this up by showing you the current mappings of the jQuery method:

jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor ''enhanced''
        return new jQuery.fn.init( selector,context );
    },

As you can see, jQuery, window.jQuery and window.$ all point to the same anonymous function which is responsible for creating the JQuery object. In the next post, we’ll keep digging into this fantastic framework. Keep tuned!

Advertisements

~ by Luis Abreu on July 11, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: