jQuery is amazing. If you’ve ever spent a lot of time working with Javascript, before the days of jQuery – you will most likely agree.
jQuery is a Javascript framework which allows normally complex Javascript operations to be performed very easily (and often in a single line of code). The secret to jQuery is the selector ‘$’. In the (not-so) olden days, front-end web developers had to use the document.getElementById() function in order to grab and manipulate an element on an HTML page. So for example, if you wanted to insert some text within a <div> tag on a page, you would first of all have to give the <div> tag an id e.g.:
<div id="mydiv"></div>
and then use the following Javascript:
var mydiv = document.getElementById("mydiv");
mydiv.innerText = "Hello world!";
If you add this and the <div id=”mydiv”></div> element to one of your pages you should see the string “Hello world!” appear inside the <div> tag whenever the page is loaded.
Doesn’t seem that hard really does it? What if you wanted to add the string “Hello world!” to every <div> tag on your page? To do this would require using the document.getElementsByTagName() function. You would then have to loop through each element and insert the text on each iteration of the loop e.g.:
var array_of_divs = document.getElementsByTagName("div");
for(i=0; i<array_of_divs.length; i++)
{
array_of_divs[i].innerText = "Hello world!";
}
That’s 5 lines of code (including braces). With jQuery this can be done in a single line of code:
$("div").text("Hello world!");
The first part of that line $(“div”) is the selector. It basically means get every <div> element on the page and what follows it is just one of many functions that can be used. For example you could have used something like this:
$("div").fadeOut();
As the function name suggests, this will cause all <div> elements on the page to fade out. Doing something like this without jQuery would take a whole lot of Javascript code and an advanced understanding of the language.
Another nice feature of jQuery is chaining functions together. Taking the above example, I can add the string “Hello world!” to all my <div> tags and make them fade out in a single line of code using jQuery:
$("div").text("Hello world!").fadeOut();
That is pretty damn cool. Let’s get on to a practical example.
The first thing you will want to do is create a page in your favourite web dev tool and preferably on a development domain if you have one handy. I’ve created a file named “index.html”.
In this page, make sure you have the standard HTML blocks e.g.:
<html> <head> <title>My test page</title> </head> <body> </body> </html>
The next thing we need to do to this page is load up the jQuery framework. The quickest way to do this is by using a hosted version of the lib which means you don’t have to download the jQuery files and upload them to your test server. I normally link to Google Ajax Libraries. Your <head> block should now look something like this:
<html> <head> <title>My test page</title> <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="js/main.js"></script> </head> <body> </body> </html>
You can see in the above code that I’ve added another line linking to a file named “main.js” within a folder named “js”. It’s a good idea to keep your Javascript separate from your HTML as it not only makes your code more readable but also allows you to re-use the code across your entire site and if you need to make any changes to the Javascript, you only have to do it one place.
In my “js/main.js” file I’ve added the following code:
var j = jQuery.noConflict();
Why? Well you might be asked to work on a site which already uses one of the other Javascript frameworks available such as Prototype which is what the popular image overlay app Lightview is based on.
Prototype also uses the dollar sign “$” as its selector but jQuery and Prototype are incompatible with each other. If they both try and use the “$” selector we experience problems. The line above gets around this problem by denoting a different character as the selector and in this instance I’ve used “j”. You can use whatever you want. Some coders use “jQuery”. So their code might look like:
jQuery("div").innerText("Hello world!");
The next piece of code to add to the “main.js” file is:
j(document).ready(function()
{
alert("Hello world!");
});
What’s this for? Basically this piece of code means “whenever the page is finished loading, execute whatever is contained within this function”. In the above example you can see that an alert box containing the string “Hello world!” will be shown to the user once the page is loaded.
Let’s put this altogether!
So our page “index.html” looks as follows:
<html> <head> <title>My test page</title> <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="js/main.js"></script> </head> <body> </body> </html>
And our “js/main.js” file will contain the following code:
var j = jQuery.noConflict();
j(document).ready(function()
{
alert("Hello world!");
});
When you save and upload these files to your development server you should see the alert “Hello world!” when you load up “index.html” in your browser. If so, then you’ll know that jQuery is working correctly and you are ready to start coding some more complicated jQuery scripts.
Improve Your Skills: 25 jQuery Beginner Tutorials Roundup, July 11th, 2010 on 12:03 pm
[...] 22. Beginner’s Guide to jQuery [...]