Intro to jQuery

December 28, 2011
Developers, jQuery
LinkedInTwitterFacebookEmail

What is jQuery?

jQuery is a Javascript library.

Need a little more info? Yeah, so did I.

Javascript is a programming language automatically included in browsers. If you’re reading this, you’ve probably already used Javascript. Somebody, somewhere along the line, decided that they should create all the functions they use in Javascript and include them in one page. That way, they wouldn’t have to rewrite each function each time. And thus was born Libraries. jQuery is one of these libraries that you can include using one little link:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Note: There are many places that host jQuery. You can even download the library and host it yourself. I always use Google’s hosting because it’s easy. You will need to update the link every once in a while, when a new version comes out.

Should I learn jQuery?

If you use Javascript, find Javascript too hard to use, you should learn jQuery. It’s simple to learn, easy to use, and will make your coding 10x faster.*

*This might be a slight dramatization, but only slight.

How do I get started?

Step 1: Add the Script Source for the jQuery hosted on Google (or add another one, your choice) to each page that will use it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Step 2: Add the following code to the head of the page:

<script>
$(document).ready(function(){
//add coding here
});
</script>

This tells it to wait till the page is loaded, and then run the jQuery found where it says “//add coding here”. This is quite possibly the most important thing to remember to include. Without telling it to wait, it can often cause the code to run early, and then your beautiful coding won’t work – even if it is written perfectly.

Try adding this where it says “//add coding here” (above):

$("#button").click(function(){
alert ('This worked!!!!');
});

And create a button on the page. Give the button an ID of “button”.

<button id="button">Click Me!</button>

Save the page, upload to a test site, and click on the button. It will give you a javascript Alert that says “This worked!!!”.

Where do I go now?

Include the $(document).ready function above, and add any coding you want where it’s indicated. Watch the closing parenthesis closely, as missing any of them will kill your code. And have fun! Seriously, go out and watch a movie, because you’ll have a lot of free time now that coding is so quick.

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>