Ditch jQuery: Vanilla JS Alternatives You Need to Know

Harish Kumar · · 999 Views

jQuery revolutionized web development by simplifying DOM manipulation, event handling, and animations. However, modern JavaScript (ES6 and beyond) now provides many built-in methods and features that make jQuery less essential. If you're transitioning to Vanilla JS, here's a guide to replacing some commonly used jQuery methods with their JavaScript equivalents.

👉 Download Ctrl+Alt+Cheat today and start coding like a pro!

1. Selecting Elements

jQuery:

const element = $('#myId');
const elements = $('.myClass');

Vanilla JS:

const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');

Vanilla JS methods like querySelector and querySelectorAll allow for powerful and flexible element selection, mimicking CSS selectors.

2. Adding/Removing Classes

jQuery:

$('#myId').addClass('new-class');
$('#myId').removeClass('old-class');

Vanilla JS:

const element = document.querySelector('#myId');
element.classList.add('new-class');
element.classList.remove('old-class');

Use the classList property to easily manipulate classes.

3. Toggling Visibility

jQuery:

$('#myId').hide();
$('#myId').show();

Vanilla JS:

const element = document.querySelector('#myId');
// Hide
element.style.display = 'none';
// Show
element.style.display = '';

Alternatively, you can use classList to toggle CSS visibility styles.

4. Event Handling

jQuery:

$('#myId').on('click', function() {
    console.log('Clicked!');
});

Vanilla JS:

document.querySelector('#myId').addEventListener('click', () => {
    console.log('Clicked!');
});

The addEventListener method is the modern standard for event handling in JavaScript.

5. AJAX Requests

jQuery:

$.ajax({
    url: '/api/data',
    method: 'GET',
    success: (data) => console.log(data),
    error: (err) => console.error(err),
});

Vanilla JS:

Using fetch:

fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

fetch is a built-in API for making HTTP requests and returns Promises.

6. Iterating Over Elements

jQuery:

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

Vanilla JS:

document.querySelectorAll('.myClass').forEach(element => {
    console.log(element.textContent);
});

The forEach method makes iterating over NodeLists simple and readable.

7. Animations (Fade In/Out)

jQuery:

$('#myId').fadeIn();
$('#myId').fadeOut();

Vanilla JS:

const element = document.querySelector('#myId');

// Fade In
element.style.opacity = 0;
element.style.display = 'block';
let fadeIn = setInterval(() => {
    if (element.style.opacity < 1) {
        element.style.opacity = parseFloat(element.style.opacity) + 0.1;
    } else {
        clearInterval(fadeIn);
    }
}, 50);

// Fade Out
let fadeOut = setInterval(() => {
    if (element.style.opacity > 0) {
        element.style.opacity = parseFloat(element.style.opacity) - 0.1;
    } else {
        element.style.display = 'none';
        clearInterval(fadeOut);
    }
}, 50);

While this approach works, consider CSS animations for a simpler, more performant solution.

8. Getting and Setting Attributes

jQuery:

const src = $('#myImage').attr('src');
$('#myImage').attr('src', 'new-image.jpg');

Vanilla JS:

const element = document.querySelector('#myImage');
const src = element.getAttribute('src');
element.setAttribute('src', 'new-image.jpg');

Make the Transition Seamless

Switching from jQuery to Vanilla JS is easier with tools like cheat sheets to quickly look up alternatives.

Introducing Ctrl+Alt+Cheat VSCode Extension
The Ctrl+Alt+Cheat extension includes a dedicated cheat sheet for jQuery Alternatives, showcasing common jQuery methods and their modern Vanilla JS equivalents.

Why use Ctrl+Alt+Cheat?

  1. Quickly find alternatives to deprecated or unnecessary libraries.

  2. Searchable cheat sheets for jQuery, JavaScript, and more.

  3. Easily copy ready-to-use code snippets.

👉 Download Ctrl+Alt+Cheat today and start coding like a pro!

Final Thoughts

Modern JavaScript's capabilities make many jQuery methods redundant. By switching to Vanilla JS, you can improve performance, reduce dependencies, and stay up-to-date with modern best practices.

Ready to boost your productivity? Download the Ctrl+Alt+Cheat VSCode extension and simplify your transition to Vanilla JS today!


0

Please login or create new account to add your comment.

0 comments
You may also like:

JavaScript Best Practices: Tips for Writing Clean and Maintainable Code

JavaScript is one of the most versatile and widely used programming languages today, powering everything from simple scripts to complex web applications. As the language continues (...)
Harish Kumar

Shallow Copy vs Deep Copy in JavaScript: Key Differences Explained

When working with objects and arrays in JavaScript, it's crucial to understand the difference between shallow copy and deep copy. These concepts dictate how data is duplicated (...)
Harish Kumar

A Beginner’s Guide to Efficient Memory Use in JavaScript

Managing memory efficiently in JavaScript applications is essential for smooth performance, especially for large-scale or complex applications. Poor memory handling can lead to (...)
Harish Kumar

Exploring the New Features of JavaScript ES2024: A Look into the Future of Web Development

Discovering new functionality in programming languages is a bit like a holiday — it’s filled with anticipation and the excitement of exploring something new. With the proposed (...)
Harish Kumar

Understanding the `.reduce()` Method in JavaScript

The .reduce() method in JavaScript is one of the most powerful array methods used for iterating over array elements and accumulating a single value from them. Whether you're summing (...)
Harish Kumar

Building a Real-Time Chat App with Laravel Reverb and Nuxt 3

Building a real-time chat application is a great way to understand the power of WebSockets and real-time communication. In this tutorial, we will walk through creating a Real-Time (...)
Harish Kumar