Increase Development Speed With jQuery
As we all know jQuery is a very small language. Not only is the file size of the jQuery library small, but the amount of code you need to write to achieve something is also very small. Because of this it is sometimes more efficient to write and test jQuery code in the browser than in a local file. To do this we need a couple of things.
- The Firebug Extension for Firefox
- Greasemonkey
If the page that we are going to manipulate doesn’t already include jQuery on it, then we can include it with this small Greasemonkey script. If jQuery is already included on the page, there is no use for this script.
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
// All your GM code must be inside this function
function letsJQuery() {
alert($); // check if the dollar (jquery) function works
}
Source
With the jQuery library on the page we can now go ahead and start entering commands. For this example we’ll take jQuery.com, we can enter a basic jQuery Selector and see what happens.
before.png (http://img228.imageshack.us/img228/1918/beforeus0.png) Download, rehost, embed this image here.
after.png (http://img218.imageshack.us/img218/5812/aftercd6.png) Download, rehost, embed this image here.
As you can see it’s very easy to manipulate pages. You can use this to manipulate scripts that your working on. For example, if you were trying to nail down a certain selector, or find a 4th parent of something, its going to be alot easier and faster to do it in the Firebug terminal than editing, saving and refreshing the page while your trying to perfect it. With jQuery’s CSS capabilities, you can also test your CSS out live, without needing to switch back and forth between your editor and firefox.

