Native Equivalents to jQuery Selectors
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"; myDiv.appendChild(im); frag.appendChild(myDiv); 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"; |