I use jQuery…a lot. It just makes JavaScript development much easier for me. Every so often, I may come across a site where I want to poke around and see what’s going on under the hood. In many cases, jQuery is being used so it’s simple to spark up Firebug and leverage jQuery to work with a document. While jQuery is very pervasive, there are still plenty of sites that don’t use it which forces me to go back to plain ‘ole JavaScript. There’s nothing wrong with that but I’ve gotten used to the nice, terse syntax jQuery provides and I’d like to be able to use it.
Awhile back, I came across an awesome bookmarklet created by my jQuery teammate, Karl Swedberg, which allows me to inject the latest version of jQuery right into my page. This is great when you want to work with a page which doesn’t have jQuery included and you either don’t own the page or don’t feel like adding a script tag to it. The code below shows how the jQuery lib is included.
It’s fairly straightforward in that a script element is created:
and the script tag’s src attribute is set with the following URL:
‘https://code.jquery.com/jquery-latest.min.js'
Then, they grab a reference to the document’s head DOM element:
and then insert the new script tag into the head of the document.
That was a very high-level explanation because there’s definitely more going on. In fact, Karl took the extra step of ensuring that jQuery’s .noConflict() method is called should there be another library present that requires the “$” namespace. Very cool. :)
You can find the full source for the bookmarklet below and if you want to install it now, here’s the link for you to use:
» jQuerify « — Drag this link to your browser toolbar
I created a quick screencast that shows you how to add the bookmarklet to your browser and then use it for playing with a web page:
Nicely formatted bookmarklet code:
Originally published at Rey Bango.
