jQuery has quickly become one of the most popular JavaScript libraries out there today. One of the main reasons is because of how efficient it is because when using it, developers are able to write less code.
jQuery is also great tool for creating animations and effects for your websites, UI’s etc. It gives us the ability to add many of the things we want out of JavaScript without bloated code.
Let’s look at the anatomy of a basic jQuery statement.
First thing we see is a dollar sign. The dollar sign represents jQuery. If you’re familiar with WordPress, it uses jQuery in what’s called “no-conflict” mode. Statements normally look like this:
jQuery(".myDiv").fadeIn("slow");
jQuery(".myNextDiv").css({display:"none"});No-conflict mode is used if you’re using other libraries. The dollar sign might mean something else in another library so no-conflict mode is advised. Now that we know what the dollar sign represents let’s move on to the next section. Next up is the selector; simply put the selector can be any element in your HTML document. In JavaScript there are only two ways to select objects.
- document,getElementById
- document.getElementsByTagName
The former being limited to only elements that had id’s, the latter being too general in it’s selection at times.
In jQuery we can select any element available to us. This is something developers always wanted from JavaScript; being able to select any element without having to create extra unwanted id’s just for functionality. jQuery helps to keep our code as semantic as possible.
Next there is a dot that connects the next section we’ll talk about; functions and callbacks. It’s pretty much a given that if we’re creating a jQuery statement, we’re going to do something. Hence we need some sort of function; to probably hide something, fade it in, add extra HTML markup etc. those are all some sort of function.
These functions can also have extra parameters or options. Lets look at the anatomy of jQuery again and pay closer attention to the function. We are fading in a div and telling it to fade it in slowly. That slow written in quotes is a parameter or option. Using parameters are optional, as are callbacks but they give you as the developer more control instead of sticking with the preset. Now let’s talk about callbacks.
A callback is simply a function that is executed after the function that called it is completed. In our case, we could for example after our div has faded in create an alert saying “You just faded in this div!”. Here are the two basic approaches:
$(".myDiv").fadeIn("slow", function(){alert("You have just faded in this div!");});
$(".myDiv").fadeIn("slow", alertMe);The first method is an anonymous function with the alert inside of it. This is the method I use most of the time as I never find an instance that I use the same callback for different functions.
If you are more comfortable with the latter, then approach number two is better. Your callback is just a function you have already created. Ensure that your function is created before the callback is executed or you’ll encounter an error, another reason why the anonymous function is used a lot. You will not encounter that error if you’re using an anonymous function. Which one you choose to use is up to you.
Now that we better understand statements, we need to find the most efficient way that our jQuery code runs when all the components have loaded; the document, scripts etc.
Javascript developers will be familiar with the onload event. jQuery has something better, the ready event.
This is how we set it up:
$(document).ready(function()
{
//All our jQuery code inside here
})Let’s use our understanding of the anatomy of a jQuery statement. We are selecting the document, if the document is ready we execute our code. This is the best way of ensuring that our scripts run when and only when the document is ready.
Now that you understand the anatomy of a jQuery statement and how to execute it properly you can use it as an alternative to writing JavaScript on your own in many instances.
For full documentation on the jQuery library, go to http://docs.jquery.com/.
