Plain JavaScript vs. jQuery

October 13, 2017

Accessing elements

code

// JavaScript
// .querySelector() works for classes, ids and tags
document.querySelector(".link"); // by class
document.querySelector("#menu"); // by ID
document.querySelector("body"); // by tag

// other methods
document.getElementById("#el");
document.getElementByClassname(".el");

code

// jQuery
$(".link"); // by class
$("#menu"); // by ID
$("body"); // tag

Event handlers

code

// JavaScript
$el.addEvenetListener("click", function () {});

code

// jQuery
// .on() is the event handler for all kinds of events
$el.on("click", function () {});

// you also have functions to directly target specific events
$el.click(function () {});
$el.blur(function () {});
$el.change(function () {});
$el.dblclick(function () {});

Adding/Removing/Toggling CSS classes

code

// JavaScript
$el.classList.toggleClass("class");
$el.classList.addClass("class", "anotherClass");
$el.classList.removeClass("class", "anotherClass");

code

// jQuery
$el.toggleClass("class");
$el.addClass("class anotherClass");
$el.removeClass("class anotherClass");