Back to Curriculum

Modern JavaScript vs jQuery

📚 Lesson 13 of 15 ⏱️ 45 min

Modern JavaScript vs jQuery

45 min

Modern JavaScript provides many features that jQuery was originally created to solve.

Native JavaScript methods like querySelector, addEventListener, and fetch are now widely supported.

Understanding when to use jQuery vs modern JavaScript is important for contemporary development.

Exercise

Compare jQuery and modern JavaScript approaches for common tasks.

// jQuery approach
$('#element').click(function() {
  $(this).hide();
});

// Modern JavaScript approach
document.getElementById('element').addEventListener('click', function() {
  this.style.display = 'none';
});

// jQuery AJAX
$.get('/api/data', function(data) {
  console.log(data);
});

// Modern JavaScript fetch
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

Code Editor

Output