jQuery JavaScript Framework Library: An Introduction
Last updated on by cjh
For a time, web pages were made up of HTML, and nothing more. Then Netscape came along with their JavaScript scripting language that gradually enabled greater control over a web pages ability to engage, interact and annoy the user.
But using JavaScript to create rich and dynamic web sites can seem like such a challenge, especially with so many web browser versions, many of which have missing features, half-baked functions and quirky bugs, that you often wonder how people do it.
There is Adobe Flash of course, a powerful browser plug-in, but Flash isn’t something you can just “do”, and the thought of learning it isn’t one you’re going to go with, so your only real option is the minimal JavaScript that you already know … or is it?
For as long as there has been JavaScript, there have been script sites that allowed you to include scripts from other people in to your pages, and while these were handy, they often contained their own problems, and compatibility issues when using multiple scripts from different sources. So, what do you do?
Scripting frameworks are a popular option, because they take away all the tough self-scripting that you’d need to do, and leave you with a relatively simple task of adding a few lines of JavaScript code to get your desired results.
jQuery is one such scripting library that provides a vast array of features that can be applied to your web site. Its popularity comes from its easy integration and powerful features that are available cross-platform, which even includes Internet Explorer 6. It ensures that a particular feature will perform almost seamlessly across many browsers, even if those browsers have bugs. It’s so good; it’s even used here at Freeola.
In fact, knowing nothing about JavaScript doesn’t have to be a barrier to using jQuery, so long as you have an HTML page, you can probably include the jQuery framework and functionality without any clue as to how it’s being done.
jQuery comes to you as a single file, and once called upon by your web page it will hook itself to the web document and be waiting for its instructions. You won’t have any need to read or edit the jQuery file, as it’s designed to integrate with your web page as soon as it’s downloaded. You simply provide “instruction” for it to perform particular functions.
jQuery allows you to apply functions to segments of your web site by asking you to tell it where it is via an ID or class reference. With this information, it can sniff out the documents structure and follow your request, much like CSS does when applying styles. To do this, however, it is important to mark up your HTML code so that you have reference points to grab on to.
At the time of this writing, the current version of jQuery is 1.7.1, which was released on the 21st November 2011.
The example used in this article will consist of a “frequently asked questions” (“FAQ”) page that lists some questions, with the answers hidden away until a user clicks the question. It doesn’t even come close to covering everything jQuery can do, but hopefully will give you the bug bite to go and explore what it can offer you.
Below is a basic starting example of a web page written in HTML. Hopefully you’ll recognise it instantly – if not, perhaps you should read up on HTML a little more before continuing with this article:
<html> <head> <title>My Web Site – Home Page</title> </head> <body> <h1>My Web Site – Home Page</h1> <p>Welcome to my web site</p> </body> </html>
The first thing you need to add is the reference to the jQuery library file. You can either host it under your own web site, as many people do, or use a copy that is hosted on a Content Delivery Network (CDN), either way is fine.
jQuery offer the same file in different ways, either as a “production” mode, which is hard to make out as it’s “minified” or as a “development” mode, which is written in a similar way to how anybody else would write JavaScript. You should use the “minified” version to reduce the file size and download, as you’ll have no need to edit the actual jQuery file.
To reference a JavaScript file, you need to use the <script> element, along with the “src” attribute that points to the jQuery file, inside the <head> of the web page. If you host the file yourself, the code might look like:
<script type="text/javascript" src="jquery-1.7.1.js"></script>
… or if you reference the file from a CDN (such as Google’s) you might use the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Including the above in your web page should look something like this:
<html> <head> <title>My Web Site – Home Page</title> <script type="text/javascript" src="jquery-1.7.1.js"></script> </head> <body> <h1>My Web Site – Home Page</h1> <p>Welcome to my web site</p> </body> </html>
If using a CDN to call the jQuery file, you must use the file name the CDN provide. However, when hosing the file yourself, you can rename it to anything you like.
Underneath the reference to the jQuery file, you should create another <script> element entry, as this is where your jQuery instruction code will go:
<html> <head> <title>My Web Site – Home Page</title> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> /*jQuery instructions / JavaScript goes here*/ </script> </head> <body> <h1>My Web Site – Home Page</h1> <p>Welcome to my web site</p> </body> </html>
Before you can give jQuery any instructions, you have to add the following code between your new <script> entry. This code will be where you have to add your jQuery instructions, as it’s the starting point that jQuery uses to wait for your web page to load before trying to perform any function:
$(document).ready(function() {
/*jQuery instruction go here */
});
… which, when included in your web page, should give you something like this:
<html>
<head>
<title>My Web Site – Home Page</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*jQuery instruction go here */
});
</script>
</head>
<body>
<h1>My Web Site – Home Page</h1>
<p>Welcome to my web site</p>
</body>
</html>
If you prefer, you can add your jQuery instructions to a separate file, and in fact this is recommended if you are using the same jQuery code on more than one web page.
<html> <head> <title>My Web Site – Home Page</title> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery-instructions.js"></script> </head> <body> <h1>My Web Site – Home Page</h1> <p>Welcome to my web site</p> </body> </html>
… with the file “jquery-instructions.js” containing the code:
$(document).ready(function() {
/*jQuery instruction go here */
});
Again, you can call the file whatever you like. For the rest of this article though, the instruction will be included within the HTML document.
As stated before, this example with be of an FAQ page, so we first need a page of FAQ’s, which might look like this:
<html>
<head>
<title>My Web Site – FAQ pages</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*jQuery instruction go here */
});
</script>
</head>
<body>
<h1>FAQ</h1>
<p>click a question to show the answer</p>
<div id="faq">
<div id="faq1">
<h3>Question 1</h3>
<p>Answer 1.</p>
</div>
<div id="faq2">
<h3>Question 2</h3>
<p>Answer 2.</p>
</div>
<div id="faq3">
<h3>Question 3</h3>
<p>Answer 3.</p>
</div>
</div>
</body>
</html>
Notice that each question and answer is within its own <div> element that is given an ID based on the question number:
<div id="faq1"> <h3>Question 1</h3> <p>Answer 1.</p> </div>
You can give whatever ID you like, so long as they are unique. Notice also that the whole FAQ is itself enclosed within a <div> that has its own ID. Your pages may not match this type of mark up, and that’s okay, the important bit is that you need to ensure that each section that you plan to manipulate with jQuery has a structure that includes an ID or class name.
jQuery includes an easy method for selecting the element in your web page that you wish to apply your function. It follows the CSS method, but with the reference being encased within a dollar sign, within parentheses (brackets) and quotation marks, such as $("div#faq p") which would mean “the paragraph element within the <div> element which has the ID of faq”.
We first need to ask jQuery to hide our answers from view, which we can do with this single line of code within the jQuery starting block:
$("div#faq p").hide();
As noted above, we reference the <div id="faq"> element which contains our FAQ’s, while also referencing the <p> elements, which contain each of the answers. By adding the “hide()” function call at the end, we are asking jQuery to use its built-in hide function to hide the paragraphs of text that contain our answers. By doing so this way, we ensure that the answers are part of the web document, so that if jQuery were to fail to load, the answers would be visible like normal.
We then need to ask jQuery to watch for the questions being clicked, and we do this with the following line of code for each question (*** isn’t part of the code):
$("div#faq1 h3").click(***);
$("div#faq2 h3").click(***);
$("div#faq3 h3").click(***);
Notice that each line references each <div> element that contains a question / answer combo. This tells jQuery to watch out for when each heading is clicked, so that it can do something when this happens. The code to execute for when something is clicked goes inside the click functions brackets – in place of the ***.
We want jQuery to show an answer to the question when the question is clicked, so we call the “show()” function and ask for it to be applied to the answer, using the code:
$("div#faq1 h3").click(function(){$("div#faq1 p").show();});
$("div#faq2 h3").click(function(){$("div#faq2 p").show();});
$("div#faq3 h3").click(function(){$("div#faq3 p").show();});
It might look a little complex, but inside the “click()” function the code is saying “when the <h3> element for that question is clicked, perform the show() function on the <p> element of that same question”
And finally, to give an additional indication to the user that a question has to be clicked to show the answer (the main indication being that you tell them at the top of the FAQ) you can make the mouse pointer chance to the “link click finger” pointer using the following like:
$("div#faq h3").mouseover(function(){$("div#faq h3").css({"cursor":"pointer"});});
This tells jQuery that each <h3> element inside the faq section should show a “link click finger” pointer when the mouse is moved over the heading You can do this in CSS alone if you prefer.
Combining the code above would give you an HTML document that looks something like this:
<html>
<head>
<title>My Web Site – FAQ pages</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Hide all answers to begin with */
$("div#faq p").hide();
/* Show "click" finger when the mouse is over a question */
$("div#faq h3").mouseover(function(){$("div#faq h3").css({"cursor":"pointer"});});
/* Show single answer when question is clicked */
$("div#faq1 h3").click(function(){$("div#faq1 p").show();});
$("div#faq2 h3").click(function(){$("div#faq2 p").show();});
$("div#faq3 h3").click(function(){$("div#faq3 p").show();});
});
</script>
</head>
<body>
<h1>FAQ</h1>
<p>click a question to show the answer</p>
<div id="faq">
<div id="faq1">
<h3>Question 1</h3>
<p>Answer 1.</p>
</div>
<div id="faq2">
<h3>Question 2</h3>
<p>Answer 2.</p>
</div>
<div id="faq3">
<h3>Question 3</h3>
<p>Answer 3.</p>
</div>
</div>
</body>
</html>
Looking at the jQuery instruction, you’ll see that we only really needed 5 lines of code to make our desired FAQ example page.
Showing the answer when a question is clicked is great, but you might like to hide it again as well, which can be handy for large FAQ pages. To do so, rather than using the jQuery function “show()”, we use the jQuery function “toggle()”.
So, rather than the three lines above that read:
$("div#faq1 h3").click(function(){$("div#faq1 p").show();});
$("div#faq2 h3").click(function(){$("div#faq2 p").show();});
$("div#faq3 h3").click(function(){$("div#faq3 p").show();});
You would change the functions “show()” to “toggle()”, which gives you
$("div#faq1 h3").click(function(){$("div#faq1 p").toggle();});
$("div#faq2 h3").click(function(){$("div#faq2 p").toggle();});
$("div#faq3 h3").click(function(){$("div#faq3 p").toggle();});
… and all of a sudden, clicking each question will hide the answer.
Showing and hiding the answer when a question is clicked is great, but that does seem a little dull. Luckily, the “toggle()” function allows you to animate the show / hide aspect by making the text smoothly appear and disappear. All you need to do is tell the “toggle()” function to do it “slow” or “fast”, such as:
$("div#faq1 h3").click(function(){$("div#faq1 p").toggle('slow');});
$("div#faq2 h3").click(function(){$("div#faq2 p").toggle('fast');});
$("div#faq3 h3").click(function(){$("div#faq3 p").toggle('slow');});
In the example above, the first and third question would smoothly change slowly, while question 2 would do it quickly. You can also assign the speed via a number of milliseconds, with 200 being the same as fast, and 600 being the same as slow, for example:
$("div#faq1 h3").click(function(){$("div#faq1 p").toggle(600);});
$("div#faq2 h3").click(function(){$("div#faq2 p").toggle(200);});
$("div#faq3 h3").click(function(){$("div#faq3 p").toggle(600);});
So, if we were to use the “toggle()” function with a slow animation our final web page code might look like:
<html>
<head>
<title>My Web Site – FAQ pages</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Hide all answers to begin with */
$("div#faq p").hide();
/* Show "click" finger when the mouse is over a question */
$("div#faq h3").mouseover(function(){$("div#faq h3").css({"cursor":"pointer"});});
/* Show or hide single answer when question is clicked */
$("div#faq1 h3").click(function(){$("div#faq1 p").toggle('slow');});
$("div#faq2 h3").click(function(){$("div#faq2 p").toggle('slow');});
$("div#faq3 h3").click(function(){$("div#faq3 p").toggle('slow');});
});
</script>
</head>
<body>
<h1>FAQ</h1>
<p>click a question to show the answer</p>
<div id="faq">
<div id="faq1">
<h3>Question 1</h3>
<p>Answer 1.</p>
</div>
<div id="faq2">
<h3>Question 2</h3>
<p>Answer 2.</p>
</div>
<div id="faq3">
<h3>Question 3</h3>
<p>Answer 3.</p>
</div>
</div>
</body>
</html>
And as you can see, 5 lines of jQuery instructions have giving us an FAQ page with some smoothly animated answers that appear and disappear when the question is clicked.
Below is a live example of the show / hide animation, powered by jQuery. Click on the question to reveal the answer:
Question 1
Answer 1.
Question 2
Answer 2.
Question 3
Answer 3.
As mentioned above, the example used here doesn’t even begin to make use of abilities of jQuery. Hopefully you’ve seen how powerful a few likes of code can be, and why using a framework can ease your development and increase the richness of your web site.
After all, if Freeola use it, it must be awesome!!!
One final note - jQuery at its core has some great features, and one of those features is its extensibility, by allowing other developers to create plugins that are powered by the jQuery core, and because they are laid on top of jQuery, generally result in very little compatibility issues with one another.
If jQuery doesn’t offer you something, chances are by now a plugin for jQuery is already written and waiting for you.
To include any given plugin, you simply have to include the plugin file in your web page, in the same way you do the jQuery file, such as:
<html>
<head>
<title>My Web Site – Home Page</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-plugin.js"></script>
<script type="text/javascript" src="jquery-another-plugin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*jQuery instructions / JavaScript goes here*/
});
</script></head>
<body>
<h1>My Web Site – Home Page</h1>
<p>Welcome to my web site</p>
</body>
</html>
Live Chat is offline
Live Chat is available:
9:30am to 5:30pm Monday to Friday (excluding bank holidays).
It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, Edge, or Opera will provide a better, safer browsing experience for you.