Wes Cutshall

What is it?

In short, jQuery is a JavaScript library that makes it easier to do some of the things you do in JS every time you create a new website. If you adopt jQuery for even one website you will end up adopting it for every website after that.  JQuery changes the way you select and modify HTML elements in JavaScript.

I’ve never been big on JavaScript libraries, since I feel that I can just about write anything in JS that I need. Although I will Google for code from time to time, I’ve just never found much of a need for a JS library. I will admit  that I’ve used Yahoo’s drag’n'drop controls on LeagueAce.com, though. I had heard of jQuery, or at least seen mentions of it in forum posts, but never tried to discover what it was. Then one day, when I had absolutely nothing to do, I Googled “jQuery”. Now, jQuery’s website isn’t the best place to figure out what it does, IMO. I had to read a few blog posts and then read through the jQuery documentation before it made any sense. I think that jQuery could do a much better job of explaining what it is to newbies on their website.

JQuery Example Usage

The most common use of jQuery is to easily select and modify HTML objects in JavaScript. Please note that the following code examples are not tested, are from my memory, and might need slight changes to actually work. Where we normally code “document.getElementById(element).className = class” we can now code “$(element).addClass(class)“. Where we normally have to write a loop in order to get the value of a selected dropdown item with standard JS, in jQuery we can instead code “var test = $(element).val()“. JQuery simplifies the process of selecting the correct HTML element, changing its properties, getting it’s value, etc. JQuery allows you to select elements in different ways, which is one of the coolest features. You can select an element via it’s HTML ID ($(“#id”)), via the tag type ($(“:input text”)), via CSS class ($(“.class”)), etc. JQuery can also select elements based on parent-child relationships. So you could select every text input element inside of a DIV with the ID of “divTest” ($(“:input text”, “$divTest”)), for example. As mentioned in the dropdown menu example jQuery has foreach ability for looping through elements that are selected. JQuery allows you to string together methods so you could make multiple changes to one object by simply adding “.method1(value1).method2(value2)” to the end of your command.

Summary

JQuery has some other features, like transition effects, that are “nice” but far from the reason why I started using it on all my new websites. The simplicity of how you can select HTML elements makes you wish that JavaScript had been written like this from the beginning.