Nie Potrzebujesz jQuery

Ś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, ze wsparciem dla IE 10+.

Spis treści

Tłumaczenia
Wybór przez selektory
CSS i styl
Manipulacja DOM
Ajax
Zdarzenia
Funkcje użytkowe
Obietnice
Animacja
Alternatywy
Wsparcie przeglądarek

Tłumaczenia

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

Wybór przez Selektory

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 NodeList. Może zostać przekształcony do tablicy przy użyciu Array.prototype.slice.call(document.querySelectorAll(selector));
Jeżeli żaden element nie został znaleziony, jQuery oraz document.querySelectorAll zwrócą [], a document.querySelector zwróci null.

Uwaga: document.querySelector i document.querySelectorAll są dosyć WOLNE, staraj się używać document.getElementById, document.getElementsByClassName lub document.getElementsByTagName jeżeli chcesz zwiększyć wydajność.

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
Array.prototype.filter.call(el.parentNode.children, (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 - Tylko najnowsze, bez wsparcia w IE
el.closest(selector);

// Natywnie - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

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 = [];
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  // match start from parent
  el = el.parentElement;
  while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
      result.push(el);
    } else {
      if (matchesSelector.call(el, 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
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), 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');

// Native
document.body;

1.11 Akcesory atrybutów

Otrzymanie wartości atrybutu

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

// Natywnie
el.getAttribute('foo');

Ustawienie wartości atrybutu

// jQuery, działa w pamięci bez zmiany DOM
$el.attr('foo', 'bar');

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

Otrzymanie wartości atrybutu data-

// jQuery
$el.data('foo');

// Natywnie (użycie `getAttribute`)
el.getAttribute('data-foo');

// Natywnie (użycie `dataset` jeżeli wspierasz tylko przeglądarki IE 11+)
el.dataset['foo'];

⬆ powrót

CSS i styl

2.1 CSS

Otrzymanie stylu

// jQuery
$el.css('color');

// Natywnie
// UWAGA: Znany bug, zwróci 'auto' jeżeli wartość style wynosi 'auto'
const win = el.ownerDocument.defaultView;

// null oznacza, że nie zostaną zwrócone pseudostyle
win.getComputedStyle(el, null).color;

Ustawienie stylu

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

// Natywnie
el.style.color = '#f01';

Otrzymanie/Ustawienie stylów

Jeżeli chcesz ustawić wiele stylów jednocześnie, możesz odwołać się do metody setStyles w pakiecie oui-dom-utils.

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

// window height
$(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;

2.3 Pozycja i przesunięcie

Pozycja

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

// jQuery
$el.position();

// Natywnie
{ 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.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  };
}

2.4 Przesunięcie widoku

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

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

// Natywnie
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ wróć

Manipulacja DOM

3.1 Usuwanie

Usunięcie elementu z DOM.

// jQuery
$el.remove();

// Natywnie
el.parentNode.removeChild(el);

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
$el.append('<div id="container">Hello World</div>');

// Natywnie (tekst HTML)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

// Natywnie (Element)
el.appendChild(newEl);

3.5 Dodawanie na początek

// jQuery
$el.prepend('<div id="container">Hello World</div>');

// Natywnie (tekst HTML)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

// Natywnie (Element)
el.insertBefore(newEl, el.firstChild);

3.6 Dodawanie przed

Dodanie nowego węzła przed wybranymi elementami

// jQuery
$newEl.insertBefore(selector);

// Natywnie (tekst HTML)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');

// Natywnie (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el);
}

3.7 Dodawanie po elemencie

Dodanie nowego węzła po wybranych elementach

// jQuery
$newEl.insertAfter(selector);

// Natywnie (tekst HTML)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

// Natywnie (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el.nextSibling);
}

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
$el.clone();

// Natywnie
el.cloneNode();

// Żeby kopiować głęboko, należy ustawić parametr na `true`

3.10 Wyczyszczenie

Usuwa wszystkie węzły dzieci

// jQuery
$el.empty();

// Natywnie
el.innerHTML = '';

3.11 Zawinięcie

Umieszczenie każdego elementu w strukturze HTML

// jQuery
$('.inner').wrap('<div class="wrapper"></div>');

// Natywnie
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
  const wrapper = document.createElement('div');
  wrapper.className = 'wrapper';
  el.parentNode.insertBefore(wrapper, el);
  el.parentNode.removeChild(el);
  wrapper.appendChild(el);
});

3.12 Odwinięcie

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

// jQuery
$('.inner').unwrap();

// Natywnie
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
  Array.prototype.forEach.call(el.childNodes, (child) => {
    el.parentNode.insertBefore(child, el);
  });
  el.parentNode.removeChild(el);
});

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
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
  const outer = document.createElement('div');
  outer.className = 'outer';
  el.parentNode.insertBefore(outer, el);
  el.parentNode.removeChild(el);
});

⬆ powrót

Ajax

Fetch API jest nowym standardem mającym zastąpić XMLHttpRequest by wykonować ajax. Obecnie działa na Chrome i Firefox, istnieje możliwość użycia tzw. polyfills (wypełnień) by móc używać tej funkcjonalności w starszych przeglądarkach.

Wypróbuj github/fetch na IE9+ lub fetch-ie8 na IE8+, fetch-jsonp by wykonywać żądania JSONP.

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

// jQuery
$(selector).load(url, completeCallback)

// Natywnie
fetch(url).then(data => data.text()).then(data => {
  document.querySelector(selector).innerHTML = data
}).then(completeCallback)

⬆ powrót

Zdarzenia

Dla pełnego zastąpienia ze wsparciem przestrzenią nazw i delegowaniem, odnieś się do https://github.com/oneuijs/oui-dom-events

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);
}

5.1 Nasłuchiwanie funkcji na zdarzenie

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

// Natywnie
el.addEventListener(eventName, eventHandler);

5.2 Zatrzymanie nasłuchiwania

// jQuery
$el.off(eventName, eventHandler);

// Natywnie
el.removeEventListener(eventName, eventHandler);

5.3 Wywołanie zdarzenia

// jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Natywnie
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);

⬆ powrót

Funkcje użytkowe

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. Rekomendowaną biblioteką jest lodash.

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 !== undefined && 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) > -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(value) {
  var type = typeof value;

  return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));
}

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(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 (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
    return false;
  }

  if (obj.constructor &&
      !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
    return false;
  }

  return true;
}

extend

Scalenie zawartości dwóch lub większej ilości obiektów razem w pierwszy obiekt. Object.assign należy do API ES6, więc można również użyć wypełnienia.

// jQuery
$.extend({}, defaultOpts, opts);

// Natywnie
Object.assign({}, defaultOpts, opts);

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
$.each(array, (index, value) => {
});

// Natywnie
array.forEach((value, index) => {
});

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
$.merge(array1, array2);

// Natywnie
// Funkcja concat nie usuwa duplikatów.
function merge(...args) {
  return [].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.prototype.slice.call(arrayLike);

// sposób ES6
Array.from(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 context.body.children;
}

parseJSON

Pobiera ciąg znaków reprezentujący JSON i zwraca wynikową wartość Javascript.

// jQuery
$.parseJSON(str);

// Natywnie
JSON.parse(str);

⬆ powrót

Obietnice

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+.

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).then(alwaysCallback, 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] => {});
```

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 defer() {
  const deferred = {};
  const promise = new Promise((resolve, reject) => {
    deferred.resolve = resolve;
    deferred.reject = reject;
  });

  deferred.promise = () => {
    return promise;
  };

  return deferred;
}

function asyncFunc() {
  const defer = defer();
  setTimeout(() => {
    if(true) {
      defer.resolve('some_value_computed_asynchronously');
    } else {
      defer.reject('failed');
    }
  }, 1000);

  return defer.promise();
}

⬆ powrót

Animacja

8.1 Show i Hide

// jQuery
$el.show();
$el.hide();

// Natywnie
// Po więcej szczegółów o tej metodzie odnieś się do https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';

8.2 Toggle

Wyświetla lub ukrywa element.

// jQuery
$el.toggle();

// Natywnie
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
  el.style.display = 'none';
}

8.3 FadeIn i FadeOut

// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);

// Natywnie
el.style.transition = 'opacity 3s';
// FadeIn
el.style.opacity = '1';
// FadeOut
el.style.opacity = '0';

8.4 FadeTo

Dostosowuje przezroczystość elementu w czasie.

// jQuery
$el.fadeTo('slow',0.15);
// Natywnie
el.style.transition = 'opacity 3s'; // przyjęto że 'slow' trwa 3 sekundy
el.style.opacity = '0.15';

8.5 FadeToggle

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

// jQuery
$el.fadeToggle();

// Natywnie
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
  el.style.opacity = '0';
} else {
  el.style.opacity = '1';
}

8.6 SlideUp i SlideDown

// jQuery
$el.slideUp();
$el.slideDown();

// Natywnie
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;

8.7 SlideToggle

Wyświetla lub ukrywa element przez przesunięcie.

// jQuery
$el.slideToggle();

// Natywnie
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
  el.style.height = originHeight;
}
else {
  el.style.height = '0px';
}

8.8 Animate

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

// jQuery
$el.animate({ params }, speed);

// Natywnie
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) => {
  el.style[key] = params[key];
});

Alternatywy

You Might Not Need jQuery - Przykłady wykonania powszechnych zdarzeń, elementów, ajax itd. z użyciem zwykłego Javascript.
npm-dom oraz webmodules - Indywidualne moduły DOM na NPM.

Wsparcie przeglądarek


Latest ✔	Latest ✔	10+ ✔	Latest ✔	6.1+ ✔

Licencja

MIT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README-pl.md

README-pl.md

Nie Potrzebujesz jQuery

Spis treści

Tłumaczenia

Wybór przez Selektory

CSS i styl

Manipulacja DOM

Ajax

Zdarzenia

Funkcje użytkowe

Obietnice

Animacja

Alternatywy

Wsparcie przeglądarek

Licencja

Files

README-pl.md

Latest commit

History

README-pl.md

File metadata and controls

Nie Potrzebujesz jQuery

Spis treści

Tłumaczenia

Wybór przez Selektory

CSS i styl

Manipulacja DOM

Ajax

Zdarzenia

Funkcje użytkowe

Obietnice

Animacja

Alternatywy

Wsparcie przeglądarek

Licencja