Javascript 101: Introduction to jQuery

Description: Animations, fades, and more.

Javascript itself is an amazing language. While it can completely comprise any website, it is the base of all interaction elements. Even as it does truly amazing things by default, libraries have been created to aid the process of web design.

There are numerous Javascript libraries, each doing different things and having different individual plugins. To use them, you simply include a link to a Javascript file in your webpage, and functions will be passed to your site for you to use at any time. They're extremely useful, but cannot be used simultaneously.

Just how useful? Let's just say you wanted to make a specific element on your page fade out and slide to the right when clicked. This code would take about 100 lines plus. And you would have to copy and paste that code for every element you wanted to apply the effect to. Now, with a library, it would take only about 4 lines.

The main libraries are:

Prototype
jQuery
MooTools

My favorite of all of these would be jQuery, which will be the focus of this tutorial.

Installing jQuery

To use jQuery on a webpage, you have two options. First, you can download a simply JS file from http://jquery.com/ , and include the following code in the <head> section of your document.

<script type="text/javascript" language="Javascript" src="js/jquery.js"></script>

Second, if you don't want to kill your bandwidth and server space, you can eat up Google's:

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

Either way, your page should resemble something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<title>My Page</title>		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>	</head>	<body>		<p>Awesomesauce content.</p>	</body></html>

Using jQuery

We're not completely ready to use jQuery. In order to tell the browser we will be using it, let's include this text in our <head>

<script type="text/javascript" language="Javascript">	$(document).ready(function(){			});</script>

Altogether now:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<title>My Page</title>		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>		<script type="text/javascript" language="Javascript">			$(document).ready(function(){		    				});		</script>	</head>	<body>		<p>Awesomesauce content.</p>	</body></html>

Calling jQuery

jQuery has to be called in order to specify we're using it. We call jQuery by using a dollar sign ($) and then a class name, id of an element, or an element itself. We then add a period (.) and the functions we want to apply to each element. Here's some examples:

$("body"). (function name here)$("p"). (function name here)$(".class"). (function name here)$("#id"). (function name here)

So as for the functions, we have a lot of basic ones in jQuery. The ones we will look at are:

$("element").fadeOut();$("element").fadeIn();$("element").show();$("element").hide();

You should have noticed that all functions have a () after the name, followed by a semicolon.

Let's try to use them now. The code for the page we've been using (look above for reference) has <p>Awesomesauce content.</p> in the body of the document. I want this paragraph to fade out when the page is loaded. How do we do that?

$("p").fadeOut();

Here's how it would look placed inside our page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<title>My Page</title>		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>		<script type="text/javascript" language="Javascript">			$(document).ready(function(){				$("p").fadeOut();			});		</script>	</head>	<body>		<p>Awesomesauce content.</p>	</body></html>

Try loading that into your webpage and viewing it in your browser. The text correctly fades out when you load the page. But the problem is, I wanted it to fade out when you click it. How can I accomplish this?

Events

Events in jQuery tell when exactly to use the functions you provide. It can be on click, mouse down, mouse up, etc. They're a little different than functions though. We start off with the name of the event, the two parentheses, and the semicolon. However, inside the parentheses we tell the browser what to do when the event occurs. For example:

$("body").click(function() {	$(".class").hide();	$("#id").show();});

So to make the paragraph fade out on click, we use the following code:

$("p").click(function() {	$(this).fadeOut();});

You'll notice that I used the word "this" when telling the <p> to fade out. I did this, because, if I had used "p" as before, jQuery would fade out all paragraph elements. In my webpage, I only want the <p> that had been clicked to fade out. Here's the code in my page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>My Page</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
		<script type="text/javascript" language="Javascript">
			$(document).ready(function(){
				$("p").click(function() {
					$(this).fadeOut();
				});
		</script>

	</head>

	<body>

		<p>Awesomesauce content.</p>

	</body>

</html>

To see this in action, head over to http://www.johnshamm.../introtojquery/