jQuery: Easy JavaScript for Front-end Programmers

I’m a big jQuery fan because it just makes things a lot easier and a lot simpler for a mostly front-end programmer like myself. It’s the first Javascript framework I’ve looked at, but I don’t see myself going back.

What Is jQuery?
jQuery is yet another JavaScript library to join the previously crowded space that includes Prototype, Scriptaculous, Rico, Moo.Fx and more than a dozen others. To use it, simply attach the .js file in the head of your page: magically, you have access to lots of pre-built functions and gizmos.

Why jQuery?
The true beauty of jQuery is what it can present you within the first 10 minutes of your using it. The key feature of jQuery is its simplicity. Few lines of jQuery code can replace a dozen lines of normal JavaScript, yet it remains very elemental and flexible. Let me illustrate this point with an example. Two years ago, we used the following script to fix the web page horizontal rule:

function ourRules() {
if (!document.getElementsByTagName) return;
var hr = document.getElementsByTagName(“hr”);
for (var i=0; i
var newhr = hr[i];
var wrapdiv = document.createElement(‘div’);
wrapdiv.className = ‘line’;
newhr.parentNode.replaceChild(wrapdiv, newhr);
wrapdiv.appendChild(newhr);
}
}

window.onload = ourRules;

Result of the code, the browser waits for the page to finish loading before rifling through the DOM to find each occurrence of hr. Each time it finds one, it creates a new div, gives it the class name “line”, inserts it where the hr was, and pops the old hr inside the new div, to achieve the markup required to apply this particular effect. The end result of this script was that we were able to get the desired result without having to change hundreds of pages.

But, we’d achieve the same result using jQuery.

$(document).ready(function(){
$(“hr”).wrap(“<div class=’fline’> </div>”);
});

To break it down:

$(document).ready(function(){

});

The first and third lines are jQuery’s load event, and they replace the old window.onload from above. Any activity that we wish to complete during the page load can be dropped inside these curly braces. This is a great upgrade on the old onload method, because rather than waiting until everything has finished loading, jQuery’s function watches everything that comes in, and starts working as soon as it has all the parts it needs. It’s really very neat.

Surprisingly, the second line is even simpler:

$(“hr”).wrap(“<div class=’fline’></div>”);

The “dollar object” $(“hr”) is all we need to tell jQuery to grab every horizontal rule on this page, and wrap is what we will be doing to those hr elements.

jQuery’s built-in wrap function takes in whatever HTML we give it (in this case “<div class=’fline’> </div>”) and wraps it around each hr in our page – no loops or tests required.

We’ve used a div here, but we could just as easily been modifying or wrapping a b, span, or a element.

And although we’ve used a very simple selection rule here (all hrs), we could have easily been much more specific with what we targeted. Using familiar old CSS syntax, we could have used any of the following:

$(“hr.separate”) – Get the hr elements with the class name “separate “.
$(“li:only-child”) – Get list items that are by themselves.
$(“ul > li”) – Get only list items with unordered parent lists.

While I’ve found wrap to be of the most instantly helpful jQuery functions, it’s just one of many, including hide, show, fadeOut(“slow”) and slideUp(“fast”), just to name a few. You can perhaps guess what each one of these functions does. The jQuery starter’s tutorial on the jQuery site is quite a gentle beginner’s guide, and takes you through some of the most regular functions. But perhaps jQuery’s single neatest feature is its ability to “chain” functions together. Like, if I wanted to add a second div to our hr elements for some foolish reason, I could simply add another call to the wrap function to the end of my code, like this:

$(“hr”).wrap(“<div class=’fline’></div>”).wrap(“<div class=’sline’></div>”);

Example of jQuery
Example of jQuery

It’s so easy, it’s wild. Wild like a fox!

While designing a web page, you want to add a small icon to the bottom corner of each thumbnail. This required each img element to be wrapped in a container div, and another div showing the icon to be positioned in the container div. Again, the jQuery code is just one line.

$(“#thumbnails li img”)
.wrap(“<div class=’mywrap’></div>”)
.before(“<div class=’mythumb’></div>”);

In simple English, this code just asks jQuery to locate all the images in li elements that are inside #thumbnails, Wrap these images in a div called “wrap”, Squeeze another div (the one with the icon graphic) in my “wrap” div just before my image.

Now that we have the structure, CSS does the rest. If JavaScript is turned off, the thumbnails link directly to the raw image files, and there’s no need for the icons. Now that’s what I call graceful degradation. Like most other JavaScript libraries, jQuery is competent of some very high-end actions, but the main attraction for me was its ability to solve the little problems quickly and with a minimum of fuss.

I hope you’ll find it helpful too.

Download Files

jQuery Minified (54.5 kb)
jQuery Packed (30.3 kb)
jQuery Regular (98.2 kb)

Click here to view jquery tutorials

One thought on “jQuery: Easy JavaScript for Front-end Programmers

  1. Pingback: Technology Scraps

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