De jQuery à Vanilla JS

Oui alors jQuery, c'est sûrement très bien, ça simplifie pas mal de choses et le chaining est intéressant mais eeeest-ce que vous connaissez l'équivalent en pur JavaScript ? Pas sûr hein.

Ce petit article vous propose de quoi peut-être vous faire changer d'avis sur la bibliothèque qui pèse tout de même environ ~80ko.

Note : Vanilla JS n'est pas un framework mais veut simplement dire "à nu", c'est du JavaScript sans bibliothèque.

C'est parti !

Table des matières

1. Évènements
2. Sélecteurs
3. Attributs
4. Classes
5. Manipulation
6. Navigation
7. AJAX
8. JSONP

Évènements

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

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

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

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

Sélecteurs

// jQuery
var divs = $("div");

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

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

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

Attributs

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

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

Classes

// jQuery
newDiv.addClass("foo");

// Vanilla
newDiv.classList.add("foo");

// jQuery
newDiv.toggleClass("foo");

// Vanilla
newDiv.classList.toggle("foo");

Manipulation

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

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

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

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

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

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

Navigation

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

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

// jQuery
if($('#wrap').is(':empty'))

// Vanilla
if(!document.getElementById('wrap').hasChildNodes())

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

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

AJAX

GET

// jQuery
$.get("//example.com", function(data) {
  // code
});

// Vanilla
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(data) {
  // code
};
httpRequest.open("GET", url);
httpRequest.send();

POST

// jQuery
$.post("//example.com", { username: username }, function(data) {
  // code
});

// Vanilla
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function(data) {
  // code
};
httpRequest.setRequestHeader(
  "Content-Type",
  "application/x-www-form-urlencoded",
);
httpRequest.open("POST", url);
httpRequest.send("username=" + encodeURIComponent(username));

JSONP

// jQuery
$.getJSON("//openexchangerates.org/latest.json?callback=?", function(data) {
  // code
});

// Vanilla
function formatCurrency(data) {
  // code
}
var scr = document.createElement("script");
scr.src = "//openexchangerates.org/latest.json?callback=formatCurrency";
document.body.appendChild(scr);

Cela vous parait-il encore difficile de vous passer de jQuery ? :)

Un grand merci à @deaxon qui est à l'origine de cet éclaircissement.

À creuser

Il existe une version minimaliste de jQuery basée sur la même API mais beaucoup plus légère s'appelant Zepto. Il est actuellement utilisé en production sur le site mobile de ma boite.