jQuery Tutorial

Hello, I just decided to write a little jQuery Tutorial, with some examples.

Demo 1: Alert Box

First, we register a so called: “ready event” for the document.
In jQuery we do this with: $(document).ready(function()).
In the source code it would look like this:

$(document).ready(function() {
    //Do something, when the document is loaded.
});

The complete source code looks like this:

Demo 1: Alert Box – Example: That’s what it looks like

<html>
	<head>
		<script src="jquery.js" type="text/javascript"></script>

		<!--Code for Demo 1-->
		<script type="text/javascript">
		$(document).ready(function(){
			$("a").click(function(){
				alert("Hello World");
			});
		});
		</script>
	</head>
	<body>
		<p><a href="#">A link</a></p>
		<p><a href="#">Another link</a></p>
	</body>
</html>

Now let’s have a look, what we have done. $(“a”) is a jQuery selector. With $(“element”) we can select different things. We can select classes (“.classOfElement”) or ID’s $(“#idOfElement”). But we also can combine this, to for example select all divs with the class development: $(“div.development”).

In our case we select all link (a) elements in our document and with click() we add a click event to all selected elements. In our case a normal javascipt function is called then: alert(“Hello World”). So now, what happends at this function? When klicked on an a element in our document, it calls a MessageBox with the text: “Hello World”. That’s exactly what we wanted.

Demo 2: CSS Classes

Another thing jQuery can do is to add and remove css classes. First we create in css a class called: test. In this case let’s take a bold and italic font.

a.test {
    font-weight: bold;
    font-style: italic;
}

Let’s go over to javascript. When the document is loaded, the class test should be added to all links.
For this goal, we take the previously learned function $(document).ready(function()). With $(“a”) we select all a elements and with the function addClass() we add a class to them. In our case it’s the class test.

$(document).ready(function(){
    $("a").addClass("test");
});

Let’s add a few more links for testing and we will see what happends.

Demo 2: CSS Classes – Example: That’s what it looks like

<html>
	<head>
		<script src="jquery.js" type="text/javascript"></script>

		<!--Create CSS class "test" bold and italic -->
		 <style type="text/css">
			a.test { font-weight: bold; font-style:italic;}
		 </style>

		<!--Code for Demo 2-->
		<script type="text/javascript">
		$(document).ready(function(){
			$("a").addClass("test");
		});
		</script>
	</head>
	<body>
		<p><a href="#">A link</a></p>
		<p><a href="#">Another link</a></p>
	</body>
</html>

Let’s have a quick look at the site. We see that all links are bold and italic. So the class test was added to them.

jQuery has some special effects, which we will use now. They make some very nice eyecandy without much trouble.
First, let’s create a simple div container with some text in it.

    <div style="background-color:#336699;color:#fff;">
		I'm a textbox and have alot of work to do 
	</div>

I’ve set the background via style attribute to blue and the font color to white, that we can see the box a little better.
Now, let’s add a link, that should do something with that box.

<a href="#" id="shrink">Shrink the box! (80 x 120px)</a>

I added the id shrink to the link, so we can later select this link with jQuery.
Now, lets add some javascript. I want the link to do something with the box, when we click it.

$(document).ready(function(){
	/*Shrink box*/
		$('a#shrink').click(function(){
		$('div').animate({ height: 80, width: 120 }, "slow", function(){});
	})
});

With $(“a#shrink”) we select our previously created link and add the click event to it. Like previously on a click the javascript code in the brackets is executed.
In the next step we select the element, that should be changed in some way, in our case it’s $(“div”), which means that we select all div elements. We can animate objects with the function animate. Animate has different properties. In our case we set the height to 80px and the width to 120px, we want the effect to be slow, that’s why we added a slow.

Demo 3: Special Effects – Example: That’s what it looks like

<html>
	<head>
		<!-- Load jQuery framework -->
		<script src="jquery.js" type="text/javascript"></script>

		<!--Code for Demo 3-->
		<script type="text/javascript">
		$(document).ready(function(){
			/*Shrink box*/
			$('a#shrink').click(function(){
				$('div').animate({ height: 80, width: 120 }, "slow", function(){});
			})
			/*Enlarge box*/
			$('a#enlarge').click(function(){
				$('div').animate({ height: 200, width: 800 }, "slow", function(){});
			})
			/*Hide and Show*/
			$("a#slideFade").toggle(function(){
				$("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
			},function(){
				$("div").animate({ height: 'show', opacity: 'show' }, 'slow');
			})
		});
		</script>
	</head>
	<body>
		<div style="background-color:#336699;color:#fff;">
			I'm a textbox and have alot of work to do 
		</div>
		<p><a href="#" id="shrink">Shrink the box! (80 x 120px)</a></p>
		<p><a href="#" id="enlarge">Enlarge the box! (200 x 800px)</a></p>
		<p><a href="#" id="slideFade">Hide/Show the box!</a></p>
	</body>
</html>

I’ve added two more links and just like in the previous example i added some more effects. The only thing that differs from the rest is link number 3. It executes another function on the second click, than on the first. On the first click it made the box hide and on the second click it made the box show again. To archieve this, i used the function toggle. You can add as much functions (in rows) as you want to toggle, which will be executed all row by row and when it’s done restart from the beginning.

The best is to have a look at the example site and to try it for yourself.

jQuery Tutorial

Demo 1: Alert Box

Demo 2: CSS Classes

Other jQuery tutorials:

Comment Text

3 Comments:

Search terms for this article:

Recent articles

Recent comments

Monthly Archives