jQuery im Kontext & moderne JS-Alternativen

jQuery

$('.demo-title')
  .attr('title','Info')
  .addClass('active')
  .text('Hallo von jQuery!');

Native

document.querySelectorAll('.demo-title')
  .forEach(el => {
    el.setAttribute('title','Info');
    el.classList.add('active');
    el.textContent = 'Hallo von Native!';
  });

jQuery

$('#delList').on('click', 'button.remove', e => {
  $(e.target).closest('li').remove();
});

Native

document.getElementById('delList')
  .addEventListener('click', e => {
    if (e.target.matches('button.remove')) {
      e.target.closest('li').remove();
    }
  });

jQuery

$.getJSON('users.json', data => {
  renderUsersAjax(data);
}).fail(xhr => console.error(xhr.status));

Native

async function load() {
  const res = await fetch('users.json');
  if (!res.ok) throw new Error(res.status);
  const data = await res.json();
  renderUsersAjax(data);
}

jQuery

$('.box').fadeOut(200).fadeIn(200);

Native (CSS-Transition)

box.classList.add('is-hidden');
setTimeout(() => box.classList.remove('is-hidden'), 200);

$(function(){ console.log('jQuery ready'); });

document.addEventListener('DOMContentLoaded', () => {
  console.log('Native ready');
});