∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

jQuery Basics Tutorial

Xah Lee, 2010-10-23, 2011-03-18

This page is a basic tutorial on JQuery. To use JQuery, you should know the basics of javascript. For example, how to select a element, how to change its css property. (See: Javascript Basics Tutorial by Examples)

jQuery (jq) is the most popular javascript library. (See: Web Tech Stats 2010.) It makes coding javascript very convenient, and you don't have to worry about different browser compatibilities, because jQuery does that for you. jquery's home page is at jquery.com.

Advertise Here For Profit

Adding the jQuery Lib

Add the following to your pages:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Because jq is very popular, so Google and Microsoft both host it. You don't need to place the jq lib on your site. Using hosted code is actually better because users probably already have it cached in browser.

Adding Your Javascript Code

Add the following to your pages:

<script type="text/javascript" src="http://example.com/my_jq_code.js"></script>

The 〔my_jq_code.js〕 is your javascript code.

Simple Complete Template

Copy the following template to play with jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQuery test pad</title>
</head>
<body>

<p>random html here</p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="http://example.com/my_jq_code.js"></script>

</body>
</html>

Simple Examples

Call Function After DOM Finished Loading

$(document).ready( function(){
// your own js code here
// alert("hi");
} );

The above code will execute your code when the browser finished loading the html.

Usually, you want your code to run only after the html has loaded, because otherwise, your js code may start to manipulate tags but they don't exist yet.

The $(document).ready() is similar in purpose to the normal js code window.onload = …. When using “window.onload”, the browser will start to execute you code only after the page is completed loaded, including all images or iframe. This is usually not desirable, because if a image stuck, your code won't start to run until the stuck image got timed out. (See: Javascript Execution Order; HTML5 Asynchronous Javascript.)

Alternatively, you can place your js code at the end of your html, right before </body>.

Add a event to link click

This adds a “click” event handler to all link tags “a”.

$("a").click( function(event){alert("hi");} );

This means, when user clicks on a link, it'll do what you want, plus the default behavior of visiting to the link.

Prevents Default Behavior

The following prevents the default behavior of a link.

   $("a").click(function(event){
     alert("hi");
     event.preventDefault();
   });

Adding or Removing a Class

$("a").addClass("myClassName");
$("a").removeClass("myClassName");

If you have a link like this in your html:

go <a href="http://example.com/">here</a>

Now, the above js code will make it like this:

go <a class="myClassName" href="http://example.com/">here</a>

For all “<a>” tags.

This is useful because you can use css to define a particular style, and now you can change all elements to that style when something happens.

CSS Effects

The following makes links disappear when clicked.

$("a").click(function(myEvent){
   myEvent.preventDefault();
   $(this).hide("slow");
 });