jQuery Tutorial: Part I

The images and color codes don't work in this, so to view the full tutorial, go here:
http://webitect.net/tutorials/jquery-tutorial-part-i.php

So that is why I have decided to start a series of jQuery tutorials myself. It is a pretty straight-forward language, especially if you’re familiar with JavaScript. I’d like to write this series of tutorials from the perspective of a person who has never even heard of jQuery, because I was this person myself just a few months ago. I am, of course, not an expert at this point, but I plan to grow upon the tutorials as I learn more about the language, and the tricks you can do with it.

Let’s get started.
Included in this Tutorial

* What is jQuery?
* What can it be used for?
* jQuery’s history and information
* Downloading jQuery
* Installing jQuery
* Your first script

What is jQuery?

jQuery is simply, a new JavaScript library. It is lightweight, and focuses mainly on the interaction between HTML and JavaScript. Thus, it is great for webmasters. Just like JavaScript itself, jQuery can make any website more dynamic, and add a lot of professionalism and usability. It can do most things Flash can do, without the extra work. As another benefit, jQuery is also SEO (Search Engine Optimization) friendly, unlike Flash.

To use jQuery, all you need to do is add the jQuery library when using JavaScript. It’s very easy to implement, and I’ll show you a step-by-step method for setting this up.
What can it be used for?

With jQuery, you can do basic JavaScript things like events, manipulate CSS, special effects and animations, and some other advanced techniques such as working with Ajax and DOM.

As for more specific examples:

* jQuery can be used for easier web design. More design, less CSS problems: http://www.cssnewbie.com/equal-height-columns-with-jquery
* You can find a plugin for JQuery for almost anything:
Virtual Tours: http://www.openstudio.fr/jQuery-virtual-tour.html?lang=en
Snazzy popup bubbles: http://jqueryfordesigners.com/coda-popup-bubbles
Zoom in images: http://www.mind-projects.it/jqzoom_v10
* jQuery can be used for more advance navigation. Better organization for the webmaster, and more user-friendly: http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php
* jQuery can do a lot of effects that look identical to Flash, with half the effort.

All-in-all, jQuery’s main purpose is to make a more dynamic website, and it is quickly becoming the most popular trend among designers to put amazing effects into their designs.
jQuery’s History and Information

jQuery is very new. It was first released in 2006 by John Resig. It was released under the GNU General Public Liscence, which means it is opensource software. This means you can edit or manipulate the code as you please, as long as you don’t claim it as your own.

As it’s growing in popularity, big company’s like Microsoft, Nokia, and Adobe are talking about integrating the script into their software.

The actual software is written in basic JavaScript, and makes the JavaScript language more advanced, and at the same time, easier to use. The latest version of jQuery came out earlier this year, and jQuery is still being revised and built upon as time goes on. You can view the official jQuery website at jQuery.com. Here you can download the official jQuery library to implement it into your website, as well as learn jQuery with some additional information.
Downloading jQuery

Before we can actually use jQuery in our code, we need to import the jQuery script library. You can download both the compressed and the decompressed version on the jQuery official website: jQuery.com. This library is only file file, and it is a very large .js file.

You will see that there are three different versions for download: Minified, Packaged, and Uncompressed. I’ve downloaded the minified version, so if you’d like to just move on, skip the next few definitions. However, beginners may want to look over these and choose a different version to start off with.

Minified -This is the jQuery library compressed. They’ve deleted all the comments and excess whitespace in the code, and therefore it is the fastest running .js jQuery library.

Packaged - The packaged version is the medium between the Minified and the Uncompressed. It is compressed itself, and suitable for running long-term in a web server, but it still slower than the Minified version. This version still includes the JavaScript comments and whitespace.

Uncompressed - Let’s you see the source code for the .js jQuery library file. Some may find it useful to see the source code itself when learning jQuery, although it makes the scripts run much slower. It also takes up more space on your web server. If you’re just interested in learning jQuery itself though, and can trust the behind-the-scene workings, I would suggest a more compressed version. The uncompressed version should never be used on a website for more the learning or testing reasons.

If you feel you’d like to change versions later, either for compression issues or for learning issues, you can always delete the library, download the other version, and reupload it.
Installing jQuery

‘Installing’ is such a scary word sometimes, but don’t worry, installing this library is a piece of cake. You’ll first need to locate where you put your version of the jQuery library. If you downloaded the minified version like I did, it should be called jquery-1.2.6.min.js (or it may just show up as jquery-1.2.6.min).

1) Open up your FTP program and connect to your website. (Or whatever method you use for uploading files to your server)

2) Now you’re going to want to upload the jQuery .js file. You’ll need to upload it into the same folder as your HTML files, usually public_html. A lot of webmasters will also put it into a subdirectory for scripts. If you do this, make sure this directory is within your HTML pages directory (public_html).

3) Now open up a code editor to create a sample HTML file. Something as simple as Notepad is fine, or if you have something like Dreamweaver, that is fine too.

4) Write up a simple HTML page, and somewhere inbetween the tags, you’ll include the jQuery library. (The red/blue line.) You can rename the jQuery .js file to jquery-1.2.6.js opposed to jquery-1.2.6.min.js for simplicity. My jQuery library is just in the main directory. If you choose to put the file into a subdirectory, make sure you change the source to subdirectory/jQuerypath.js.



A jQuery Script



A paragraph is here, along with other HTML stuff.



5. Save the file with any name you choose. I’m just going to name mine to index.html, but if this is for testing purposes for you, change it to something like example.html.
Your First Script

Ok, so let’s go over the basics and finally write our first jQuery script. We’ve created the basic template for our HTML page and included the jQuery library. Now we need to include a spot to write our custom scripts:



A jQuery Script


// your jQuery JavaScript code will go here.



A paragraph is here, along with other HTML stuff.



Here is what our HTML page looks like so far. As you can see, it’s just a paragraph. We should probably manipulate it a bit with jQuery to make things interesting.

jquerytut11

Now we need to setup the outline for our first script. Between the and tags you just placed, include the following code that I’ve put in color. I’ve retyped all the code for the HTML page so you can see exactly where it goes.



A jQuery Script


$(document).ready(function(){
// Function commands go here.
});



A paragraph is here, along with other HTML stuff.



Here’s the colored code in English:
Do this when the document is ready: Execute a function with these commands.

See where I’ve colored the English sentence in accordance to the JavaScript code? Thinking of these words when writing out this code will help you better understand the code, and why we’re writing it. Also note the colors for all the closing markers: }); These close the opening markers respectively: $(document).ready(function(){

This set of code needs to always be present before you write any other code! It is bad programing to execute JavaScript before the document is ready to do so.

Let’s actually manipulate our code now! What we’re about to do is nothing spectacular, but nonetheless it shows what an important jQuery command will do. We’re going to hide our paragraph using jQuery. Why would you want to ever do this you ask? Well, you wouldn’t. Not just hide it anyway. A simple trick to cascading navigation menus, however, is to hide a paragraph, or any element for that matter, and show it again later with a different command.

Right now, though, we’re just going to hide it to show you the basic syntax for a function command.



A jQuery Script


$(document).ready(function(){
$('p').hide();
});



A paragraph is here, along with other HTML stuff.



As you can see, we “Do this to the paragraph element: hide it.” Now reupload your HTML file, and refresh it in your browser.

jquerytut2

Looks like our very simplistic code worked! The paragraph has been hidden.
Conclusion

This simple script is pretty useless, but it is important that you understand the basics of how it all worked. Examine the basic syntax, and it will be easier to manipulate code for your own use in the future.

In the next jQuery tutorial, I’ll go over more ways to manipulate the paragraph element, and we’ll create a full, cascading navigation menu.

Very helpful, thanks a lot!

Author	KaylaMae
Submitted on	Jan 23, 2009
Page views	12,029
Favorites	2
Comments	2
Reviewer	manny-the-dino
Approved on	Jan 24, 2009

javascript, jquery, programming, tutorials, web development