Introduction
Creating a comprehensive list of all jQuery commands and their possible JavaScript equivalents is a massive undertaking. However, we have compiled a list of some commonly used jQuery commands and their JavaScript (also known as Vanilla JS) counterparts. Note that this is not an exhaustive list, but it should help you get started.
Free Online Tool To Help
Proper Programming offers a few free, online to help. Please try our two free JQuery to JavaScript converter Version 1 and JQuery to JavaScript Converter Version 2, as it removes the majority of jQuery commands. It’s not perfect, so here are some more things you can try.
Free Program to Help
Proper Programming also supports open source. You are welcome to download our converter off GitHub.
1. Document Ready
jQuery
$(document).ready(function() {
// Your code here
});
JavaScript
document.addEventListener("DOMContentLoaded", function() {
// Your code here
});
2. Selecting Elements
jQuery
$('selector');
JavaScript
document.querySelector('selector'); // For a single element
document.querySelectorAll('selector'); // For multiple elements
3. Adding a Class
jQuery
$('.element').addClass('new-class');
JavaScript
document.querySelector('.element').classList.add('new-class');
4. Removing a Class
jQuery
$('.element').removeClass('class-to-remove');
JavaScript
document.querySelector('.element').classList.remove('class-to-remove');
5. Toggling a Class
jQuery
$('.element').toggleClass('class-to-toggle');
JavaScript
document.querySelector('.element').classList.toggle('class-to-toggle');
6. CSS Manipulation
jQuery
$('.element').css('property', 'value');
JavaScript
document.querySelector('.element').style.property = 'value';
7. Append Content
jQuery
$('.element').append('<div>New Content</div>');
JavaScript
const newContent = document.createElement('div');
newContent.innerHTML = 'New Content';
document.querySelector('.element').appendChild(newContent);
8. AJAX Request
jQuery
$.ajax({
url: 'https://example.com/api',
type: 'GET',
success: function(data) {
// Handle success
},
error: function(error) {
// Handle error
}
});
JavaScript
fetch('https://example.com/api')
.then(response => response.json())
.then(data => {
// Handle success
})
.catch(error => {
// Handle error
});
9. Event Handling
jQuery
$('.element').on('click', function() {
// Your code here
});
JavaScript
document.querySelector('.element').addEventListener('click', function() {
// Your code here
});
10. Hiding an Element
jQuery
$('.element').hide();
JavaScript
document.querySelector('.element').style.display = 'none';
11. Showing an Element
jQuery
$('.element').show();
JavaScript
document.querySelector('.element').style.display = 'block';
12. Getting and Setting HTML Content
jQuery
// Get content
var content = $('.element').html();
// Set content
$('.element').html('<span style="font-size: revert; background-color: initial; font-family: inherit; color: initial;">New Content</span>');
JavaScript
// Get content
var content = document.querySelector('.element').innerHTML;
// Set content
document.querySelector('.element').innerHTML = '<span style="font-size: revert; background-color: initial; font-family: inherit; color: initial;">New Content</span><span style="font-size: inherit; background-color: initial; font-family: inherit; color: initial;">';</span>
13. Getting and Setting Text Content
jQuery
// Get content
var content = $('.element').text();
// Set content
$('.element').text('New Content');
JavaScript
// Get content
var content = document.querySelector('.element').textContent;
// Set content
document.querySelector('.element').textContent = 'New Content';
14. Getting and Setting Attribute Values
jQuery
// Get attribute value
var value = $('.element').attr('attribute-name');
// Set attribute value
$('.element').attr('attribute-name', 'new-value');
JavaScript
// Get attribute value
var value = document.querySelector('.element').getAttribute('attribute-name');
// Set attribute value
document.querySelector('.element').setAttribute('attribute-name', 'new-value');
15. Removing Attributes
jQuery
$('.element').removeAttr('attribute-name');
JavaScript
document.querySelector('.element').removeAttribute('attribute-name');
16. Getting and Setting Form Input Values
jQuery
// Get input value
var value = $('#input-field').val();
// Set input value
$('#input-field').val('New Value');
JavaScript
// Get input value
var value = document.querySelector('#input-field').value;
// Set input value
document.querySelector('#input-field').value = 'New Value';
17. Adding Event Delegation
jQuery
$('.parent-element').on('click', '.child-element', function() {
// Your code here
});
JavaScript
document.querySelector('.parent-element').addEventListener('click', function(event) {
if (event.target.matches('.child-element')) {
// Your code here
}
});
18. Animate Elements
jQuery
$('.element').animate({opacity: 0.5, left: '+=50'}, 1000);
JavaScript
const element = document.querySelector('.element');
element.animate([
{opacity: 1, transform: 'translateX(0)'},
{opacity: 0.5, transform: 'translateX(50px)'}
], {
duration: 1000,
easing: 'linear'
});
19. Adding Elements
jQuery
$('<div>New Element</div>').appendTo('.parent');
JavaScript
const newElement = document.createElement('div');
newElement.innerHTML = 'New Element';
document.querySelector('.parent').appendChild(newElement);
20. Removing Elements
jQuery
$('.element').remove();
JavaScript
const element = document.querySelector('.element');
element.parentNode.removeChild(element);
21. Chaining Methods
jQuery
$('.element').addClass('new-class').css('color', 'red');
JavaScript
const element = document.querySelector('.element');
element.classList.add('new-class');
element.style.color = 'red';
22. Creating a New Element with Attributes
jQuery
$('<a>', {
href: 'https://example.com',
text: 'Visit Example'
}).appendTo('.parent');
JavaScript
const newLink = document.createElement('a');
newLink.href = 'https://example.com';
newLink.textContent = 'Visit Example';
document.querySelector('.parent').appendChild(newLink);
23. Fading Elements In and Out
jQuery
// Fade out
$('.element').fadeOut();
// Fade in
$('.element').fadeIn();
JavaScript
// Fade out
const element = document.querySelector('.element');
element.animate([{opacity: 1}, {opacity: 0}], {duration: 400})
.onfinish = () => { element.style.display = 'none'; };
// Fade in
element.animate([{opacity: 0}, {opacity: 1}], {duration: 400})
.onfinish = () => { element.style.display = 'block'; };