jQuery Tutorial: Part I
Throughout the recent months of reading other design blogs, I’ve noticed a lot of bloggers talking about, and using, jQuery. I ignored it at first, realizing it wasn’t a language I wanted to learn at this point. However, I’ve now been noticing that everyone’s been using it, and it is almost becoming a necessity for the web designer in today’s world.
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?
What can it be used for?
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.
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.
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’ 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 <head> 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.
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:
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.
Now we need to setup the outline for our first script. Between the <script> and </script> 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.
Here’s the colored code in English:
Do this when the document is ready: Execute a function with these commands.
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.
As you can see, we “Do this to the paragraph element: hide it.” Now reupload your HTML file, and refresh it in your browser.
Looks like our very simplistic code worked! The paragraph has been hidden.
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 <p> paragraph element, and we’ll create a full, cascading navigation menu.