Work with legacy and simple sites using jQuery selectors, events, AJAX, effects, and plugins.
Lessons
Refactor older jQuery code toward modern DOM and fetch APIs.
Modernizing jQuery Code is easiest to learn by reading the example, changing it, and observing the result.
// jQuery
$('.btn').on('click', () => $('#out').text('clicked'));
// Modern vanilla JavaScript equivalent
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelector('#out').textContent = 'clicked';
});
});Practice the Modernizing jQuery Code example in a small scratch file, then explain what changed and why.