jQuery to Modern JavaScript

// Single element
var el = $('#myId');

// Multiple elements
var items = $('.menu-item');

// Find within context
var link = $('#nav').find('a.active');

// First match
var first = $('li').first();

// Single element
const el = document.querySelector('#myId');

// Multiple elements
const items = document.querySelectorAll('.menu-item');

// Find within context
const link = document.querySelector('#nav a.active');

// First match (querySelector returns first)
const first = document.querySelector('li');

// GET request
$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, err) {
    console.error(err);
  }
});

// POST request
$.post('/api/users', {
  name: 'Jane',
  role: 'dev'
}, function(response) {
  console.log(response);
});

// GET request
try {
  const res = await fetch('/api/users');
  if (!res.ok) throw new Error(res.statusText);
  const data = await res.json();
  console.log(data);
} catch (err) {
  console.error(err);
}

// POST request
const res = await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'Jane',
    role: 'dev'
  })
});
const response = await res.json();

// Iterate over array
$.each(users, function(index, user) {
  console.log(user.name);
});

// Iterate over jQuery collection
$('.item').each(function(i, el) {
  $(el).addClass('processed');
});

// Map
var names = $.map(users, function(user) {
  return user.name;
});

// Iterate over array
users.forEach((user, index) => {
  console.log(user.name);
});

// Iterate over NodeList
document.querySelectorAll('.item')
  .forEach(el => el.classList.add('processed'));

// Map (spread NodeList to array if needed)
const names = users.map(user => user.name);

// Filter
const devs = users.filter(u => u.role === 'dev');

// Click handler
$('#btn').on('click', function(e) {
  e.preventDefault();
  doSomething();
});

// Delegated event
$('#list').on('click', '.item', function() {
  $(this).toggleClass('active');
});

// Remove handler
$('#btn').off('click', handler);

// One-time handler
$('#btn').one('click', function() {
  console.log('Only fires once');
});

// Click handler
document.querySelector('#btn')
  .addEventListener('click', (e) => {
    e.preventDefault();
    doSomething();
  });

// Delegated event
document.querySelector('#list')
  .addEventListener('click', (e) => {
    const item = e.target.closest('.item');
    if (item) item.classList.toggle('active');
  });

// Remove handler
btn.removeEventListener('click', handler);

// One-time handler
btn.addEventListener('click', () => {
  console.log('Only fires once');
}, { once: true });

// Fade out
$('#panel').fadeOut(300);

// Slide toggle
$('#menu').slideToggle(400);

// Custom animation
$('#box').animate({
  opacity: 0.5,
  left: '+=50px',
  height: 'toggle'
}, 600, 'swing', function() {
  console.log('Animation done');
});

/* CSS approach (preferred for simple animations) */
.panel { transition: opacity 0.3s ease; }
.panel.hidden { opacity: 0; }

// JS: just toggle the class
el.classList.toggle('hidden');

// Web Animations API (complex animations)
const anim = box.animate([
  { opacity: 1, transform: 'translateX(0)' },
  { opacity: 0.5, transform: 'translateX(50px)' }
], { duration: 600, easing: 'ease-in-out' });

anim.finished.then(() => {
  console.log('Animation done');
});

// Classic form
$(document).ready(function() {
  init();
});

// Shorthand
$(function() {
  init();
});

// Option 1: DOMContentLoaded event
document.addEventListener('DOMContentLoaded', () => {
  init();
});

// Option 2: defer attribute (preferred)
// <script src="app.js" defer></script>
// Script runs after DOM is parsed - no wrapper needed
init();

// Shallow merge
var config = $.extend({}, defaults, userOpts);

// Deep merge
var config = $.extend(true, {}, defaults, userOpts);

// Merge into existing object
$.extend(existingObj, newProps);

// Shallow merge (Object.assign)
const config = Object.assign({}, defaults, userOpts);

// Shallow merge (spread - preferred)
const config = { ...defaults, ...userOpts };

// Deep merge (structuredClone + spread)
const config = {
  ...structuredClone(defaults),
  ...userOpts
};

// Merge into existing object
Object.assign(existingObj, newProps);