Introduction to jQuery

I have been doing quite a bit of HTML and JavaScript and am very impressed with the jQuery library. It is free and is being adopted widely. I like it because 1) it keeps you from having to worry about cross-browser differences, 2) it makes coding in JavaScript more like using Visual Basic or OpenScript. Here is a short example to get you started. The HTML below has two buttons and four images. We want to show all the images when you click the showBtn and hide them when you click the hideBtn.

<body>
    <input id="showBtn" type="button" value="Show Images" />
    <input id="hideBtn" type="button" value="Hide Images" />
    <img id="Img1" src="media/help.png" />
    <img id="Img2" src="media/coda.png" />
    <img id="Img3" src="media/Desperado.png" />
    <img id="Img4" src="media/5150.png" />
</body>

Let’s write the logic with jQuery. We first add a reference to its .js file:

<script src="jquery/jquery-1.5.1.js" type="text/javascript"></script>

Next, we add the code below.

    <script type="text/javascript">
        $(document).ready(function () {
            $("#showBtn").click(function (e) {
                $(".ImageClass").show();
            });
            $("#hideBtn").click(function (e) {
                $(".ImageClass").hide();
            });
        });
    </script>

The $ symbol is the shortcut for making a jQuery call. The parameter is either an object like document or a selector like we will see below. So $(document) is a jQuery object that references the HTML document. We then define what to do when it is ready. This means that the page is fully loaded. This equivalent to Load in Visual Basic or enterPage in ToolBook OpenScript.

When ready, we configure what our two buttons do. This starts to show the real power of jQuery. The $(“#showBtn”) code gets the jQuery object reference to an HTML object with an id of “showBtn.” This is our button. We then define what to do in response to its click event. In that case, we use another jQuery selector, $(“.ImageClass”). The “.” means that we are looking for all objects with a class of “ImageClass.” We then call its show method. Notice that even though there are four of the objects (our images), jQuery takes care of calling the show method for each one. jQuery also takes care of how to show the object based on its type and the browser. This typically means changing the object’s display style.
Similarly, we find the hideBtn and defined to hide all the image objects in response to its click event.

This just scratches the surface of what jQuery can do. But hopefully, it gives you an incentive to learn more.

Advertisements

About Jeff Rhodes
Jeff Rhodes is the Chief Technical Officer and owner of Platte Canyon Multimedia Software Corporation, a leader in developing commercial software that Improves the Lives of Training Developers. He graduated at the top of his class at the Air Force Academy, where he earned a Bachelor of Science in Electrical Engineering. Jeff received a Masters degree in Economics from the London School of Economics, which he attended under a British Marshall Scholarship. Jeff is the author of "Programming for e-Learning Developers: ToolBook, Flash, JavaScript, & Silverlight" and "VBTrain.Net: Creating Computer and Web Based Training with Visual Basic .NET." He also co-wrote "The ToolBook Companion." He has had numerous articles on training development published and is a frequent presenter at conferences both in the U.S. and Europe. Jeff lives in Colorado Springs with his wife Sue and sons Derek and Michael.

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: