I-Am-Bot Code, technology and life

jQuery cannot cook

Posted by Srinath

I love jQuery. It is more JavaScript that I can ever hope to understand. It's a boon to web developers wanting to make meaningful, cross browser, interactive web apps. That is why it pains me to see it being used for trivial stuff like accessing elements, showing/hiding elements, etc. Case in point:

To access elements using jQuery, you would use

$("p") - for tag name
$(".first") - for class
$("#menu") - for id

Can that be done without jQuery?

document.getElementsByTagName("p") - for tag name
document.getElementsByClassName("first") - for class
document.getElementById("menu") - for id

Of course the way you would manipulate the elements is different, but can be done easily as well. Appending some HTML content to an element with id "content"is a piece of cake with jQuery:

$("#content").append("<p>This is the new content</p>");

And without it:

document.getElementById("content").innerHTML += "<p>This is the new content</p>";

That does it. Now how about showing/hiding an element using jQuery

$("#content").show()
$("#content").hide()

and without using it

document.getElementById("content").style.visibility = "visible";
document.getElementById("content").style.visibility = "hidden";

You don't get the fancy animation effect like jQuery, but it does what its supposed to do. Now for the .each() function of jQuery that matches all the occurrences of an element. Lets say you want to set the text of all occurrences of the paragraph element to "Hi". Using jQuery you would do

$("p").each(function() {
$(this).html("Hi");
}

Lets try that without jQuery

var para = document.getElementsByTagName("p");
for(var i=0;i<para.length;i++) {
para[i].innerHTML = "Hi";
}

There, you wrote an extra line, but it doesn't require a library and should work in almost all browsers.

Now one of the most important features of jQuery - the $(document).ready() function. What it basically does is it allows us to run our Javascript stuff as soon as the DOM is ready, and does not wait for the entire page to load (including images, and other resources which might be time consuming). This means that our scripts can execute a bit faster when compared to using the traditional window.onload method. More on that here and here.

document.ready is something that is really neat and I used to have no arguments against it. But thankfully I came across domready, which mimics the function and stands at around 1.7 KB compressed.

Of course jQuery is much much more than all the simple examples I've given. And that is exactly the point I'm trying to make. Using jQuery for straightforward, simple JavaScript manipulation doesn't make sense at all. It definitely isn't worth the extra 50 KB that it uses. However, if you want to do something that uses command chaining, AJAX, advanced selectors and matching, etc then you need to only look at jQuery. And yes, I do love jQuery.