“Any sufficiently advanced technology is indistinguishable from magic.”

Clarke’s Third Predictive Law also applies to web development, and we all love magic.

I first met JavaScript in 1999. At the time, like cavemen, we were using JS along with chopped up images for rollover effects, usually navigation items. There were other cheap trick effects, on my then-portfolio I had a “portrait” spot on my homepage with an image that would change its source based on a random number generator, pulling from a collection of beauties that I admired at the time.

It could also be used for really handy stuff like preloading images and “activating” error messages for certain browsers, but it was a very clunky language to work with. I know there are gifted coders out there for whom it comes very naturally, I am not among your hallowed number. JavaScript and I still have a cordial relationship, not exactly affectionate, and it wasn’t until ActionScript work in the Flash leg of my career that I found myself gaining real chops in Object Oriented Programming. I always found JavaScript cumbersome and cranky, and as it turns out I wasn’t alone.

JQuery was born in the mind of John Resig, a developer who had a vision for a single, JavaScript-based library that would allow a single line of code to work in every browser. At the time, especially with Internet Explorer (IE6 can burn in hell forever and ever amen), it was necessary to write parallel functions to provide a uniform experience across all browsers.

In January of 2006, Resig unleashed his library on the world. To say it changed the way we built websites is not an exaggeration. Suddenly, things that had been very difficult were within reach. Form validation, drawered content, AJAX calls, and my old favorite, the <img src='swappable!'> shell-game (given new life in this era of .SVG image files), all of these were now possible without a hardcore JS developer with severe photodermatitis.

“Write Less, Do More” isn’t just a tagline for a clever piece of software, it’s an ethos for working with the language. JQuery takes care of all sorts of cross compatibility gymnastics, and includes a vast library of methods and functions to provide the most common shortcuts.

Pick a Card, Any Card

Let’s look at a real world example of the difference between writing in JQuery and writing in JavaScript. We’ll start with the most basic of magic tricks, we’re going to make something disappear! David Copperfield managed the Statue of Liberty, we should be able to manage an <h1>.

Before she can vanish, our lovely assistant should have a name, so we are going to be targeting the element h1#rose. Then the spell of disappearance. In both methods, it’s selection + action. Which one looks easier?

Let’s be honest, it should be called the “Type Less, Do More” library because this still blows me away. And the best part is, $(value) can be any CSS target, so you can do $('header h1#logo').hide(); to make the logo disappear, but it will only work if the logo element is an <h1> with the ID logo that lives in the <header>. Only the element that fits the exact description will vanish. Conversely, $('p').hide(); will make every <p> in your document disappear, wherever it may live.

JQuery also rocks for intuitive semantics — the opposite of the .hide() function is .show(). You want to make title tag transition with a little more style? Use .fadeIn() and .fadeOut() for a fading transition, or .slideUp() and .slideDown() to have the element appear to fold into and emerge from a drawer in the content.

The list of ways that you can bend and twist and reshape the DOM using JQuery is daunting, and it frees up your imagination to think about what you are trying to do, instead of figuring out all of the dialectical BS of making it work universally.

How Do I Get The Card Up My Sleeve?

Adding JQuery to your website is very easy, variations on the same method:

JQuery is so popular that it is included standard in most frameworks and boilerplates. Many go the CDN route, a prime advantage being that it can decrease your site’s load time. Not that your budget priced package from StopMomma has a super slow server, but industrial engines at Google or Amazon are probably a skoshi faster 😉

Once it’s included in the DOM via <script>, call JQuery functions in a second <script> pair.

Most of the time, JQuery functions are not happening at the “root” level of the <script> pair, they are living inside a function declaring that the page has loaded, JQuery has loaded, all assets are in place, functions can be declared and variables can be called. There are several options for writing this out, but they all essentially do the same thing.

Quick Shell Game

Let’s take a look at some basic ways that JQuery can be used to manipulate content and style. First, we are going to set up some basic style/structure pieces in CSS and HTML, then pepper in some JQuery for flavor.

The Guild of Magicians and Codemancers

In addition to writing your own functions, there are a lot of add on goodies available. JQuery has been used as a platform by tens of thousands of developers who have built awesome tools and applications that leverage its power. Fast example, the slideshows and carousels on this site are powered by Slick, which uses a mix of JQuery and CSS animations.

The JQuery team also publishes a number of additional libraries as add-ons, notably JQuery UI and JQuery Mobile.

More Than One Way to Hat a Rabbit

JQuery is awesome, clearly, but there are other libraries available, several geared towards ultra light builds and mobile friendliness.

Angular.js is Google‘s offering, and while slightly heavier than JQuery (38k vs 32k), it has a lot of features under the hood that JQuery does not.

Zepto.js has been around for a while, and prides itself on being a lighter parallel to JQuery. Skill in the one definitely lends itself to the other.

Minified.js offers many of the same DOM features as JQuery, in a smaller and tighter package. Good for small projects.

And then there’s always the argument that you might not need JQuery or any of its alternatives, just boss up and use JavaScript in modern browsers.

Me? I just like using dollar signs in code whenever possible, so JQuery and PHP both make me smile.

Whichever library you choose, we should all be grateful to have these alternatives, raw dog JavaScript for complicated interactions is a pain in the arse. Find one that works for your needs and CRACK OUT on the docs, learn all the ins and outs that you can. But the whole point is that you should be spending time figuring out what you’re doing in a page, not losing sleep trying to figure out how to make it all work.