Learning jQuery

A long time ago I built myself a little bookmarklet to load jQuery on pages that don’t already have it. The idea was to allow me to play around with any page on the web, using jQuery in the Firebug (and now Safari or IE8) console. I blogged about it, got lots of great feedback, and then blogged about an improved version. Now that a lot more great feedback has come through the comments of the updated bookmarklet post, I’ve decided to update it one more time.

Read the rest of this entry »

About 1 1/2 years ago I put together a little “jQuerify” Bookmarklet (and blogged about it here). It’s a nice little tool that allows you to play around with jQuery on a page that doesn’t already have jQuery loaded and see the results immediately. Based on feedback from others, I’ve updated the bookmarklet a bit. Now, it first checks to see if jQuery is already loaded on the page and doesn’t bother loading it if it’s there. Also, instead of showing an alert message, it temporarily places an absolutely positioned div at the top of the page with a message saying either “This page is now jQuerified” or “This page was already jQuerified.” After 2 1/2 seconds, the message fades out and is removed from the DOM. Here is what the script looks like before it is converted to bookmarklet format (replacing spaces with %20, etc.): Read the rest of this entry »

Hot on the heels of my jQuerify Bookmarklet entry [note: update bookmarklet here] and John Resig’s Hacking Digg with Firebug and jQuery entry, Joan Piedra has put together a Greasemonkey user script (Firefox only) that lets jQuery load automatically on any site that you’ve set for it in the Greasemonkey preferences dialog. Read the rest of this entry »

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:

> jQuerify <

Please note that both the JavaScript example code and the jQuerify bookmarklet point to the jQuery source code on jquery.com. 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.

Update

Please see my entry about the updated and improved bookmarklet Better, Stronger, Safer jQuerify Bookmarklet.

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.