Getting Started with jQuery

jQuery is a great JavaScript library that is fast, easy to use, and powerful. I find that it is a fairly easy library to start using immediately, and once you start using it more and more, you will find yourself needing to understand some of the deeper concepts to get the full benefits of the library.
The jQuery source code

Before getting started with any jQuery development, you’ll first have to download the latest version of the jQuery library and include it in your pages:


The above line of HTML should appear before any actual jQuery code, otherwise you’ll get errors.

Alternatively, instead of hosting the source code yourself, you could link directly to the most recent version on the Google Ajax Libraries API which can save you some server resources.

jQuery syntax

Let’s take a look at some syntax to get us started with this powerful library.

$("li a");

The $ symbol is an alias for the jQuery function, so the above line of code could alternatively be written:

jQuery("li a");

jQuery commands

jQuery’s API includes easy access to effects and other actions via built-in methods that would normally take dozens of lines of code to accomplish in a cross-browser fashion with pure JavaScript. For example, let’s add a “fade out” method to the code from the previous examples:

$("li a").fadeOut();

The above line of code “fades out” all anchor tags on the page that are nested inside of

  • tags. If we want to fade the anchors back in again, we just use the fadeIn() method:
    $("li a").fadeIn();

    Chaining commands

    jQuery also allows developers to chain commands, stringing one after another. So, we could combine the previous two examples, as follows:

    $("li a").fadeOut().fadeIn();

    The above code will fade out all anchor tags nested within list items, then immediately fade them back in. The number of chained items is infinite (or within reasonably set limits), allowing for numerous commands to work on the same group of elements, each happening in succession.

    That’s just a small sampling of what’s possible with jQuery, and how easy it is to accomplish tasks that would normally take many lines of code, and a lot of browser testing. Although you’ll still do browser testing when running jQuery code, the results will virtually always be the same: cross-browser, unobtrusive JavaScript that’s easy to write and easy to maintain.
    Running code when the DOM is ready

    Earlier we touched on the concept of unobtrusive JavaScript, and how jQuery is written to allow your scripts to remain separate from content and presentation. So far, the code examples we’ve discussed would run fine as long as they were included at the bottom of an HTML page. If, on the other hand, they were included in the head of the document, they would fail to work because, at that point, the document tree has not yet rendered.

    jQuery allows us to run our code only when the DOM is ready. This is done by means of the $(document).ready handler. The beauty of this handler is that it doesn’t make the code wait until the entire page finishes loading, as would be the case with a typical window.onload event. With the (document).ready handler, your code will run as soon as the DOM tree is finished rendering, before all images and other media have finished loading, thus minimizing load time.

    Let’s try running our previous code example when the DOM is ready:

    $(document).ready(function(){
      $("li a").fadeOut().fadeIn();
    });  
    

    The above code tells jQuery to run an anonymous function when the document tree is done rendering. The anonymous function contains the code we saw previously, which faded our anchors out, then immediately faded them back in again. This code could be included in the of the document, near the bottom of the page, or anywhere else, and it would run exactly the same way.

    The “ready” event is just one of the many events available through jQuery’s API. Others include click, dblclick, load, blur, keydown, submit, and more.

    Advertisements
  • 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