Getting started with jQuery…

Series: jQuery Basics, Intro to jQuery, Step One.

jQuery is one of the best JavaScript frameworks out there. Its lightweight, easy to use, and very powerful. You’ll find yourself with no shortage of plugins. Anything you want to do with JavaScript, but don’t want to spend hours writing code, you’ll be able to knock out with jQuery in no time.

Rather than downloading the library, you can find hosted links at various places. I personally like Google’s code repository. Google keeps up with the latest versions, while keeping the old ones available. It’s widely used, and generally already cached the viewers browser. This can help with load times, or generally just be one less thing to have to download and setup on the server.

Let’s get started. I won’t waste your time going through the simple procedure of laying out a basic web site, and linking in the jQuery library. At this point, you should know HTML and how to include script files. Here’s a basic layout to start with.

<!DOCTYPE HTML>
<html>                                                                  
  <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  </head>

  <body>
    <div id="container">This is the container.</div>
  </body>
</html>

One of the most useful things about jQuery is being able to grab the contents of an id or class in the form of an object, rather than writing out long, lengthy JS code. Let’s take our container and grab the HTML inside.

$('#container').html();

First thing to note is the ‘#’. That indicates that you have set up an id. If you had made that class=”container”, it would have been $(‘.container’).html().

Real simple:

# = id
. = class

You can also grab HTML elements in the same manner. $(‘p’).html() or even $(‘select.listclass’).val().

Make sense so far? select.listclass = <select class=”listclass”>

One of my favorite features of jQuery is the ability to set up document ready actions. Summed up, you can tell the site to do whatever you want after its done loading. These are called ready events.

 $(document).ready(function() {
   alert( $('#container').html() );
 });

For this lesson, we’ll just alert the contents of our container div. Like any JavaScript, you can put this in script tags in your favorite location, or in an include file. You can also put whatever you want in there. One really useful use for the ready event is click event listeners.

 $(document).ready(function() {
   $('#container').click(function() {
     alert("Good Evening!");
   });
 });

This attaches a click listener to the container div. Anytime you click on the HTML of the div, you’re going to get an alert. This is obviously more useful for hyperlinks, buttons, and other makes-more-sense clickable items.

Let’s put this all together.

<!DOCTYPE HTML>
<html>                                                                  
  <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script language="JavaScript">
      $(document).ready(function() {
        $('#container').click(function() {
          alert("Good Evening!");
        });
      });
    </script>
  </head>

  <body>
    <div id="container">This is the container.</div>
  </body>
</html>

Go ahead and spend some time adding more divs and buttons to the page. Add click event listeners to each of them that do different things. Mix in classes and ids, and try attaching things to the HTML elements themselves. You have your first basic understanding of jQuery, a powerful, yet lightweight JS framework. We’ll get more into selectors and events next time, and begin making our way into Ajax.

If you have any questions on this tutorial, look me up on twitter, or send me an e-mail.

Dan Joseph is the CEO and head of Software Engineering of Familiaris Games.

Aside from my personal flash game projects, I am collaborating with Ben Davis on multiple future 
projects, and writing the story and script for an upcoming AAA level RPG, modelled after the same 
type of game play you see in Lost Odyssey, Final Fantasy, and other Japanese-based RPGs.  When 
I'm not developing games, I'm working as a Web Developer on various major brand web sites.

You can follow me on twitter @iamdanjoseph.  

If you wish to contact me, please click the contact page, 
and fill out the form.  I will get back to you as soon as I can.
Written by Dan
Welcome to my blog! Here you'll find my collection of bible study lessons, book reviews, and other posts I feel inspired to write. I am a Christian currently serving at First Baptist Church of Northville in Northville, MI.