If you’re interested in web development, you’ve doubtlessly come across jQuery and wondered about how you could utilize it in your own projects. jQuery looks a little daunting at first, but hopefully by the end of this little introduction to jQuery you’ll have a much firmer grasp on it and be able to take your projects to the next level.
What is it?
If you go by their website jQuery touts itself as being able to do damn near everything. And in truth, it does. It simplifies otherwise tedious tasks and allows you to add huge amounts of functionality to your website without much code. What it IS, however, is a Framework that provides you the ability to perform these tedious tasks in a way that’s simple and concise while achieving cross-browser support. This means that you can write your code quickly while knowing that it will work exactly how you expect it to in every browser. This cuts down on the amount of development time that you spend. Another bonus is the way that jQuery naming conventions make sense. Things like adding onclick handlers are as simple as adding .click(); to a selector (more on this later). This means that the learning curve is very shallow allowing you to literally just jump right now.
Getting started
Your first step will be to download jQuery. To do that, just head over to their website (http://www.jquery.com) and you can download it. It will be up to you whether you want to download the production or development versions. Both are the same, it’s just that the production code has been minified so it results in a much smaller file size. If you are just starting out however, I’d recommend going with the development version. If you have a full fledged IDE then your code hinting will come into play and you’ll be able to see descriptions of what the arguments are and such. However, even if you don’t, the development code will definitely be something you’ll want to peruse through in your spare time. You can learn a lot from looking at other peoples code. Once you have it downloaded, you can use it by simply including the following:
<script type="text/javascript" src="path/to/jquery.js"></script>
I’ve intentionally left the “src” attribute pointing to a random file as you will have to change it to point to wherever your jQuery file is.
First Steps
When using jQuery you have to remember that you’ll be spending a lot of time manipulating the DOM. In order for this to occur, you’ll have to wait till the DOM is loaded. However, because of where your script files are generally located, they may load before the DOM has completely finished. If this happens then your scripts will just run in to a lot of errors. jQuery comes with a built in way to check that the DOM is ready for use. All your jQuery scripts should run only AFTER the DOM is ready. In a separate script tag, you can add the following
$(document).ready(function(){ })jQuery makes use of anonymous functions quite a bit, so you may want to make a note of that. You don’t NEED to have a function name in JavaScript. $ is a global variable created by jQuery as an accessor to all of its methods. This means that all your scripts in jQuery will utilize $ to perform it’s functions. $ will accept multiple types of arguments. You can either provide an ID, a Class or even an html tag for jQuery to work its magic on. I recommend you read up on the documentation for $ as it is one thing that you will definitely need to understand to perform complex manipulations.
You can go ahead and add
<a href="#">Link</a>
to the body section of your code. This is so that we have something to work with in jQuery.
Going back to our anonymous function, you can change it so that it looks like this
$(document).ready(function(){
$('a').click(function(){ alert('Works!'); });
}Because of how powerful jQuery is, that will actually apply itself to EVERY anchor tag in the DOM. You can pick and choose which ones by applying numerous selectors. There are so many involved that that itself is the topic of another discussion. However, if you are looking to work on a particular id the code would be
$('#id')and if you were working on a class you could use
$('.class')Keep in mind that jQuery will always work on EVERYTHING that matches the selector that you have provided.
jQuery is also chainable. Because of how the code is written, you can keep tacking on different functions. For example, if we look through the effects section of the documentation you’ll see things like slideDown() and fadeIn(). These effects can be chained together to create multiple tiers of animations or events.
My recommendation is that you definitely check out the full documentation and spend a lot of time playing around with it. There will be a few more jQuery tutorials popping up on the website as I start preparing the gradual jump from no jQuery experience to enough experience to write the client-side functionality of our SWIM!
