Migrating jQuery Code to Vanilla JavaScript: A Comprehensive Guide

Introduction

jQuery has been a dominant JavaScript library for many years, simplifying DOM manipulation, AJAX requests, event handling, and animations. However, modern browsers now support most of jQuery’s functionalities natively, making jQuery unnecessary in many cases. Migrating jQuery code to Vanilla JavaScript improves performance, reduces dependency, and future-proofs your applications.

This guide provides an in-depth, step-by-step approach to migrating jQuery to Vanilla JavaScript, covering different scenarios, best practices, and real-world examples.

---

1. Why Migrate from jQuery to Vanilla JavaScript?

Before diving into migration, it’s important to understand why moving away from jQuery is beneficial:

1.1 Performance Improvements

• Native JavaScript methods are generally faster than jQuery functions.
• Reducing dependency on an external library improves page load speed.

1.2 Smaller File Size

• jQuery adds ~90KB to a project, while native JavaScript requires no extra downloads.
• Eliminating jQuery reduces HTTP requests and optimizes web performance.

1.3 Better Compatibility with Modern Frameworks

• React, Vue, and Angular do not rely on jQuery and have their own reactivity systems.
• Many JavaScript ES6+ features replace jQuery’s functionalities.

1.4 Long-Term Maintenance

• jQuery is no longer essential for most modern web applications.
• Future JavaScript updates ensure continued support without third-party dependencies.

---

2. Migrating jQuery Code to Vanilla JavaScript

2.1 Selecting Elements

jQuery Code

$('#myElement'); // Select element by ID
$('.myClass');   // Select elements by class
$('div');        // Select all <div> elements

Vanilla JavaScript

document.getElementById('myElement');  // Select element by ID
document.querySelector('.myClass');    // Select first element by class
document.querySelectorAll('div');      // Select all <div> elements

💡 querySelectorAll() returns a NodeList, which can be looped using forEach().

---

2.2 Modifying Content and Attributes

jQuery Code

$('#myElement').text('Hello, World!'); // Set text
$('#myElement').html('<strong>Bold Text</strong>'); // Set HTML
$('#myElement').attr('data-id', '123'); // Set attribute
$('#myElement').css('color', 'red'); // Change CSS

Vanilla JavaScript

document.getElementById('myElement').textContent = 'Hello, World!';
document.getElementById('myElement').innerHTML = '<strong>Bold Text</strong>';
document.getElementById('myElement').setAttribute('data-id', '123');
document.getElementById('myElement').style.color = 'red';

💡 innerHTML can insert HTML content, while textContent ensures only text is inserted.

---

2.3 Adding and Removing Classes

jQuery Code

$('#myElement').addClass('active');
$('#myElement').removeClass('active');
$('#myElement').toggleClass('active');

Vanilla JavaScript

document.getElementById('myElement').classList.add('active');
document.getElementById('myElement').classList.remove('active');
document.getElementById('myElement').classList.toggle('active');

💡 classList allows adding, removing, and toggling classes efficiently.

---

2.4 Event Handling

jQuery Code

$('#myButton').click(function() {
    alert('Button clicked!');
});

Vanilla JavaScript

document.getElementById('myButton').addEventListener('click', function() {
    alert('Button clicked!');
});

💡 addEventListener is more flexible, allowing multiple event handlers on the same element.

---

2.5 Traversing the DOM

jQuery Code

$('#childElement').parent(); // Get parent
$('#parentElement').children(); // Get children
$('#siblingElement').prev(); // Get previous sibling
$('#siblingElement').next(); // Get next sibling

Vanilla JavaScript

document.getElementById('childElement').parentElement;
document.getElementById('parentElement').children;
document.getElementById('siblingElement').previousElementSibling;
document.getElementById('siblingElement').nextElementSibling;

💡 parentElement, children, and nextElementSibling provide direct access to related elements.

---

2.6 Looping Through Elements

jQuery Code

$('.items').each(function() {
    console.log($(this).text());
});

Vanilla JavaScript

document.querySelectorAll('.items').forEach(item => {
    console.log(item.textContent);
});

💡 forEach() works directly on NodeLists returned by querySelectorAll().

---

2.7 Making AJAX Requests

jQuery Code

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    method: 'GET',
    success: function(response) {
        console.log(response);
    }
});

Vanilla JavaScript (Using Fetch API)

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

💡 fetch() is the modern alternative to $.ajax(), supporting promises natively.

---

2.8 Animations (Fade, Slide, Hide, Show)

jQuery Code

$('#myElement').fadeOut();
$('#myElement').fadeIn();
$('#myElement').slideUp();
$('#myElement').slideDown();

Vanilla JavaScript

document.getElementById('myElement').style.opacity = '0'; // Fade out
document.getElementById('myElement').style.opacity = '1'; // Fade in

document.getElementById('myElement').style.display = 'none'; // Hide
document.getElementById('myElement').style.display = 'block'; // Show

💡 For smoother animations, use CSS transitions or requestAnimationFrame().

---

3. Best Practices for Migrating jQuery to Vanilla JavaScript

1. Use Modern JavaScript Features: Utilize ES6+ features like arrow functions, let/const, and fetch().
2. Minimize Direct DOM Manipulations: Use event delegation instead of binding too many event listeners.
3. Optimize Performance: Use document.createDocumentFragment() when dynamically adding multiple elements.
4. Use classList for CSS Manipulations: Instead of modifying className, use classList.add() and classList.remove().
5. Avoid Inline JavaScript in HTML: Keep JavaScript separate from HTML for maintainability.

---

Migrating jQuery to Vanilla JavaScript significantly improves performance, reduces dependencies, and ensures better compatibility with modern frameworks. The transition may require rewriting certain functionalities, but native JavaScript now offers everything jQuery once provided.

By following this guide, you can smoothly convert jQuery-based projects to pure JavaScript, making your web applications more lightweight and future-proof.

Would you like help with specific jQuery-to-JavaScript conversions in your project? Let me know!