jQuery Commands and Their JavaScript Equivalents

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('New Content');

JavaScript

// Get content
var content = document.querySelector('.element').innerHTML;
// Set content
document.querySelector('.element').innerHTML = 'New Content';

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'; };