Learning jQuery

The topic of optimization has come up a number of times in the jQuery mailing list. jQuery’s DOM traversal is powerful and easy, but it can sometimes be slow as well. As with any JavaScript library or framework, the helper methods will be slower than the plain old JavaScript (p.o.j) methods. Nevertheless, if we keep in mind the jQuery’s speed hierarchy, the speed difference between jQuery and p.o.j. will often be negligible.
Read the rest of this entry »

After I wrote a couple entries (Fancy Drop Cap, Part 1 and Part 2) on creating a drop cap for the first paragraph in a DIV, a couple people asked how one would go about making the drop cap apply to every paragraph in a DIV.

Most of the code can remain the way we left it in Fancy Drop Cap – Part 2. We created a swap_letter() function to:

1. find the first letter of the paragraph
2. concatenate that letter with the rest of an image tag if it matches one of the letters in a regular expression
3. strip the letter out of the paragraph since we want to replace it with the image
4. prepend the image tag to the paragraph

We also gave the image a class name of “fancy-letter” so that we could style it a bit:

Read the rest of this entry »

A couple weeks ago I wrote about traversing the DOM with jQuery’s selector expressions to get any elements in the document (see How to Get Anything You Want – part 1). This time around, I’m going to focus on jQuery methods that provide even more ways to get elements. Some of these methods have a nearly identical counterpart among the selector expressions, but for the most part, the two ways of getting elements complement each other.

Read the rest of this entry »

Introduction and Caveat

I'm sure that some of you were expecting this entry to discuss traversing the DOM using jQuery methods. After all, I said I would do just that in my last entry. But a couple nights ago, I had the impulse to try a "live comment preview," so I'm going with it. My next entry, then, will be "How to Get Anything You Want - Part 2." I promise.

Please keep in mind as you read through this tutorial the "learning" part of this site's title: I'm learning jQuery just as many of those who will read this entry are. I mention this now because I have the nagging feeling that it was just too easy to create the live preview. Surely I must be doing something wrong. As always, I am counting on the superior knowledge of my readers to point out where my code fails. But enough of the apologies. Let's get started.

Quick Setup

For the live preview I started with the default comment form in WordPress's Kubrick template:

The important part here is the textarea's id="comment". We want to show the contents of that textarea as the user inputs them.

Create the Preview DIV

Now on to the jQuery code. Read the rest of this entry »

With jQuery, you can get to just about anything on a web page. In this entry, I'll show you a few ways you can use jQuery's versatile selector expressions to traverse to an element — or group of elements — in the DOM.

I've put together a short paragraph and an ordered list scattered with inline elements such as <em>, <code>, and links. It's all wrapped in a DIV with an ID of "jqdt," which allows me to focus the demonstration to one area of this page.

One of the first things I want to know when I try out a new programming language or library or framework is where I can find documentation and support. Yet too often I have found an otherwise promising new tool to be nearly useless for someone like me who is just starting out and can't immediately absorb all of the functionality just by looking at source code.

The excellent documentation is one of the things that first attracted me to jQuery, and with the release of 1.0 (we're now at 1.0.3) the API is baked right into the uncompressed jQuery source code comments. As helpful as this is, however, there may be times when new jQuery users need even more help. So, here is my list of useful resources for great information.