#JS v. jQuery

Here is a list of common jQuery tasks with their JS counterparts.

Seeing if the Document is ready

jQuery

$(document).ready(function() {
	// code…
});

JS

document.addEventListener("DOMContentLoaded", function() {
	// code…
});

Selecting Divs

jQuery

var divs = $("div");

JS

var divs = document.querySelectorAll("div");

Creating Divs

jQuery

var newDiv = $("<div/>");

JS

var newDiv = document.createElement("div");

Adding a Class

jQuery

newDiv.addClass("foo");

JS

newDiv.classList.add("foo");

Toggling a Class

jQuery

newDiv.toggleClass("foo");

JS

newDiv.classList.toggle("foo");

On Click

jQuery

$("a").click(function() {
	// code…
});

JS

[].forEach.call(document.querySelectorAll("a"), function(el) {
	el.addEventListener("click", function() {
		// code…
	});
});

Appending Divs

jQuery

$("body").append($("<p/>"));

JS

document.body.appendChild(document.createElement("p"));

Setting Attributes

jQuery

$("img").filter(":first").attr("alt", "My image");

JS

document.querySelector("img").setAttribute("alt", "My image");

Setting Parent

jQuery

var parent = $("#about").parent();

JS

var parent = document.getElementById("about").parentNode;

Cloning Element

jQuery

var clonedElement = $("#about").clone();

JS

var clonedElement = document.getElementById("about").cloneNode(true);

Emptying an Element

jQuery

$("#wrap").empty();

JS

var wrap = document.getElementById("wrap");
while(wrap.firstChild) wrap.removeChild(wrap.firstChild);

Testing if an Element is Empty

jQuery

if($("#wrap").is(":empty"))

JS

if(!document.getElementById("wrap").hasChildNodes())

Next Element

jQuery

var nextElement = $("#wrap").next();

JS

var nextElement = document.getElementById("wrap").nextSibling;