A First jQuery Example

Contact Us or call 1-877-932-8228
A First jQuery Example

A First Example

Let's look at an example of what one might do with jQuery. Note that the code here is fairly advanced; while we will cover the specifics in detail later in the course, for now let's consider this an overview of the power of jQuery.

Open ClassFiles/jqy-new-intro/Demos/index.html in a browser and in a code editor to review the code. The page displays a map of the world with two links marking New York City ("NYC") and London ("LON"):

Map of World Image from Wikipedia Wikipedia

Mousing over either of the cities expands the containing element, which has a semitransparent red background, and display some details - area, population - about the city:

Map of World

Let's look at the code.

Code Sample:

jqy-new-intro/Demos/index.html
---- C O D E   O M I T T E D ----

<body>
<div id="world">
	<div id="nyc" class="city">
		<a href="#" class="citylink">NYC</a>
		<div class="details">
			<p><strong>New York City</strong>
			<br>Area: 468.5 sq mi
			<br>Population (2012 est): 8,336,697
			<br>Source: <a href="http://en.wikipedia.org/wiki/New_York_City">Wikipedia</a></p>
		</div>
	</div>
	<div id="lon" class="city">
		<a href="#" class="citylink">LON</a>
		<div class="details">
			<p><strong>London</strong>
			<br>Area: 1,572.00 sq km
			<br>Population (2011): 8,173,194
			<br>Source: <a href="http://en.wikipedia.org/wiki/London">Wikipedia</a></p>
		</div>
	</div>
</div>
<script>
	//ready handler: run this code after the DOM is loaded..
	$(document).ready(function() {
		$('.city').hover(
			//when the user's mouse enters any .city div..
			function() {
				//change the width and height (bigger),
				//over 1000 miliseconds,
				//and show the contained .elements div
				$(this).animate({
					'width': '300px',
					'height': '105px'
				},
				1000,
				function() {
					$(this).find('.details').show();
				});
			},
			//when the user's mouse leaves any .city div..
			function() {
				//change the width and height back to original values,
				//over 1000 miliseconds,
				//and hide the contained .elements div
				$(this).animate({
					'width': '50px',
					'height': '40px'
				},
				1000,
				function() {
					$(this).find('.details').hide();
				});
			}
		);
	});
</script>
</body>
</html>

We use a div of class city to mark up each city's info. Each div is positioned absolutely and is, initially, 50px by 40px in size.

We wrap our jQuery code in a ready handler, to ensure that it runs after the page's DOM has loaded. We use jQuery's hover event to attach a handler to any element of class city. The first function contained within hover states what happens when the user mouses into the element; the second function states what happens when the user mouses out of the element.

When the user's mouse enters, we change the width and height of the appropriate div with jQuery's animate method, making the div bigger over the course of 1000 milliseconds, and show the div of class details. Similarly, we animate the div back to its smaller size and hide the div of class details when the user mouses out.

Again, please do not worry about the specifics of the code here; we will cover all of it in detail as we move through the course. Hopefully, you see the power of jQuery: how easy it is, with just a few lines of code, to produce complex, interesting effects and interactions.

Next