Środowiska frontendowe rozwijają się błyskawicznie, nowsze przeglądarki zaimplementowały już większą część API DOM/BOM, które są całkiem użyteczne. Nie musimy uczyć się jQuery od podstaw by manipulować modelem dokumentu lub obsługiwać zdarzenia. Tymczasem, dzięki coraz większej dominacji bibliotek frontendowych takich jak React, Angular czy Vue, obsługa DOM bezpośrednio staje się antywzorcem projektowym, a jQuery coraz bardziej traci na znaczeniu. Ten projekt pokazuje w jaki sposób można zastąpić większość metod jQuery korzystając z natywnej implementacji.

Przykłady kodu są przeznaczone dla aktualnych wersji przeglądarek aktualizowanych automatycznie (Chrome, Edge, Firefox, Safari). Microsoft nie wspiera już Internet Explorera, dlatego usunęliśmy rozwiązania zastępcze przeznaczone dla IE. Jeżeli nadal ich potrzebujesz, zajrzyj do ostatniej wersji zgodnej z IE.

1. Tłumaczenia
2. Wybór przez selektory
3. CSS i styl
4. Manipulacja DOM
5. Ajax
6. Zdarzenia
7. Funkcje użytkowe
8. Obietnice
9. Animacja
10. Alternatywy
11. Wsparcie przeglądarek

• 한국어
• 正體中文
• 简体中文
• Bahasa Melayu
• Bahasa Indonesia
• Português(PT-BR)
• Tiếng Việt Nam
• Español
• Русский
• Кыргызча
• Türkçe
• Italiano
• Français
• 日本語
• Polski

Zamiast korzystania z powszechnych selektorów takich jak klasa, id czy też atrybut, możemy użyć document.querySelector lub document.querySelectorAll. Różnica między nimi to:

• document.querySelector zwraca pierwszy pasujący element
• document.querySelectorAll zwraca wszystkie elementy jako statyczną listę NodeList. Obsługuje ona forEach i można ją przekształcić do tablicy przy użyciu Array.from(document.querySelectorAll(selector))
• Jeżeli żaden element nie został znaleziony, jQuery zwróci pusty obiekt jQuery, a document.querySelectorAll pustą listę NodeList, natomiast document.querySelector zwróci null.

Uwaga: document.getElementById, document.getElementsByClassName i document.getElementsByTagName są nieco szybsze niż querySelector*, ale getElementsBy* zwracają żywą kolekcję HTMLCollection, która aktualizuje się wraz ze zmianami w DOM. Używaj querySelector*, chyba że pomiary wykazały wąskie gardło.

• 1.0 Wybór przez selektor

  // jQuery
  $('selector');
  
  // Natywnie
  document.querySelectorAll('selector');

• 1.1 Wybór przez klasę

  // jQuery
  $('.class');
  
  // Natywnie
  document.querySelectorAll('.class');
  
  // lub
  document.getElementsByClassName('class');

• 1.2 Wybór przez id

  // jQuery
  $('#id');
  
  // Natywnie
  document.querySelector('#id');
  
  // lub
  document.getElementById('id');

• 1.3 Wybór przez atrybut

  // jQuery
  $('a[target=_blank]');
  
  // Natywnie
  document.querySelectorAll('a[target=_blank]');

• 1.4 Wybór spośród potomków

  // jQuery
  $el.find('li');
  
  // Natywnie
  el.querySelectorAll('li');

• 1.5 Rodzeństwo, Poprzednie/Następne elementy

  • Rodzeństwo

    // jQuery
    $el.siblings();
    
    // Natywnie
    [...el.parentNode.children].filter((child) =>
      child !== el
    );

  • Poprzednie elementy

    // jQuery
    $el.prev();
    
    // Natywnie
    el.previousElementSibling;

  • Następne elementy

    // jQuery
    $el.next();
    
    // Natywnie
    el.nextElementSibling;

• 1.6 Najbliższy

  Zwraca pierwszy pasujący element przez podany selektor, sprawdzając kolejno elementy od bieżącego.

  // jQuery
  $el.closest(selector);
  
  // Natywnie
  el.closest(selector);

• 1.7 Rodzice dopóki

  Zwraca potomków każdego elementu w bieżącym zbiorze pasujących elementów, aż do elementu dopasowanego przez selektor, węzeł DOM, lub obiekt jQuery.

  // jQuery
  $el.parentsUntil(selector, filter);
  
  // Natywnie
  function parentsUntil(el, selector, filter) {
    const result = [];
  
    // match start from parent
    el = el.parentElement;
    while (el && !el.matches(selector)) {
      if (!filter || el.matches(filter)) {
        result.push(el);
      }
      el = el.parentElement;
    }
    return result;
  }

• 1.8 Formularze

  • Pola tekstowe

    // jQuery
    $('#my-input').val();
    
    // Natywnie
    document.querySelector('#my-input').value;

  • Otrzymanie indeksu e.currentTarget wewnątrz elementów .radio

    // jQuery
    $('.radio').index(e.currentTarget);
    
    // Natywnie
    [...document.querySelectorAll('.radio')].indexOf(e.currentTarget);

• 1.9 Zawartość ramek

  $('iframe').contents() zwraca contentDocument tego iframe

  • Zawartość ramki

    // jQuery
    $iframe.contents();
    
    // Natywnie
    iframe.contentDocument;

  • Wybór elementu ramki

    // jQuery
    $iframe.contents().find('.css');
    
    // Natywnie
    iframe.contentDocument.querySelectorAll('.css');

• 1.10 Otrzymanie body

  // jQuery
  $('body');
  
  // Natywnie
  document.body;

• 1.11 Akcesory atrybutów

  • Otrzymanie wartości atrybutu

    // jQuery
    $el.attr('foo');
    
    // Natywnie
    el.getAttribute('foo');

  • Ustawienie wartości atrybutu

    // jQuery
    $el.attr('foo', 'bar');
    
    // Natywnie
    el.setAttribute('foo', 'bar');

  • Otrzymanie wartości atrybutu data-

    // jQuery
    $el.data('foo');
    
    // Natywnie
    el.dataset.foo;
    
    // lub
    el.getAttribute('data-foo');

⬆ powrót

• 2.1 CSS

  • Otrzymanie stylu

    // jQuery
    $el.css('color');
    
    // Natywnie
    // UWAGA: zwraca wartość wynikową, np. 'rgb(255, 0, 17)' zamiast '#f01'
    getComputedStyle(el).color;

  • Ustawienie stylu

    // jQuery
    $el.css({ color: '#f01' });
    
    // Natywnie
    el.style.color = '#f01';

  • Ustawienie wielu stylów

    // jQuery
    $el.css({ color: '#f01', 'border-color': '#f02' });
    
    // Natywnie
    Object.assign(el.style, { color: '#f01', borderColor: '#f02' });

  • Dodanie klasy

    // jQuery
    $el.addClass(className);
    
    // Natywnie
    el.classList.add(className);

  • Usunięcie klasy

    // jQuery
    $el.removeClass(className);
    
    // Natywnie
    el.classList.remove(className);

  • Sprawdzenie czy element posiada klasę

    // jQuery
    $el.hasClass(className);
    
    // Natywnie
    el.classList.contains(className);

  • Przełączenie klasy

    // jQuery
    $el.toggleClass(className);
    
    // Natywnie
    el.classList.toggle(className);

• 2.2 Szerokość i wysokość

  Manipulowanie szerokością i wysokością jest teoretycznie takie samo, dla przykładu użycie wysokości:

  • Wysokość okna

    // jQuery
    $(window).height();
    
    // bez paska, działa jak jQuery
    window.document.documentElement.clientHeight;
    
    // z paskiem przewijania
    window.innerHeight;

  • Wysokość dokumentu

    // jQuery
    $(document).height();
    
    // Natywnie
    const body = document.body;
    const html = document.documentElement;
    const height = Math.max(
      body.offsetHeight,
      body.scrollHeight,
      html.clientHeight,
      html.offsetHeight,
      html.scrollHeight
    );

  • Wysokość elementu

    // jQuery
    $el.height();
    
    // Natywnie
    function getHeight(el) {
      const styles = window.getComputedStyle(el);
      const height = el.offsetHeight;
      const borderTopWidth = parseFloat(styles.borderTopWidth);
      const borderBottomWidth = parseFloat(styles.borderBottomWidth);
      const paddingTop = parseFloat(styles.paddingTop);
      const paddingBottom = parseFloat(styles.paddingBottom);
      return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
    }
    
    // dokładne do części całkowitej (jeżeli `border-box`, wtedy `height - border`; jeżeli `content-box`, wtedy `height + padding`)
    el.clientHeight;
    
    // dokładne do części dziesiętnej (jeżeli `border-box`, wtedy `height`; jeżeli `content-box`, wtedy `height + padding + border`)
    el.getBoundingClientRect().height;

  • Zewnętrzna wysokość elementu

    Wysokość wraz z paddingiem i obramowaniem, opcjonalnie z marginesem.

    // jQuery
    $el.outerHeight();
    
    // Natywnie (zaokrąglone do liczby całkowitej, ignoruje transformacje CSS)
    el.offsetHeight;
    
    // jQuery
    $el.outerHeight(true);
    
    // Natywnie
    function getOuterHeight(el) {
      const styles = window.getComputedStyle(el);
      return el.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
    }

• 2.3 Pozycja i przesunięcie

  • Pozycja

    Otrzymanie bieżącej pozycji elementu relatywnie do przesunięcia rodzica.

    // jQuery
    $el.position();
    
    // Natywnie
    const position = { left: el.offsetLeft, top: el.offsetTop };

  • Przesunięcie

    Otrzymanie bieżącej pozycji elementu relatywnie do dokumentu.

    // jQuery
    $el.offset();
    
    // Natywnie
    function getOffset (el) {
      const box = el.getBoundingClientRect();
    
      return {
        top: box.top + window.scrollY,
        left: box.left + window.scrollX
      };
    }

• 2.4 Przesunięcie widoku

  Otrzymanie bieżącego przesunięcia w pionie elementu.

  // jQuery
  $(window).scrollTop();
  
  // Natywnie
  window.scrollY;

⬆ wróć

• 3.1 Usuwanie

  Usunięcie elementu z DOM.

  // jQuery
  $el.remove();
  
  // Natywnie
  el.remove();

• 3.2 Tekst

  • Otrzymanie tekstu

    Otrzymanie połączonej zawartości tekstowej elementu, włącznie z jego potomkami,

    // jQuery
    $el.text();
    
    // Natywnie
    el.textContent;

  • Ustawianie tekstu

    Ustawianie zawartości tekstowej elementu do wyznaczonej wartości.

    // jQuery
    $el.text(string);
    
    // Natywnie
    el.textContent = string;

• 3.3 HTML

  • Otrzymanie HTML

    // jQuery
    $el.html();
    
    // Natywnie
    el.innerHTML;

  • Ustawianie HTML

    // jQuery
    $el.html(htmlString);
    
    // Natywnie
    el.innerHTML = htmlString;

• 3.4 Dodawanie na koniec

  Dodanie elementu jako dziecko po ostatnim dziecku elementu rodzica

  // jQuery: jednolita składnia dla ciągów DOMString i obiektów Node
  $parent.append(newEl | '<div id="container">Hello World</div>');
  
  // Natywnie (Element lub tekst): ciągi znaków są wstawiane jako zwykły tekst, a nie przetwarzane jako HTML
  parent.append(newEl | 'Hello World');
  
  // Natywnie (tekst HTML)
  parent.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

• 3.5 Dodawanie na początek

  // jQuery: jednolita składnia dla ciągów DOMString i obiektów Node
  $parent.prepend(newEl | '<div id="container">Hello World</div>');
  
  // Natywnie (Element lub tekst): ciągi znaków są wstawiane jako zwykły tekst, a nie przetwarzane jako HTML
  parent.prepend(newEl | 'Hello World');
  
  // Natywnie (tekst HTML)
  parent.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

• 3.6 Dodawanie przed

  Dodanie nowego węzła przed wybranymi elementami

  // jQuery
  $newEl.insertBefore(selector);
  
  const el = document.querySelector(selector);
  
  // Natywnie (Element)
  el.before(newEl);
  
  // Natywnie (tekst HTML)
  el.insertAdjacentHTML('beforebegin', '<div id="container">Hello World</div>');

• 3.7 Dodawanie po elemencie

  Dodanie nowego węzła po wybranych elementach

  // jQuery
  $newEl.insertAfter(selector);
  
  const el = document.querySelector(selector);
  
  // Natywnie (Element)
  el.after(newEl);
  
  // Natywnie (tekst HTML)
  el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

• 3.8 Porównywanie

  Zwraca true jeżeli podany selektor pasuje do wybranego elementu

  // jQuery - Zauważ, że `is` działa również z `function` lub `elements`, które nie są tutaj rozważane
  $el.is(selector);
  
  // Natywnie
  el.matches(selector);

• 3.9 Kopiowanie

  Tworzenie głębokiej kopii wybranego elementu

  // jQuery. Przekaż `true`, aby skopiować również procedury obsługi zdarzeń i dane.
  $el.clone();
  
  // Natywnie. Przekaż `true`, aby utworzyć głęboką kopię; funkcje nasłuchujące zdarzeń nigdy nie są kopiowane.
  el.cloneNode(true);

• 3.10 Wyczyszczenie

  Usuwa wszystkie węzły dzieci

  // jQuery
  $el.empty();
  
  // Natywnie
  el.replaceChildren();

• 3.11 Zawinięcie

  Umieszczenie każdego elementu w strukturze HTML

  // jQuery
  $('.inner').wrap('<div class="wrapper"></div>');
  
  // Natywnie
  document.querySelectorAll('.inner').forEach((el) => {
    const wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
    el.before(wrapper);
    wrapper.append(el);
  });

• 3.12 Odwinięcie

  Usuwa rodziców z pasujących elementów z DOM

  // jQuery
  $('.inner').unwrap();
  
  // Natywnie
  new Set([...document.querySelectorAll('.inner')].map((el) => el.parentElement))
    .forEach((parent) => {
      if (parent !== document.body) {
        parent.replaceWith(...parent.childNodes);
      }
    });

• 3.13 Zamiana

  Wymiana każdego elementu ze zbioru pasujących elementów na podaną nową zawartość

  // jQuery
  $('.inner').replaceWith('<div class="outer"></div>');
  
  // Natywnie
  document.querySelectorAll('.inner').forEach((el) => {
    const outer = document.createElement('div');
    outer.className = 'outer';
    el.replaceWith(outer);
  });

⬆ powrót

Fetch API jest standardowym następcą XMLHttpRequest i działa we wszystkich nowoczesnych przeglądarkach. W przeciwieństwie do $.ajax, fetch nie odrzuca obietnicy, gdy serwer zwróci kod błędu HTTP, taki jak 404 czy 500; wartość response.ok musisz sprawdzić samodzielnie. Do żądań JSONP wypróbuj fetch-jsonp.

• 4.0 Pobieranie danych JSON

  // jQuery
  $.getJSON(url).done(handleData).fail(handleError);
  
  // Natywnie
  fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response.json();
    })
    .then(handleData)
    .catch(handleError);

• 4.0.1 Wysyłanie danych JSON (POST)

  // jQuery
  $.ajax({
    url,
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
  });
  
  // Natywnie
  fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });

• 4.0.2 Przerwanie żądania i limit czasu

  // jQuery
  const jqXHR = $.ajax({ url, timeout: 5000 });
  jqXHR.abort();
  
  // Natywnie
  const controller = new AbortController();
  fetch(url, { signal: controller.signal });
  controller.abort();
  
  // Natywnie (limit czasu)
  fetch(url, { signal: AbortSignal.timeout(5000) });

• 4.1 Ładowanie danych z serwera i umieszczenie zwróconego HTML do pasującego elementu

  // jQuery
  $(selector).load(url, completeCallback)
  
  // Natywnie
  fetch(url)
    .then((response) => response.text())
    .then((html) => {
      document.querySelector(selector).innerHTML = html;
    })
    .then(completeCallback);

⬆ powrót

• 5.0 Dokument gotowy ze zdarzeniem DOMContentLoaded

  // jQuery
  $(document).ready(eventHandler);
  
  // Natywnie
  // Sprawdź czy zdarzenie DOMContentLoaded został zakończone
  if (document.readyState !== 'loading') {
    eventHandler();
  } else {
    document.addEventListener('DOMContentLoaded', eventHandler);
  }
  
  // Możesz też załadować skrypt za pomocą `<script defer>` lub `<script type="module">`,
  // dzięki czemu zostanie on wykonany dopiero po przetworzeniu dokumentu.

• 5.1 Nasłuchiwanie funkcji na zdarzenie

  // jQuery
  $el.on(eventName, eventHandler);
  
  // Natywnie
  el.addEventListener(eventName, eventHandler);

• 5.1.1 Jednorazowe nasłuchiwanie zdarzenia

  // jQuery
  $el.one(eventName, eventHandler);
  
  // Natywnie
  el.addEventListener(eventName, eventHandler, { once: true });

• 5.1.2 Delegowanie zdarzeń

  // jQuery
  $el.on(eventName, selector, eventHandler);
  
  // Natywnie
  el.addEventListener(eventName, (event) => {
    const target = event.target.closest(selector);
    if (target && el.contains(target)) {
      eventHandler.call(target, event);
    }
  });

• 5.2 Zatrzymanie nasłuchiwania

  // jQuery
  $el.off(eventName, eventHandler);
  
  // Natywnie
  el.removeEventListener(eventName, eventHandler);
  
  // Natywnie: usunięcie kilku funkcji nasłuchujących naraz, podobnie jak przy przestrzeniach nazw w jQuery
  const controller = new AbortController();
  el.addEventListener('click', onClick, { signal: controller.signal });
  el.addEventListener('keydown', onKeydown, { signal: controller.signal });
  controller.abort();

• 5.3 Wywołanie zdarzenia

  // jQuery
  $(el).trigger('custom-event', {key1: 'data'});
  
  // Natywnie. Zdarzenia jQuery są propagowane w górę (bubbling), a natywne tylko przy `bubbles: true`.
  // W funkcji obsługi dane odczytasz z `event.detail`.
  const event = new CustomEvent('custom-event', {
    bubbles: true,
    cancelable: true,
    detail: { key1: 'data' },
  });
  
  el.dispatchEvent(event);

⬆ powrót

Większość funkcji użytkowych można znaleźć w natywnym API. Pozostałe, bardziej zaawansowane funkcje mogą zostać zastąpione lepszymi bibliotekami użytkowymi, które skupiają się na spójności i wydajności. Rekomendowanymi bibliotekami są Lodash oraz es-toolkit.

• 6.1 Podstawowe funkcje użytkowe

  • isArray

  Sprawdza czy podany argument jest tablicą.

  // jQuery
  $.isArray(array);
  
  // Natywnie
  Array.isArray(array);

  • isWindow

  Sprawdza czy podany argument jest oknem.

  // jQuery
  $.isWindow(obj);
  
  // Natywnie
  function isWindow(obj) {
    return obj != null && obj === obj.window;
  }

  • inArray

  Szuka podanej wartości wewnątrz tablicy i zwraca jej indeks (lub -1 jeżeli nie znaleziono).

  // jQuery
  $.inArray(item, array);
  
  // Natywnie
  array.indexOf(item);

  Sprawdza, czy podana wartość znajduje się w tablicy.

  // jQuery
  $.inArray(item, array) > -1;
  
  // Natywnie
  array.indexOf(item) > -1;
  
  // sposób ES6
  array.includes(item);

  • isNumeric

  Sprawdza czy podany argument jest wartością numeryczną. Użyj typeof by sprawdzić typ lub przykładu type dla większej dokładności.

  // jQuery
  $.isNumeric(item);
  
  // Natywnie
  function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }

  • isFunction

  Sprawdza czy podany argument jest obiektem funkcji.

  // jQuery
  $.isFunction(item);
  
  // Natywnie
  function isFunction(item) {
    if (typeof item === 'function') {
      return true;
    }
    var type = Object.prototype.toString.call(item);
    return type === '[object Function]' || type === '[object GeneratorFunction]';
  }

  • isEmptyObject

  Sprawdza czy obiekt jest pusty (nie posiada żadnych wymiernych atrybutów).

  // jQuery
  $.isEmptyObject(obj);
  
  // Natywnie
  function isEmptyObject(obj) {
    return Object.keys(obj).length === 0;
  }

  • isPlainObject

  Sprawdza czy obiekt jest prostym obiektem (stworzonym przy pomocy “{}” lub “new Object”).

  // jQuery
  $.isPlainObject(obj);
  
  // Natywnie
  function isPlainObject(obj) {
    if (Object.prototype.toString.call(obj) !== '[object Object]') {
      return false;
    }
  
    const proto = Object.getPrototypeOf(obj);
    return proto === null || proto === Object.prototype;
  }

  • extend

  Scalenie zawartości dwóch lub więcej obiektów w nowy obiekt bez modyfikowania żadnego z argumentów. Podobnie jak $.extend bez deep, Object.assign i operator spread tworzą jedynie płytką kopię.

  // jQuery
  $.extend({}, object1, object2);
  
  // Natywnie
  Object.assign({}, object1, object2);
  
  // Natywnie (spread)
  ({ ...object1, ...object2 });

  Głęboka kopia pojedynczego obiektu:

  // jQuery
  $.extend(true, {}, object);
  
  // Natywnie. Funkcji i węzłów DOM nie da się sklonować
  structuredClone(object);

  • trim

  Usuwa białe znaki z początku i końca ciągu znaków.

  // jQuery
  $.trim(string);
  
  // Natywnie
  string.trim();

  • map

  Przekształcenie wszystkich elementów tablicy lub obiektu w nową tablicę.

  // jQuery
  $.map(array, (value, index) => {
  });
  
  // Natywnie
  array.map((value, index) => {
  });

  • each

  Ogólna funkcja do iteracji, która może być użyta zarówno na obiektach jak i tablicach.

  // jQuery (zwróć `false`, aby przerwać pętlę)
  $.each(array, (index, value) => {
  });
  
  // Natywnie (użyj `for...of` lub `some`, jeżeli chcesz przerwać pętlę wcześniej)
  array.forEach((value, index) => {
  });
  
  // Natywnie, dla obiektów
  Object.entries(obj).forEach(([key, value]) => {
  });

  • grep

  Zwraca elementy które przechodzą test podanej funkcji filtrującej.

  // jQuery
  $.grep(array, (value, index) => {
  });
  
  // Natywnie
  array.filter((value, index) => {
  });

  • type

  Ustala wewnętrzną klasę obiektu.

  // jQuery
  $.type(obj);
  
  // Natywnie
  function type(item) {
    const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
    return Object.prototype.toString.call(item)
      .replace(reTypeOf, '$1')
      .toLowerCase();
  }

  • merge

  Scala zawartość dwóch tablic w jedną.

  // jQuery, modyfikuje array1, nie usuwa duplikatów
  $.merge(array1, array2);
  
  // Natywnie, modyfikuje array1, nie usuwa duplikatów
  array1.push(...array2);
  
  // Natywnie, zwraca nową tablicę, nie usuwa duplikatów
  function merge(...args) {
    return [].concat(...args);
  }
  
  // Wersja z Set, zwraca nową tablicę, usuwa duplikaty
  function merge(...args) {
    return Array.from(new Set([].concat(...args)));
  }

  • now

  Zwraca liczbę reprezentującą bieżący czas.

  // jQuery
  $.now();
  
  // Natywnie
  Date.now();

  • proxy

  Pobiera funkcję jako argument i zwraca nową funkcję, która będzie miała zawsze określony kontekst.

  // jQuery
  $.proxy(fn, context);
  
  // Natywnie
  fn.bind(context);

  • makeArray

  Konwertuje obiekt tablico-podobny w tablicę.

  // jQuery
  $.makeArray(arrayLike);
  
  // Natywnie
  Array.from(arrayLike);
  
  // sposób ES6: operator spread
  [...arrayLike];

• 6.2 Zawieranie

  Sprawdza czy dany element DOM jest potomkiem innego elementu DOM.

  // jQuery
  $.contains(el, child);
  
  // Natywnie
  el !== child && el.contains(child);

• 6.3 Globalna ewaluacja

  Wykonuje kod Javascript z globalnym kontekstem.

  // jQuery
  $.globalEval(code);
  
  // Natywnie
  function globalEval(code) {
    const script = document.createElement('script');
    script.text = code;
  
    document.head.appendChild(script).parentNode.removeChild(script);
  }
  
  // Używaj eval, chociaż kontekst eval jest lokalny, a kontekst $.globalEval jest globalny.
  eval(code);

• 6.4 parse

  • parseHTML

  Przetwarza łańcuch znaków w tablicę węzłów DOM.

  // jQuery
  $.parseHTML(htmlString);
  
  // Natywnie
  function parseHTML(string) {
    const context = document.implementation.createHTMLDocument();
  
    // Ustaw href elementu na stworzony dokument, żeby przetworzone elementy z URL
    // były oparte o URL dokumentu
    const base = context.createElement('base');
    base.href = document.location.href;
    context.head.appendChild(base);
  
    context.body.innerHTML = string;
    return Array.from(context.body.childNodes);
  }

⬆ powrót

Obietnice (ang. Promises) reprezentują ewentualny wynik asynchronicznej operacji. jQuery posiada własny system zarządzania obietnicami. Natywny Javascript implementuje minimalną warstwę API do obsługi obietnic według specyfikacji Promises/A+, a dzięki async/await kod oparty na obietnicach czyta się jak kod synchroniczny.

• 7.1 done, fail, always

  done jest wywoływane gdy obietnica zostanie zakończona sukcesem, fail jest wywoływane gdy obietnica jest odrzucona, always gdy obietnica jest zakończona z dowolnym wynikiem.

  // jQuery
  $promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
  
  // Natywnie
  promise.then(doneCallback, failCallback).finally(alwaysCallback);
  
  // Natywnie (async/await)
  try {
    doneCallback(await promise);
  } catch (error) {
    failCallback(error);
  } finally {
    alwaysCallback();
  }

• 7.2 when

  when wykorzystuje się do obsługi wielu obietnic jednocześnie. Zakończy się sukcesem, jeżeli wszystkie podane obietnice zostaną również zakończone sukcesem; zakończy się odrzuceniem, jeżeli jakakolwiek z obietnic zostanie odrzucona.

  // jQuery
  $.when($promise1, $promise2).done((promise1Result, promise2Result) => {
  });
  
  // Natywnie
  Promise.all([promise1, promise2]).then(([promise1Result, promise2Result]) => {});
  
  // Natywnie (async/await)
  const [promise1Result, promise2Result] = await Promise.all([promise1, promise2]);

• 7.3 Deferred

  Deferred (pl. Odłożenie) jest metodą tworzenia obietnic.

  // jQuery
  function asyncFunc() {
    const defer = new $.Deferred();
    setTimeout(() => {
      if(true) {
        defer.resolve('some_value_computed_asynchronously');
      } else {
        defer.reject('failed');
      }
    }, 1000);
  
    return defer.promise();
  }
  
  // Natywnie
  function asyncFunc() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (true) {
          resolve('some_value_computed_asynchronously');
        } else {
          reject('failed');
        }
      }, 1000);
    });
  }
  
  // sposób z Deferred
  function asyncFunc() {
    const { promise, resolve, reject } = Promise.withResolvers();
    setTimeout(() => {
      if (true) {
        resolve('some_value_computed_asynchronously');
      } else {
        reject('failed');
      }
    }, 1000);
  
    return promise;
  }

⬆ powrót

Web Animations API (el.animate()) jest najbliższym natywnym odpowiednikiem efektów jQuery: przyjmuje czas trwania w milisekundach, w miarę możliwości działa poza głównym wątkiem i zwraca obiekt Animation, którego obietnica finished zostaje spełniona po zakończeniu animacji.

• 8.1 Show i Hide

  // jQuery
  $el.show();
  $el.hide();
  
  // Natywnie
  el.style.display = ''; // lub 'block', 'inline', ... jeżeli element jest ukryty w arkuszu stylów
  el.style.display = 'none';
  
  // Natywnie (jeżeli właściwość `display` elementu nie jest ustawiana nigdzie indziej)
  el.hidden = false;
  el.hidden = true;

• 8.2 Toggle

  Wyświetla lub ukrywa element.

  // jQuery
  $el.toggle();
  
  // Natywnie
  if (getComputedStyle(el).display === 'none') {
    el.style.display = ''; // lub 'block', 'inline', ...
  } else {
    el.style.display = 'none';
  }

• 8.3 FadeIn i FadeOut

  // jQuery
  $el.fadeIn(3000);
  $el.fadeOut(3000);
  
  // Natywnie (fadeIn)
  function fadeIn(el, ms = 400) {
    el.style.display = '';
    return el.animate([{ opacity: 0 }, { opacity: 1 }], ms).finished;
  }
  
  // Natywnie (fadeOut)
  function fadeOut(el, ms = 400) {
    return el.animate([{ opacity: 1 }, { opacity: 0 }], ms).finished.then(() => {
      el.style.display = 'none';
    });
  }

• 8.4 FadeTo

  Dostosowuje przezroczystość elementu w czasie.

  // jQuery
  $el.fadeTo('slow',0.15);
  // Natywnie ('slow' w jQuery oznacza 600 milisekund)
  el.animate([{ opacity: 0.15 }], { duration: 600, fill: 'forwards' });

• 8.5 FadeToggle

  Wyświetla lub ukrywa element przez animowanie jego przezroczystości.

  // jQuery
  $el.fadeToggle();
  
  // Natywnie, z użyciem fadeIn i fadeOut z punktu 8.3
  if (getComputedStyle(el).display === 'none') {
    fadeIn(el);
  } else {
    fadeOut(el);
  }

• 8.6 SlideUp i SlideDown

  // jQuery
  $el.slideUp();
  $el.slideDown();
  
  // Natywnie (slideUp)
  function slideUp(el, ms = 400) {
    el.style.overflow = 'hidden';
    return el.animate([{ height: `${el.offsetHeight}px` }, { height: '0px' }], ms).finished.then(() => {
      el.style.display = 'none';
      el.style.overflow = '';
    });
  }
  
  // Natywnie (slideDown)
  function slideDown(el, ms = 400) {
    el.style.display = '';
    el.style.overflow = 'hidden';
    return el.animate([{ height: '0px' }, { height: `${el.scrollHeight}px` }], ms).finished.then(() => {
      el.style.overflow = '';
    });
  }

• 8.7 SlideToggle

  Wyświetla lub ukrywa element przez przesunięcie.

  // jQuery
  $el.slideToggle();
  
  // Natywnie, z użyciem slideUp i slideDown z punktu 8.6
  if (getComputedStyle(el).display === 'none') {
    slideDown(el);
  } else {
    slideUp(el);
  }

• 8.8 Animate

  Wykonuje własną animację zbioru atrybutów CSS.

  // jQuery
  $el.animate({ params }, speed);
  
  // Natywnie (speed w milisekundach)
  el.animate([params], { duration: speed, fill: 'forwards' });

• You Might Not Need jQuery - Przykłady wykonania powszechnych zdarzeń, elementów, ajax itd. z użyciem zwykłego Javascript.
• MDN Web Docs - Dokumentacja każdego użytego tutaj API DOM.
• Baseline - Sprawdź, których funkcji platformy webowej można bezpiecznie używać we wszystkich przeglądarkach.

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Kilka przykładów korzysta z nowszych API: Promise.withResolvers() (2024), el.replaceChildren() (2020) oraz AbortSignal.timeout() (2022). Jeżeli wspierasz starsze przeglądarki, sprawdź Baseline.

MIT