HTML Forms: jQuery Basics - Getting Started

By Vincent Wright

So what is jQuery? From the jQuery web site: "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

Okay, but what does that mean to me? Put simply, jQuery will help you write JavaScript faster using a simpler syntax. Instead of writing extra lines of code or the writing the same code over and over, you can use jQuery to consolidate the code. jQuery will do the heavy lifting while you can concentrate on the more important stuff.

jQuery also supports the idea of plugins. Plugins allow people to create mini-libraries that complement jQuery. The plugins can be anything from form validation to picture slide shows. We will look at plugins in future articles.

Where to Start

The first thing you will need to do to start using jQuery is to decide if you want to host the jQuery library or use a content delivery network (CDN). If you plan on hosting the jQuery library, you will need to download it from the jQuery web site (http://jquery.com) and upload it to your web server.

The best way to use jQuery is to use a CDN. Both Microsoft and Google offer jQuery on their CDNs. There are several advantages to doing this. The first is that a CDN is spread out over the Internet. When someone comes to your web site and requests the jQuery library, it will be provided to them by the closest hosting site. This will help speed up the download of the library to their local machine. Which brings us to another point, the jQuery library is cached on the user's machine to help with speed.

The second reason is that if the user has been to another web site that had this CDN reference, the user will already have the jQuery file on their system. This will speed up the loading of your web page since they will not need to download the file again.

When you are looking at the different libraries for jQuery, you will notice there are two. One of them has a ".min" in the file name. This is a "minified" version of the file. It is smaller and will load faster. Why two versions? The non-minified version is easier to read, but since there is a lot of white space, it makes the file larger. It is used to help with debugging.

So whenever possible, always use the CDN and the minified version. This will help speed up your web site.

Next we need to create a reference to the jQuery library. This is done by adding a line in between the opening (<head>) and closing (</head>) HTML header tags. We will use the Microsoft CDN.

	<head>
		<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
	</head>
		

jQuery works like normal JavaScript in the fact that you use <script> tags to denote the script. These can be placed in the head section or the body section of your web page.

	<script>
		Your script goes here
	</script>
		

A Quick Example

First, start by creating an HTML document. You can call this anything you want. Enter the code below:

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
			
			</script>
		</head>
		<body>
			<a href="#">Click Me</a>	
		</body>
	</html>
		

Currently, the link "Click Me" does nothing. Let us change that. Enter the code below in between the script tags.

	$(document).ready(function(){
		$("a").click(function(event){
			alert("You clicked me!");
		});
	});
		

What we did here was add a click event to the "Click Me" link. When it was clicked, it showed a JavaScript alert.

What is Up with the $

The dollar sign ($) denotes a jQuery constructor. It can be written either as $() or jQuery(). The dollar sign is just a shortcut. All jQuery constructors must start with this.

The constructor starts with a $ and the selector is enclosed in parenthesis. A selector can be an element (tag), an element ID, an element class name. This is similar to the way CSS works. In the example above, we used the anchor tag (a) as a selector. When you use a selector, jQuery searches through the Document Object Model (DOM) to find all selectors that match. In the case of the example above, if we had more than one anchor tag, all anchor tags would now have a click event.

Since selectors work similar to CSS, you will need to specify the selectors in a similar way. When referencing HTML elements, you will just use the element as is. See the following examples:

	$("a") - all anchor tags
	$("p") - all paragraph tags
	$("p.subject") - all paragraph tags with a class of subject
		

When referencing class names, you must specify the period (.) before the class name as in the following examples:

	$(".subject") - all elements with the class name of subject
	$("p.subject") - all paragraph tags with a class of subject
		

And last, when referencing IDs, you must specify the # before the ID name:

	$("#subject") - the element with the ID of subject
		

There are a few other types of selectors and we will talk about those in future articles. For now, these basic selectors should get you started.

Making Sure the Document is Ready

As with JavaScript, you may want to execute your jQuery code after the HTML document has completely loaded and is ready to be manipulated. This is where the $(document).ready function comes in to play. This will keep the JavaScript and jQuery code unloaded until the document is ready. Once the document has loaded, the function will execute. This keeps the code from executing before the document is ready which could cause issues. If you tried to manipulate a DOM element before it was ready, you would lose that functionality.

Conclusion

This article should be able to get you started using jQuery. The great thing about jQuery is that is does not replace JavaScript, just makes it better. Check back later as we will dive deeper into jQuery.

Complete Code Example

	<html>
		<head>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					$("a").click(function(event){
						alert("You clicked me!");
					});
				});
			</script>
		</head>
		<body>
			<a href="#">Click Me</a>	
		</body>
	</html>
		

Test the Code




Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date