Here are some of the basic javascript methods which we can use as alternate to jquery.
Equivalent to $() or jQuery() in JavaScript is querySelector() or querySelectorAll(), which, just like with jQuery, you can call with a CSS selector.
// jQuery, select all instances of .box
$(".box");
// Instead, select the first instance of .box
document.querySelector(".box");
// …or select all instances of .box
document.querySelectorAll(".box");
// with jQuery
// Hide all instances of .box
$(".box").hide();
// Without jQuery
// Iterate over the nodelist of elements to hide all instances of .box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" })
Alternative of jquery find() with querySelector or querySelectorAll
// With jQuery
// Select the first instance of .box within .container
var container = $(".container");
// Later...
container.find(".box");
// Without jQuery
// Select the first instance of .box within .container
var container = document.querySelector(".container");
// Later...
container.querySelector(".box");
If you wish to traverse the DOM to select a subling or a parent element relative to another element, you can access them through nextElementSibling, previousElementSibling and parentElement on that element:
// with jQuery
// Return the next, previous, and parent element of .box
$(".box").next();
$(".box").prev();
$(".box").parent();
// Without jQuery
// Return the next, previous, and parent element of .box
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;
Jquery .on(), .bind(), .live or .click() in vanilla JS with .addEventListener:
// With jQuery
$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) { /* handle click event */ });
$(document).keyup(function(e) { /* handle key up event */ });
// Without jQuery
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });
// With jQuery
// Handle click events .search-result elements,
// even when they're added to the DOM programmatically
$(".search-container").on("click", ".search-result", handleClick);
// Without jQuery
// Create and add an element to the DOM
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// Add an event listener to the element
searchElement.addEventListener("click", handleClick);
Jquery's trigger() alternate in vanilla js with dispatchEvent()
// With jQuery
// Trigger myEvent on document and .box
$(document).trigger("myEvent");
$(".box").trigger("myEvent");
// Without jQuery
// Create and dispatch myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));
Jquery's .css() alternative in vanilla js with .style
// With jQuery
// Select .box and change text color to #000
$(".box").css("color", "#000");
// Without jQuery
// Select the first .box and change its text color to #000
document.querySelector(".box").style.color = "#000";
With jQuery, you can pass an object with key-value pairs to style many properties at once. In JavaScript you can set the values one at a time, or set the entire style string:
// With jQuery
// Pass multiple styles
$(".box").css({
"color": "#000",
"background-color": "red"
});
// Without jQuery
// Set color to #000 and background to red
var box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";
// Set all styles at once (and override any existing styles)
box.style.cssText = "color: #000; background-color: red";
The .hide() and .show() convenience methods are equivalent to accessing the .style property and setting display to none and block:
// With jQuery
// Hide and show and element
$(".box").hide();
$(".box").show();
// Without jQuery
// Hide and show an element by changing "display" to block and none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";
Jquery's $(document).ready() alternative in vanilla js with DOMContentLoaded
// With jQuery
$(document).ready(function() {
/* Do things after DOM has fully loaded */
});
// Without jQuery
// Define a convenience method and use it
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
/* Do things after DOM has fully loaded */
});
You can easily access and work with classes through the classList property to toggle, replace, add, and remove classes:
// With jQuery
// Add, remove, and the toggle the "focus" class
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");
// Without jQuery
// Add, remove, and the toggle the "focus" class
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");
If you want to remove or add multiple classes you can just pass multiple arguments to .add() and .remove():
// Add "focus" and "highlighted" classes, and then remove them
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");
If you’re toggling two classes that are mutually exclusive, you can access the classList property and call .replace() to replace one class with another:
// Remove the "focus" class and add "blurred"
document.querySelector(".box").classList.replace("focus", "blurred");
If you only want to run a function depending on if an element has a certain class, you can replace jQuery’s .hasClass() with .classList.contains()
// With jQuery
// Check if .box has a class of "focus", and do something
if ($(".box").hasClass("focus")) {
// Do something...
}
// Without jQuery
// Check if .box has a class of "focus", and do something
if (document.querySelector(".box").classList.contains("focus")) {
// Do something...
}
fetch() lets you create network requests in a similar fashion to jQuery’s ajax() and get() methods. fetch() takes a URL as an argument, and returns a Promise that you can use to handle the response:
// With jQuery
$.ajax({
url: "data.json"
}).done(function(data) {
// ...
}).fail(function() {
// Handle error
});
// Without jQuery
fetch("data.json")
.then(data => {
// Handle data
}).catch(error => {
// Handle error
});
// Create a div & span
$("");
$("");
// Create a div and a span
document.createElement("div");
document.createElement("span");
If you want to add some content to those elements, you can simply set the textContent property, or create a text node with createTextNode and append it to the element:
var element = document.createElement("div");
element.textContent = "Text"
// or create a textNode and append it
var text = document.createTextNode("Text");
element.appendChild(text);
If you’re only looking to read or update the text of an element, you can use the textContent property of an object to return the current text, or update it:
// With jQuery
// Update the text of a .button
$(".button").text("New text");
// Read the text of a .button
$(".button").text(); // Returns "New text"
// Without jQuery
// Update the text of a .button
document.querySelector(".button").textContent = "New text";
// Read the text of a .button
document.querySelector(".button").textContent; // Returns "New text"
If you’re constructing a new element, you can then add that element to another element by using the method on the parent appendChild():
// Create div element and append it to .container
$(".container").append($(""));
// Create a div and append it to .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);
Put together, here’s how to create a div, update its text and class, and add it to the DOM:
// Create a div
var element = document.createElement("div");
// Update its class
element.classList.add("box");
// Set its text
element.textContent = "Text inside box";
// Append the element to .container
document.querySelector(".container").appendChild(element);