LA.NET [EN]

Jul 11

JQuery: understanding the jQuery function

Posted in JQuery      Comments Off on 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!