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.

About Jeff Rhodes
Jeff Rhodes is the Branch Chief, Program Office Support at the U.S. Office of Personnel Management (OPM). Prior to that, he was the Academic Chief Technical Officer at the United States Air Force Academy and previously a Senior IT Specialist in charge of SharePoint and other key systems at the Academy. Jeff was the founder and Chief Technical Officer of Platte Canyon Multimedia Software Corporation, a leader in developing commercial e-learning software. 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 Master’s degree in Economics from the London School of Economics, which he attended under a British Marshall Scholarship. He is the author of Creating Business Applications with Office 365: Techniques in SharePoint, PowerApps, Power BI, and More, Programming for e-Learning Developers: ToolBook, Flash, JavaScript, and Silverlight, VBTrain.Net: Creating Computer and Web Based Training with Visual Basic .NET and The ToolBook Companion. He lives in Colorado Springs with his wife Sue and is the proud father of his 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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: