A summary of information compiled by Lee Brimelow.

Task jQuery Native Equivalent
Element Selection
Select all elements of a certain type (e.g. DIV) $("div") document.getElementsByTagName("div")
Get all by CSS class $(".my-class") document.getElementsByClassName("my-class")
Get by ID $("#id") document.getElementById("id")
Get by CSS selector $(".my-class li:first-child") document.querySelectorAll(".my-class li:first-child")
Get first by CSS selector $(".my-class").get(0) document.querySelector(".my-class")
DOM Manipulation
Append/Prepend HTML elements $(document.body).append("<div id='myDiv'><img src='im.gif'/></div>"); var frag = document.createDocumentFragment();

var myDiv = document.createElement("div");
myDiv.id = "myDiv";

var im = document.createElement("img");
im.src = "im.gif";


document.body.appendChild(frag); //append
document.body.insertBefore(frag, document.body.firstChild); //prepend
CSS Manipulation
var el = document.querySelector(".main-content");
Add a class $(el).addClass("someClass"); el.classList.add("someClass");
Remove a class $(el).removeClass("someClass"); el.classList.remove("someClass");
Check for element having a class ($(el).hasClass("someClass") el.classList.contains("someClass")
Modifying CSS properties
Set multiple CSS properties $(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px",
height: "100px",
display: "block"
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";