Archive for December, 2006

Quick Tip – Optimizing DOM Traversal

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 »

jQuerify Bookmarklet

Someone recently asked if it was possible to somehow include jQuery in Firebug for testing jQuery code on web pages that don't already have it included.

It's not only possible to include the jQuery source right from the Firebug console, but you can also add a bookmarklet to your Bookmarks toolbar for one-click jQuery action!

Here is an example of what you could type into the Firebug console, line by line, to make a page ready for jQuery fun:

  1. var s=document.createElement('script');
  2. s.setAttribute('src','');
  3. document.getElementsByTagName('body')[0].appendChild(s);

Or, simply drag the following link to your Bookmarks toolbar:

> jQuerify <

google jquerified

Please note that both the JavaScript example code and the jQuerify bookmarklet point to the jQuery source code on I've heard it's considered poor etiquette to freeload off of someone else's server like that, so if you plan to use the bookmarklet regularly, please point it to a copy of the source code on your own server if you have one.

Also, in the bookmarklet I added an alert message that says "Thank you for using jquery" when you activate it. I wanted that in there for myself because I like knowing for sure that it's working. Feel free to pluck that part out, though, if it annoys you.

Thanks to the folks at Left Logic for their microformats bookmarklet, which inspired me to make this one. In fact, the jQuerify bookmarklet is just a subset of theirs.

Multiple Fancy Drop Caps

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.


I've written a Fancy Letter Plugin that does all the hard work for you. You write a line of jQuery like $('div.content p').fancyletter(). The plugin wraps the first letter of the selected elements in a <span> with class names that you can then style to your needs.

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 »

How to Get Anything You Want – part 2

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 »