Learning jQuery

JonBob and I have been working on a TextMate bundle for jQuery over the past few weeks. If you’re not familiar with TextMate and you own a Mac, you should definitely check it out. It has saved me countless hours of repetitive keystrokes with its bundles, which contain commands, code snippets, templates, and macros that are triggered by pressing special key combinations or clicking menu items.

The jQuery bundle that we put together mostly consists of “tab triggers” for various functions, but it also includes context-sensitive help derived from the online documentation and some nice syntax highlighting. After selecting jQuery as your file type in TextMate, you could, for example, type ready and press the Tab key to produce this:

$(document).ready(function() {
  // Stuff to do as soon as the DOM is ready;
});

It’ll then select the commented line (line 2 in this example) for you so you can start typing right away, replacing the comment with your code. Hit the Tab key once more and it drops you onto a new line below the closing brackets. If you want to learn more about a function that you’ve typed in, just click anywhere inside its name and press Control + H. You’ll get official documentation on the function.

Get the Bundle

So, how can you get this cool jQuery bundle and speed up your coding? First, you’ll need TextMate, of course. If you don’t have it yet, download the 30-day trial. Then you’ll need to either check out the bundles from the Subversion repository (advanced) or download and install the GetBundles bundle.

Last time I showed you how to make something appear and disappear on a web page. This time I’ll show you how to do it with style.

Like we did last time, we’ll start with our $(document).ready() and put everything else inside of it.

Adjust the Speed

This time, however, we’re going to adjust the speed at which our item shows and hides. To do so, we put a speed indicator — “slow” or “normal” or “fast” or a number of milliseconds (1000 = 1 second) — inside the parentheses:
Read the rest of this entry »

As promised in my last entry, I’ll be showing you a simple effect that you can do using jQuery: showing or hiding something, or a group of things, on the page. The two functions that let us do this are, not surprisingly, show() and hide().

jQuery also comes with another function called toggle(), which will make matching elements visible if they are hidden or hidden if they are visible.

So, let’s get down to business. We’re going to start with our $(document).ready() function.

Read the rest of this entry »