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 everpresent. 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 ommited other query selectors and additional properties but Mozilla Developer Network has really good documentation for them.
This post series also have much more detailed guides of migrating from jQuery.
And lastly, this Sitepoint article is a great source as of 2017 of DOM manipulation basics with vanilla JS.
Update from mid 2017: another interesting article: (Now More Than Ever) You Might Not Need jQuery
Update Apr 2019: And another huge list of equivalents in vanilla JS: You Don't Need jQuery
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.