Simple JQuery tutorial

JQuery is a Javascript development framework that makes life for the Javascript developer that much more easier. It provides a set of libraries and standardized UI widgets, all topped with a liberal dose of syntactic sugar, to make tedious tasks such as manipulating the DOM and AJAX support that much simpler. True, there are frameworks out there that provide a similar set of functionality, such as Prototype and Ext-js. However, JQuery currently has a commanding market share and is seeing widespread adoption. A few notable examples include Microsoft, who is shipping JQuery with ASP.NET MVC, and Google, who actually hosts its own version of the JQuery API. Part of JQuery’s success can be attributed to the fact that cross browser comptability is one of its main design requirements. Frameworks such as Ext-js, which make extensions and modifications to the DOM, cannot make such a claim. In a way, JQuery’s success is analogous to why the C programming language became so popular: C provided a high level abstraction for Assembly that simplified coding by orders of magnitude (and as someone who had to write a quicksort algorithm in MIPS Assembly as part of a CS homework assignment, I can assure the reader that writing Assembly is indeed a nightmare), and it was an incredibly portable language as well (whereas any variant of Assembly was completely machine dependent).

I haven't had the opportunity to do much front end development in the past, but luckily my new job will involve a lot of Javascript coding. I decided to play around with some JQuery so I could start getting my hands dirty. I wanted to begin with something simple. One of the side projects I'm working on involved displaying/hiding a set of form fields based on a drop down selection, so I figured that'd be a good place as any to start.

Select an option: Show regular fields Show extra fields

Regular field 1:

Regular field 2:

The code for this example ends up being much shorter than the Javascript equivalent. After all, its motto is “Write Less, Do More”. Here it is in all its glory:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#optional').hide();

    $('dropdown').change(function(){
        if($('#dropdown').val() == 'Extra'){
            $('#optional').show();
        }
        else{
            $('#optional').hide();
        }
    });
});

</script>

Select an option:
<select id="dropdown">
    <option value="Standard">Show regular fields</option>
    <option value="Extra">Show extra fields</option>
</select>
<br />
<br />
Regular field 1: <br />
<input type="text"  /><br/>
Regular field 2:<br/>
<input type="text"  /><br /> 
<br />
<div id="optional">
Extra field 1:<br />
<input type="text" /><br />
Extra field 2:<br />
<input type="text" /><br />
</div>

The HTML side of things looks pretty much how you’d expect. The dropdown has an ID attribute of “dropdown”, and the div containing the extra text fields has an ID of “optional”. Obviously using such unimaginative and generic ID attributes in real life would be terrible. This is only a tutorial of course.

On the javascript side of things, a reference to the jquery library is included. What follows afterward is the $(document).ready function. Here’s where things get a little interesting. This represents the entry point for JQuery, kind of like your typical Main() function in C or Java. The $ is shorthand for the JQuery object. Here is where all the magic happens.

Inside the ready function, an event handler is defined for the drop down list: $(“#dropdown”).change. JQuery defines multiple events that you can hook into. In our case, we are interested in the change event.

The event hander uses an if conditional evaluates the value of the selected drop down list item. Luckily, we no longer have to use awkward document.GetElementById calls to access elements inside the DOM. Instead you can simply use the shorthand: $(“#id”). Grabbing the value of an element can then be done by calling the val() method. So, in order to figure out what the selected value of the drop down is, we simply call $(‘#dropdown’).val()

An If conditional is used to evaluate the value and show/hide the div accordingly. Note that JQuery comes with Show and Hide functions (and quite a few others) which do exactly what you’d expect. No more need to set css visibility properties manually!

So there you have it. A simple tutorial (albeit a trite example) on JQuery!