jQuery – The Basics

jQuery is essentially a package of javascript functions that you can access similar to regular javascript. The main reasoning behind using jQuery vs regular javascript is that you can do much more in less lines of code, it is simple once you get the ball rolling, and most importantly, it is compatible with almost all browsers for almost all the functions (this means you don’t have to figure out what browser/OS they are using to write functions!). I started learning a little about it when Grind, I think, suggested learning a new language just to learn it. I said that maybe javascript was the route to go for me, which I did learn pretty easily. Tan said that I should look into jQuery. At the time, I didn’t understand it at all. It looked like jibberish. It was a bunch of dollar signs, parenthesis, commas, brackets, periods, pound symbols. How would this make my website better?!!

Well lets get started, shall we? First things first, the formatting of jquery commands is similar to javascript in many ways.

$(object).attribute(action);

Thats it. This is what it all boils down to. Every jQuery command starts with a “$”. That is just how it is. There is nothing you can do about it. You don’t like it, get used to it. The next thing you see is “(object)”. To figure out the object, you need to figure out what you are trying to do. If you want to click something, and have jQuery do something, what are you clicking? Is it going to apply to every element with that particular tag? Is it just going to apply to elements with a particular id or class? These are questions you have to ask yourself. The next part is the hardest part to learn, which is where jQuery documentation comes in pretty handy. .attribute(action) is 1 of about 500 jquery commands. Some return values, others modify existing values. There exist thousands of “plugins” which will even do additional commands. So if jQuery can’t do it, there is bound to be a plugin that can. The website for documentation is here: http://docs.jquery.com/ . Take a look at it. Once you get the basics down it is really simple to understand.

Let’s do just a little bit of coding. Lets say we have a button and we want to click it and make it say some text. Here is the HTML:

<input type="button" id="mybutton" value="Click me!">
<div class="output" id="mydiv">You can't see this text!</div>

So we have the button, we have the <div> but it is hidden. How do I know it is hidden? Well because I designed the “output” class to hide it! Here is the class code:

<style type="text/css">
.output{display:none;}
.output-add-class{font-weight:bold;}
</style>

See I told you that you couldn’t see that text. Now, for the fun part: jQuery! You will notice that my button doesn’t have an onclick=”do this()” type of stuff. We don’t need it! jQuery will do it all for us with one simple command, but lets not rush into so fast. Baby steps. It starts off the same as typical javasript and is enclosed in <script> tags and is usually placed in the <head> of the HTML:

<script type="text/javascript">
//CODE GOES HERE//
</script>

People usually throw functions in there, global variables, and onload functions. Well we want to do an “onload” function as we need to add the “onclick” property to the button:

$(document).ready(function(){Code goes here});

So when the “document” is “ready” we want to execute the following function() { }. You could continue to write in on one line, but to make it readable, it is usually broken up as much as you need, so it becomes:

$(document).ready(function(){
	//Code goes here
});

Now we can see our code, add multiple lines, and have it readable if we need to edit it later on. Let’s add the onclick property:

$(document).ready(function(){
	$('#mybutton').click(function(){ code goes here });
});

Its another long line of code. We can break it, but first I want to go over it. So you see the ‘#’ infront of ‘mybutton’. It is just like css in this sense. ‘#’ signifies id (id=’hello becomes ‘#hello’), ‘.’ signifies class (class=”hello” becomes “.hello”), and no prefix signifies that it applies to every tag of that nature(<div> becomes ‘div’). So the element with the id of mybutton will have an “onclick” function added to it. It doesn’t know what we want it to do, so we have to code it:

$(document).ready(function(){
	$('#mybutton').click(function(){ 
		alert('I used jQuery to do this');
	});
});

I don’t have to explain what this does. Lets make it do what we set out to do, display some text in a hidden div:

$(document).ready(function(){
	$('#mybutton').click(function(){ 
		$('#mydiv').html('Now you can see my text');
		$('#mydiv').removeClass('.output');
		$('#mydiv').addClass('.output-add-class');
	});
});

There we have it! All it does is changes the innerHTML (for you javascript buffs) using .html(‘html code’). Then we remove the class that makes it invisible (‘.output’ or class=”output”), and adds a class to make it bold (‘.output-add-class’ or class=”output-add-class”).

There is so much you can do with it. We could animate it even!

$(document).ready(function(){
	$('#mybutton').click(function(){ 
		$('#mydiv').html('Now you can see my text');
		$('#mydiv').show('slow');
		$('#mydiv').addClass('.output-add-class');
	});
});

This does the exact same thing. It will ’show’ hidden elements, and does so with some animation. So in 7 lines of code, we added an “onclick” attribute to a button, changed html, animated it as it is unveiled, and add a new class, not to mention, whether you are using IE, FF, Chrome, Opera, it will all show pretty much the same way. There is a ton more jQuery can do: ajax, attributes, animations, manipulations, all with minimal code. In a website I am designing, you can submit comments via ajax, and when it is submitted, the form disappears and is replaced with a different text, and all this while the comment section gets taller, and the form section shrinks down. All this in surprisingly few lines of code. Give it a try, it will make every website you design look exceptional.