jQuery vs Vanilla JavaScript

vanilla.md

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

var divs = $("div");

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

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

newDiv.addClass("foo");

newDiv.classList.add("foo");

---

jQuery vs JavaScript

newDiv.toggleClass("foo");

newDiv.classList.toggle("foo");

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

$("img").attr("alt");

document.querySelector("img").getAttribute("alt");

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

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

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

---

jQuery vs JavaScript

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

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

---

Source