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.

The demo is here. If anyone is interested in the code, drop a comment.

P.S: Yea I suck at CSS. If anyone does a better job, please let me know.

So here is to jGridTable. Lets see how far it goes.

Goals:

• Uses jQuery library
• Small and light. Size should be less than 30 KB for minified version
• Dynamic data source for easy table population (JSON or plain HTML)
• Create, Read, Update and Delete (CRUD) operation
• Sorting based on columns (using tablesorter plugin)
• Searching based on filters for multiple columns
• Follows KISS Principal - Keep it simple stupid. No unnecessary insertion of DOM elements
• Insertion of checkbox for each row and defining custom button to perform an action

What seems like a huge list of features add to my very basic problem : I'm still a noob at jQuery and javascript. So, as a personal goal this project is a way for me to learn jQuery right from scratch, and to put it to good use.

Methodology:

• Study the existing plugins to understand how they work
• Use code snippets that are already available. Reduces work, and will be much better than reinventing the wheel the wrong way
• Less attention to appearance (CSS) till the code really works, partly because I'm still learning CSS, and would be tough to combine both jQuery and css code when I'm new to both.

As you'd have guessed, its an ambitious project for someone who is new to javascript/jQuery. Nevertheless, I hope I can pull it off with guidance from knowledgeable people who know their jQuery. I plan to host it on either github or google code and put up a dedicated page on this blog to keep track of the development. As the first step, I'll start with defining the various functions that are required, thus creating a skeleton jQuery plugin, which simply displays a one line output when called in order (yea, I'm pathetic).

So anyone who reads this, please leave your thoughts, advice, comments here. Thank You.