How To Convert Jquery To Javascript

jQuery has been one of the most popular JavaScript libraries since its introduction in 2006. However, over the years, native JavaScript (also known as Vanilla JavaScript) has improved significantly, and many of the features that made jQuery attractive are now available out-of-the-box in modern browsers.

In this blog post, we will discuss how to convert common jQuery code to native JavaScript, making your projects lighter and more performant.

1. DOM Selection

One of the most common uses of jQuery is to select HTML elements. In jQuery, you can use the $ function to select elements, like this:

const element = $('#elementId');

In native JavaScript, you can use document.querySelector or document.getElementById:

const element = document.querySelector('#elementId');
const element = document.getElementById('elementId');

2. DOM Manipulation

Another common use of jQuery is for DOM manipulation. Let’s look at some examples:

Adding a Class

In jQuery, you can use the addClass method:

$('#elementId').addClass('newClass');

In native JavaScript, you can use the classList.add method:

document.getElementById('elementId').classList.add('newClass');

Removing a Class

In jQuery, you can use the removeClass method:

$('#elementId').removeClass('oldClass');

In native JavaScript, you can use the classList.remove method:

document.getElementById('elementId').classList.remove('oldClass');

Adding/Removing a Class with a Condition

In jQuery, you can use the toggleClass method:

$('#elementId').toggleClass('classToToggle', condition);

In native JavaScript, you can use the classList.toggle method:

document.getElementById('elementId').classList.toggle('classToToggle', condition);

3. AJAX Requests

jQuery’s $.ajax method is commonly used for making AJAX requests. Here’s an example:

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  dataType: 'json',
  success: function(response) {
    console.log(response);
  },
  error: function(err) {
    console.error(err);
  }
});

In native JavaScript, you can use the fetch API to perform the same task:

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

4. Event Handling

Event handling is another area where jQuery has been popular. Here’s an example of a click event handler in jQuery:

$('#elementId').on('click', function() {
  console.log('Element clicked!');
});

In native JavaScript, you can use the addEventListener method:

document.getElementById('elementId').addEventListener('click', function() {
  console.log('Element clicked!');
});

Conclusion

While jQuery is still relevant and widely used, converting your code to native JavaScript can lead to improved performance and lighter projects. By leveraging the modern features of JavaScript, you can write cleaner and more efficient code without relying on external libraries.