Ditch jQuery: Vanilla JS Alternatives You Need to Know
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?
Quickly find alternatives to deprecated or unnecessary libraries.
Searchable cheat sheets for jQuery, JavaScript, and more.
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!
Please login or create new account to add your comment.