Learning jQuery

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.):

[js](function() { var s=document.createElement('script'); s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'); if(typeof jQuery!='undefined') { var msg='This page already using jQuery v' + jQuery.fn.jquery; } else { document.getElementsByTagName('head')[0].appendChild(s); var msg='This page is now jQuerified' } var el=document.createElement('div'); el.style.position='fixed'; el.style.height='30'; el.style.width='200'; el.style.margin='0 auto 0 auto'; el.id='jq-kswedberg'; el.style.top='0'; el.style.left='40%'; el.style.padding='5px 10px 5px 10px'; el.style.backgroundColor='#f99'; el.innerHTML=msg; var b=document.getElementsByTagName('body')[0]; b.appendChild(el); window.setTimeout(function() { jQuery('#jq-kswedberg').fadeOut('slow',function() { jQuery(this).remove() }); }, 2500); })();[/js]

It might look like a lot of code for something so simple, but most of it is just setting the styles for the inserted div element. Speaking of which, if you're using this in Internet Explorer 6, you might want to change el.style.position='fixed' to el.style.position='absolute'. Also, notice that the script's src is now pointing to the new Google CDN. Nice!

Here is the bookmarklet, ready to go:

» jQuerify «

Just drag it up to your bookmarks (or favorites) toolbar. Then, when you're on a page that doesn't have jQuery, all you have to do is click on the bookmarklet and you'll be ready to play around with jQuery on that page through the browser's console.

What? Your browser doesn't have a console? If you're using Firefox, you can download the Firebug add-on and use its console (you should really have this add-on anyway; it's amazingly helpful for html/css/js development). For Safari, open the Advanced tab in the Preferences and check the checkbox for "Show Develop menu in menu bar." Then you can open the console by selecting Develop > Show Error Console. Finally, the DebugBar plugin has a console that can be used in Internet Explorer.

Update

Thanks to Jonno's suggestion in comment #4 below, I've slightly modified the bookmarklet again to show which version of jQuery has been included on the page. If you ever want to know the jQuery version without using the bookmarklet, just type this in the console: jQuery.fn.jquery.

Update 2

Mark Fowler suggested that I "properly scope" the bookmarklet so variables wouldn't pollute the global namespace. Makes sense to me, so now the bookmarklet is updated with a self-executing function wrapping it. No need anymore for the void(s) at the end, since the variable is only defined within th