jQuery provides a great way for web developers to build cross-browser JavaScript enabled applications. This article aims at getting you up and running with jQuery as quickly as possible without assuming any prior jQuery or JavaScript knowledge.

If you are interested in getting started with jQuery but don't know where to begin, you are in the right place.

Step 0: Obtain jQuery

Before we do anything, we need to get our paws on the jQuery library. There are two ways to do this.

  1. Download jQuery - The easiest way to do this is to head on over to the jQuery website and grab the latest copy. I think this is probably the most common way web developers get jQuery.
  2. Use a jQuery CDN - Instead of downloading jQuery and placing it on your web server, you can let someone else host the jQuery library for you. I prefer this option. If you want to learn how to do this (and why it's a good idea) you can check out my previous post.

The jQuery() function

This is the path with which all jQuery goodness flows through. Before you can truly take advantage of the power of jQuery, you first must find the HTML or CSS element that you want to start processing on.

The jQuery() function takes a selector/element/etc... that will be used later for processing.

The nice folks at jQuery also provided a shortcut for jQuery() which is $(). All of the examples you see online will contain the shorthand version.

I'll get into this in more detail in a later post.

Getting ready with $(document).ready()

$(document).ready() will likely be in every one of your jQuery enabled web applications.

$(document) creates a jQuery wrapper around the document object (also known as the DOM). This will allow you to call jQuery API methods on the web document.

The ready() method will detect when a page has loaded and is ready to use. This will occur after all of the elements are loaded into the DOM and before any of the images are loaded.

ready() takes a handler as its parameter which contains the method to be called once the DOM is loaded. You can specify an actual method to be called here, or simply use an anonymous method (which is the de facto standard). 

$(document).ready(function() {
  //This is where your code goes
});

Demo time

Now that we have the basics down, it is time to see jQuery in action. Here is a really simple HTML 5 skeleton that loads in jQuery from Microsoft's CDN and pops up an alert() window to let us know jQuery is loaded. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery Example</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.1.min.js">
</script>
    <script type="text/javascript">
      //$(document).ready() is cross-browser
      $(document).ready(function() {
        alert("jQuery popup!");
      });
    </script>
  </head>
  <body>
  </body>
</html>

Congratulations! You have just created your very first jQuery application.

Getting to know the docs

Before you move on from here, it might be best to take a quick look at the jQuery documentation just to get a feel for what all jQuery is capable of and how the syntax looks.

This part is completely optional, but chances are you'll find yourself here really soon so it might be best to get familiar with the docs sooner rather than later.

What's Next?

Now that we have jQuery up and running on our website, it would be super nice to start doing meaningful work. After all, we didn't go through all of this just to display a dumb pop-up window, right?

In one of my next articles, I'll go over the single most important piece of functionality in jQuery, the selector.