Coding - Javascript - jQuery

Getting Started with jQuery

When you start enhancing Web pages using JavaScript you begin to see how interactivity can be built into your sites. However, coding sophisticated interaction features into Web pages can be laborious, particularly when it comes to browser compatibility. JavaScript libraries such as jQuery give you the ability to add complex effects to your pages without having to code the implementation details yourself. In this tutorial we will learn how to get started using jQuery in your sites – you can complete the tutorial as long as you have basic HTML, CSS and JavaScript knowledge.

Using jQuery in your Pages

You can use the jQuery resource in one of two ways – by including the code on your own server or by linking to an existing online repository for it, such as Google Code. Start by creating a new HTML5 page:

<!DOCTYPE html>



Serve jQuery Locally

If you want to use jQuery from your own server, download one of the compressed copies from the jQuery site. Once you have it on your computer, unzip it and upload the file that begins jquery and ends .js to your own server. You can then include a link to the script in either the head or body section of your page:

<script src="jquery-1.11.0.min.js"></script>

Make sure the name and location match the file you uploaded – the above example would work in cases where your HTML page is in the same directory on your server as the jQuery file.

Link to jQuery on Google Code

Rather than copying jQuery to your own server, you can opt to use an existing online copy. These hosted copies can improve your site performance because they are served from various locations around the globe and if the user’s browser has already downloaded the script for another site, it will not need to be downloaded again. To use the Google Code hosted version, first check for the latest jQuery link. Copy the script tag from the Google Code page and paste it into your head or body section:

<script src="//"></script>

Your page is now ready to utilize jQuery.

Launching jQuery

The most typical approach to using jQuery is to start it when the page has loaded in the user’s browser. To achieve this, add the following to the body section of your page:

//run when dom is loaded
$(document).ready(function() {
//jQuery effects here

Like most JavaScript, jQuery works with the DOM (Document Object Model). The DOM represents the structure of the page – through it you can manipulate the content, appearance and behavior of the elements your users see and interact with. The document ready function lets you know when the DOM is loaded – inside this section you can include all code you want to execute as soon as the page loads.

Adding Interactivity

Let’s add some elements to the page so that we can manipulate them with jQuery. Add the following to the body section of your page, before the jQuery script elements if you added them to the body:

<input type="button" class="btn" value="click me"/>
<input type="button" class="btn" value="click me"/>
<input type="button" class="btn" value="click me"/>

These three buttons all share the same class attribute, which we will use to refer to them in jQuery. Inside the document ready function you added in the script element in your page, include the following function:

$(".btn").click(function(event) {

The code first identifies one or more elements in the page using the class name (preceded by . as you may have seen in CSS). The code then attaches a click listener function to these elements – clicking the selected elements will cause the code inside the function to execute. Save your page and upload it to your server – click any of the buttons:


If you have created click event listeners in pure JavaScript before you will instantly see how much quicker jQuery can be to work with. Let’s alter this function to make it more useful. First, add some CSS code to the head section of your page:

<style type="text/css">
.btn {background-color:#CCCCCC; color:#330000;}
.btn_clicked {background-color:#333333; color:#FFFFFF;}

Notice that we add declarations for two classes here, one of which we assigned to the input button elements. Now replace the line in which you output an alert with the following inside the jQuery click function:


The keyword this represents the selected elements the function applies to, which in this case is elements with “btn” class. When the user clicks the selected button input elements, the “btn” class attribute is removed and the alternative “btn_clicked” class is added. This will alter the appearance of the buttons because these classes have different CSS declarations associated with them. Save your file, upload and browse to it, then click a button:


This example may seem trivial, but you can begin to see how jQuery lets you tailor style and interactivity in your pages with a minimal amount of manual coding. Instead of removing and adding a class, try the following:


Save, upload and browse to your page again. This time clicking the button will make it slowly disappear from the page – jQuery provides a wide range of these animated effects.

jQuery Principles

The simple example we have worked through demonstrates the basic practices involved in using jQuery. You can use it as the basis for exploring the resource. Remember that a typical jQuery function first selects a sub-section of page elements, then applies an effect on user interaction with them. The effect does not have to be applied to the elements the user has interacted with, but can be applied to any elements in the page.

Your jQuery functions can respond to various events in the user’s browser – see the jQuery Events overview for details. To get into the swing of using jQuery in your pages, explore the many Effects you can choose from.


In this tutorial we have worked through the basics involved in using jQuery within your Web pages. You can use the page you built as a foundation for trying out new jQuery techniques. Try to enhance your pages by controlling the way your content items appear to the user. As with any Web development tool, you should only use jQuery functions to improve the way users access the content of your site, not to interfere with it. Testing your jQuery functions in multiple browsers is also essential.

About the author

I'm a developer and technical writer - see for details. Follow me on Twitter @BrainDeadAir or email me at

Share this post

Leave a Comment

Subscribe To Our Newsletter