JQuery is the awesomesauce. I mean it’s the bomb and John Resig (the creator) is a JavaScript god.
JQuery is a very useful tool…..in the right scenario.
If you don’t know what JQuery is it’s a JavaScript library that greatly simplifies accessing the DOM in the web browser..
For example, instead of selecting all the content with “myid” in the id attribute in JavaScript:
Document.getElementBy("myid");
You can do this in JQuery:
$("#id");
Or, say you have this HTML:
hihihihihihi
Instead of doing this in JavaScript (which pulls in all the elements by tag, then runs a loop to check if it has a class of “imageButton” and sets the background of those to red) :
var allLinks = document.getElementsByTagName("*"), i;
for (i in allLinks)
{
if ((" " + allLinks[i].className + " ").indexOf("imageButton") > -1) {
allLinks[i].style.backgroundColor = "red";
}
}
You can do this in JQuery with one line:
$(“.imageButton”).css(“background”, “red”);
Much simpler right? Yes, but don’t be fooled, it comes at a cost.
Currently the JavaScript version of this script clocks in at 189 bytes minimized by the default settings of the YUI Compressor (http://refresh-sf.com/yui/).
The JQuery version comes in at 42 bytes PLUS the size of the JQuery library minimized (which on my PC is 92.6 KB). So it comes in at closer to the 92.7 KB size.
This difference is stark if you convert them to bytes.
94,882.4 bytes for JQuery and 189 bytes for pure JS.
This is a pretty big difference.
And yes, I realize, networks are faster these days. The amount of time to download this isn’t that significant really.
However, let’s say this code and functionality is much more significant in regards to JavaScript it requires. Maybe it does some really cool JavaScript’ing thing that requires hundreds of lines of pure JS.
I would pose that isn’t it a waste to have to download the entire JQuery library to run simple selects throughout the application?
The rule of thumb I go by is if I need more than two or three JQuery functions, I’m using the JQuery UI, I’m using JQuery mobile, or I’m under a deadline that prohibits me from essentially rewriting the JQuery code in pure JS then I will go ahead and include the library.
However, if it’s an easy swap to pure JS I will almost always choose that route. I may write the JQuery first, but on refactoring I go back through and swap for pure JS.
Another option to make it easier to write good JavaScript (that passes JSLint) is CoffeeScript (http://coffeescript.org/) as it helps write pure JavaScript in a much easier way to the developer.
Bottom line, if you want some easy and quick functionality and the trade-offs are nominal then JQuery (or other libraries) are the way to go.
However, if you’re concerned about speed, size, and overall performance pure JS is your friend.
