Disclaimer: Pretty introductory Javascript follows. If you were looking for advanced tips, migration techniques and the like, check directly the links at the end of the article.
It's been at least one year since I last touched client-side javascript. Back then, we were quite pragmatic and relied on jQuery for most Javascript tasks; it's easy, quite well documented and has really good maintenance, bugfixing and updates. But I was also either using it or ZeptoJS even for tiny personal projects, so the other day I thought: "maybe vanilla Javascript and its query selectors are enough for simple tasks".
Chrome and Firefox have always been quite fast adopting changes, but the burden of Internet Explorer was ever-present. Now that everything below IE8 (and soon IE9) is considered not worth the effort and even mobile phones ar on par, I decided to do some small tests. And my results cannot be more satisfying... For trivial stuff you no longer need to rely on jQuery at all.
I'll simply provide four small code examples to summarize the scenarios I had to change: Clicking things, attaching events (with and without delegation/bubbling up), selecting N items and showing/hiding nodes. There are many scenarios where jQuery is of use or maybe not so easily replaceable, but for quick PoCs, pet projects and internal tools... .
Click on a node
jQuery
$("myId").click();
Vanilla
document.getElementById("myId").click();
Show/Hide
jQuery
function ToggleSection(eventData) {
$("p").each(function (index) {
$(this).hide();
});
$("s" + eventData.currentTarget.id).show();
}
Vanilla
function ToggleSection(eventData) {
var i, len, $p = document.querySelectorAll("p");
for (i = 0, len = $p.length; i < len; i++) {
$p[i].style.display = 'none';
}
document.getElementById("s" + eventData.target.id).style.display = 'block';
}
Attach event handlers
jQuery
$("h3").each.on("click", ToggleSelection);
Vanilla
var i, len, $h3 = document.querySelectorAll("h3");
for (i = 0, len = $h3.length; i < len; i++) {
// Option A: Overriding previous handlers
// $h3[i].onclick = ToggleSection;
// Option B: Adding a handler keeping existing ones
$h3[i].addEventListener("click", ToggleSection);
}
Attach event handlers (event delegation)
jQuery
$("#bookmarks").on("click", "h3", ToggleSelection);
Vanilla
document.getElementById("bookmarks").onclick = function(eventData) {
var target;
eventData = eventData || event;
target = eventData.target || eventData.srcElement;
if (target.nodeName == 'H3') {
ToggleSection(eventData);
return false;
} else {
return;
}
};
I have omitted other query selectors and additional properties but Mozilla Developer Network has really good documentation for them.
A few related articles:
Update #1: Added .addEventListener alternative to .onclick to keep existing handlers. Thanks @JohnHackworth.
Update #2: Added an excellent and way more complete reference at the end.
Update #3: Added another nice article link.
Update #4: Added yet another in-depth article link.
Update #5: Added greatly detailed resource link.
Update #6: Added a cheat-sheet.