How to Convert jQuery to Vanilla JavaScript: A Comprehensive Guide

JavaScript, a powerful programming language, is widely used for creating dynamic web applications. While jQuery once simplified JavaScript for developers by offering concise syntax, modern JavaScript (ES6+) now includes many native features that make jQuery less necessary. In this blog, you'll learn how to convert common jQuery code snippets into vanilla JavaScript, making your code lighter, faster, and easier to maintain.

1. Element Selection

In jQuery, selecting elements is incredibly easy using the $() syntax, but you can achieve the same results in JavaScript with methods like querySelector() and querySelectorAll().

jQuery:

$(".my-class");  // Selects all elements with class "my-class"

Vanilla JavaScript:

document.querySelector(".my-class");  // Selects the first element with class "my-class"
document.querySelectorAll(".my-class");  // Selects all elements with class "my-class"

2. Selecting HTML Body and Head

You can directly reference the body and head in JavaScript without a special selector.

jQuery:

$("body");

Vanilla JavaScript:

document.body;

3. Class Manipulation

Manipulating classes in jQuery is simple, but JavaScript's classList API provides similar functionality.

• Adding a Class

jQuery:

$(".my-class").addClass("new-class");

Vanilla JavaScript:

document.querySelector(".my-class").classList.add("new-class");

• Removing a Class

jQuery:

$(".my-class").removeClass("old-class");

Vanilla JavaScript:

document.querySelector(".my-class").classList.remove("old-class");

• Toggling a Class

jQuery:

$(".my-class").toggleClass("active");

Vanilla JavaScript:

document.querySelector(".my-class").classList.toggle("active");

• Checking for a Class

jQuery:

$(".my-class").hasClass("active");

Vanilla JavaScript:

document.querySelector(".my-class").classList.contains("active");

4. Event Listeners

In jQuery, adding event listeners is straightforward, but JavaScript’s addEventListener() provides a more flexible solution.

jQuery:

$(".btn").click(function() {
  alert("Button clicked!");
});

Vanilla JavaScript:

document.querySelector(".btn").addEventListener("click", function() {
  alert("Button clicked!");
});

5. CSS Manipulation

You can manipulate CSS in both jQuery and JavaScript, though the syntax differs slightly.

• Changing CSS Properties

jQuery:

$(".my-div").css({ "margin": "20px" });

Vanilla JavaScript:

document.querySelector(".my-div").style.margin = "20px";

6. Handling HTML Content

When it comes to modifying the HTML content of an element, both jQuery and JavaScript offer methods to achieve this.

• Get or Set HTML Content

jQuery:

$(".my-div").html("<p>New content</p>");

Vanilla JavaScript:

document.querySelector(".my-div").innerHTML = "<p>New content</p>";

• Get or Set Text Content

jQuery:

$(".my-div").text("New text content");

Vanilla JavaScript:

document.querySelector(".my-div").textContent = "New text content";

7. AJAX Requests

While jQuery simplifies AJAX requests, the fetch() API in JavaScript is now the standard for making asynchronous HTTP requests.

jQuery:

$.ajax({
  url: "https://api.example.com/data",
  method: "GET",
  success: function(response) {
    console.log(response);
  }
});

Vanilla JavaScript:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

8. Animations

jQuery has built-in methods like fadeIn() and slideToggle(), but you can replicate these animations in JavaScript using CSS transitions or JavaScript’s animate() API.

jQuery:

$(".my-div").fadeIn();

Vanilla JavaScript:

document.querySelector(".my-div").style.opacity = 1;
document.querySelector(".my-div").style.transition = "opacity 0.5s";

9. DOM Traversal

Traversing the DOM in jQuery is made simple with methods like parent() or find(). JavaScript offers similar functionality through parentElement and querySelector().

• Finding a Parent Element

jQuery:

$(".child").parent();

Vanilla JavaScript:

document.querySelector(".child").parentElement;

• Finding a Child Element

jQuery:

$(".parent").find(".child");

Vanilla JavaScript:

document.querySelector(".parent .child");

10. Conclusion

While jQuery was revolutionary, modern JavaScript now includes many of the features that once made jQuery essential. By switching from jQuery to vanilla JavaScript, your code becomes lighter, faster, and more compatible with modern web development standards.