jQuery, What IS it?

jQuery, What IS it?

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.  I think the jQuery tagline says it all (in much less nerdy terms).  “Write less.  Do more.”  Let’s take a quick look at what jQuery is from a high-level. 

Any time a developer writes code to perform some action, he or she will build it in a functions format.  As an achedemic example, let’s right fake code (aka, “pseudo code”) for getting a beer from the fridge.  Remember, computers don’t really “know” ANYTHING and they can make NO assumptions.

Grab a Beer Pseudo Code

<start>

1. Open the refrigerator
2. Grab a beer

</end>

That would return an error.  The computer doesn’t know what a refrigerator IS and even if it did, it doesn’t know how to open it.  It also doesn’t know what “grab” means nor how to recognize a beer–even if that was the only thing in the fridge.

So, even the pseudo code for grabbing a beer gets really complicated, really quickly.  For example:

<start>

1. Walk to the kitchen
2. Find a tall, white object in the kitchen
3. Grasp the second handle from the top with your right hand and pull
4. Locate aluminum cylinder whose label includes the word "beer"
5. Grasp beer with left hand and remove
6. Close door with right hand by following step 3 in reverse

</end>

That would error: “What is ‘walk’?”  I think you get it.

Enter Function Libraries

So having to write every single, tiny step for even the most basic command is highly inefficient.  Function libraries are exactly what they sound like.  They are a library of functions you can use over and over again.  Chaining these functions together let’s you perform complex operations easily.

For example, let’s do that pseudo code again using an imaginary function library designed to allow robots to walk around and perform any operation a 5 year-old can do.

<start>

1. Execute function "go to the kitchen and open the fridge"
2. Use function "locate aluminum can" where color of can is silver with red lettering
3. Execute "Close refrigerator door"
4. Return to living room with can located in step two

</end>

I think you see that we get to borrow, chain and modify functions contained in the library and that makes writing even complex operations easy (or easier).

Back to jQuery

jQuery is a bit like that imaginary function library for robots.  jQuery contains a TON of functions that you can reference and chain together to perform complex operations.

For example, let’s write a basic jQuery function.  There are a lot more (and better) examples on jQuery.com.

Let’s find a DIV somewhere in the hundreds of lines of HTML on a page that has the ID “changeme”.

jQuery( "#changeme" );

It sounds pretty complex, but jQuery makes it crazy-easy to perform a client-side search and identify operation.  The above code has now located that <div id=”changeme”>.  Now, we want to hide that div and everything inside of it.  Guess what, there’s a jQuery function for that called hide().

jQuery( "#changeme" ).hide();

That’s cool.  We can even chain these things together.  Let’s make it find it, hide it, then alert us.

  $( "#book" ).hide( "slow", function() {alert( "Animation complete." );});

So that ends up looking a little like this if you looked at it one frame at a time.

The jQuery hide() function example

There are tons of great examples of using jQuery libraries on the jQuery website.

Just Google It

The dark and dirty truth about jQuery and it’s numerous add-ons (called jQuery plugins) is that nobody has ALL of the functions and their syntax memorized.  Everybody just Googles it when they’re unsure.

So, now you have at least the highest level of understanding of what jQuery is.  There are a ton of better, more advanced tutorials out there for you to play with.

Leave a Reply