Czym jest jQuery? Dlaczego był popularny i czy warto go znać

Jeśli zajrzysz do starszego projektu, istnieje duża szansa, że zobaczysz w nim znak dolara: $(".przycisk").hide(). To jQuery, jedna z najpopularniejszych bibliotek w historii internetu. W tym artykule wyjaśniamy, czym jest, skąd wzięła się jej popularność, dlaczego dziś jest mniej potrzebna, a mimo to wciąż żyje, i dlaczego można łączyć jej metody po kropce. Każde zagadnienie pokazuję na kodzie, który uruchomiłem w Chromium 156 z jQuery 4.0.0 oraz 3.7.1.

Czym jest jQuery?

jQuery to biblioteka JavaScript (zbiór gotowego kodu, który dołączasz do strony), stworzona przez Johna Resiga. Pierwszy pokaz odbył się w styczniu 2006 roku na spotkaniu BarCamp w Nowym Jorku, a pierwsze wydanie ukazało się w sierpniu 2006 roku. Biblioteka jest darmowa i objęta licencją MIT.

Cel był prosty: napisać mniej kodu do typowych zadań. Biblioteka daje:

• krótki sposób wybierania elementów strony (selektory CSS),
• wygodne podpinanie zdarzeń, takich jak kliknięcie,
• zmianę treści i wyglądu elementów,
• zapytania do serwera (AJAX),
• system wtyczek, dzięki któremu społeczność dopisywała gotowe rozszerzenia.

Całość zbiera się wokół jednej funkcji o nazwie $. Przekazujesz jej selektor, a ona zwraca obiekt jQuery z metodami do pracy na znalezionych elementach.

Dlaczego jQuery stało się tak popularne?

Głównym powodem była zgodność z przeglądarkami. W połowie pierwszej dekady XXI wieku przeglądarki różniły się od siebie w podstawowych rzeczach. Ten sam kod, który działał w jednej, w innej potrafił się wywrócić albo wymagał innego API. Przykładem są starsze wersje Internet Explorera, które podpinały zdarzenia innym mechanizmem niż reszta przeglądarek. Programista musiał pisać gałęzie if dla każdej z nich i testować wszystko wiele razy.

jQuery ukrywało te różnice za jednym, spójnym interfejsem. Piszesz kod raz, a biblioteka zajmuje się resztą. Do tego dochodziły:

W efekcie jQuery stało się standardem. Według zestawień statystycznych w 2018 roku korzystało z niego ok. 78% milionu największych stron.

Jak wygląda ten sam kod w jQuery i w czystym JavaScripcie?

Najłatwiej zobaczyć różnicę na trzech typowych zadaniach. Poniższy kod uruchomiłem w Chromium 156: jQuery i czysty JavaScript dają ten sam efekt.

Wybieranie elementów i dodawanie klasy:

// jQuery
$(".item").addClass("active");

// czysty JavaScript
document.querySelectorAll(".item").forEach((el) => {
  el.classList.add("active");
});

Obsługa kliknięcia:

// jQuery
$("#btn").on("click", () => console.log("kliknięto"));

// czysty JavaScript
document.getElementById("btn").addEventListener("click", () => {
  console.log("kliknięto");
});

Pobranie danych z serwera:

// jQuery
const dane = await $.getJSON("/dane.json");

// czysty JavaScript
const odpowiedz = await fetch("/dane.json");
const dane2 = await odpowiedz.json();

console.log(dane, dane2); // { imie: "Ala", lvl: 2 } { imie: "Ala", lvl: 2 }

Wersja jQuery jest krótsza, ale wersja w czystym JavaScripcie nie wymaga niczego dodatkowego. Wyniki są takie same. Zapis await poza funkcją działa w module i w konsoli przeglądarki, a w zwykłym skrypcie owiń go w funkcję async. Więcej o pracy z elementami strony znajdziesz w artykule o DOM w JavaScript i o nasłuchiwaniu zdarzeń na dynamicznych elementach, a komunikację z serwerem poznasz w module JS API i Fetch.

Dlaczego jQuery nie jest już tak potrzebne?

Powód jest ten sam, który kiedyś uzasadniał jQuery, tylko w drugą stronę: przeglądarki przestały się tak różnić. Dziś wszystkie główne przeglądarki implementują ten sam standard i rozumieją te same funkcje. Większość tego, co kiedyś dawała biblioteka, jest teraz wbudowana w sam język i przeglądarkę:

• Selektory: querySelector i querySelectorAll obsługują selektory CSS.
• Klasy: classList dodaje i usuwa klasy.
• Zdarzenia: addEventListener działa jednakowo wszędzie.
• Zapytania do serwera: fetch i obietnice zastąpiły AJAX z jQuery.
• Nowoczesny język: funkcje strzałkowe, moduły, async/await. Wiele z nich zostało dodanych w ES2015.

Zmieniło się też, jak budujemy aplikacje. Frameworki i biblioteki takie jak React, Vue i Angular opisują interfejs w inny sposób niż ręczne wyszukiwanie elementów i zmiana ich zawartości. W 2018 roku GitHub usunął jQuery ze swojego frontendu, co często przytacza się jako symbol tej zmiany.

Z drugiej strony czysty JavaScript nie zawsze jest krótszy. Przy kilku powiązanych operacjach na elemencie jQuery nadal bywa zwięzłe, o czym za chwilę.

Czy jQuery nadal żyje i co nowego w wersji 4.0?

Tak, i to wyraźnie. Według serwisu W3Techs (dane z 5 listopada 2026) jQuery działa na 64,2% wszystkich stron i jest używane przez 85,4% stron, na których da się rozpoznać bibliotekę JavaScript. Wśród stron z jQuery wersja 3.x ma 78,9%, a wersje 1.x i 2.x łącznie około 21%. Są to liczby zmienne w czasie, ale pokazują skalę: to ogromna liczba istniejących serwisów, które trzeba utrzymywać.

Zespół jQuery nie porzucił projektu. 17 stycznia 2026 roku, w 20. rocznicę powstania biblioteki, wyszła wersja 4.0.0, pierwsze wydanie główne od prawie dziesięciu lat. Najważniejsze zmiany:

Usunięcie funkcji widać od razu w kodzie. Sprawdziłem obie wersje:

// jQuery 3.7.1
console.log($.trim(" x ")); // "x"

// jQuery 4.0.0
try {
  $.trim(" x ");
} catch (e) {
  console.log(e.message); // "$.trim is not a function"
}

// wersja, która działa wszędzie, bez jQuery
console.log(" x ".trim()); // "x"

Jeśli aktualizujesz stary projekt z jQuery 3 do 4, autorzy polecają wtyczkę jQuery Migrate, która pokazuje w konsoli, jakie przestarzałe funkcje trzeba zmienić.

Z jakiego wzorca korzysta jQuery i dlaczego można łączyć metody po kropce?

jQuery opiera się na wzorcu łańcuchowania metod (method chaining), nazywanym też płynnym interfejsem (fluent interface). Idea jest prosta: każda metoda wykonuje swoje zadanie, a potem zwraca ten sam obiekt (w JavaScripcie this). Dzięki temu na wyniku możesz od razu wywołać kolejną metodę.

// jQuery: filtruj, dodaj klasę, ustaw kolor, wszystko w jednym łańcuchu
const wynik = $("li").filter(".item").addClass("ok").css("color", "red");

console.log(wynik.length); // 2 (obiekt jQuery z dwoma elementami)
console.log(wynik.constructor === $); // true (to nadal obiekt jQuery)

Dwie cechy ułatwiają życie. Po pierwsze, metody jQuery działają na wszystkich znalezionych elementach naraz, więc addClass dodaje klasę każdemu li, bez ręcznej pętli. Po drugie, łańcuch kończy się na metodach, które zwracają konkretną wartość, takich jak val() albo text() użyte do odczytu. Nie zwracają one obiektu jQuery, więc nie ma na czym kontynuować:

console.log(typeof $("input").val()); // "string"  (łańcuch tu się kończy)
console.log($("li").addClass("z") === $("li")); // false (dwa różne obiekty)

const lista = $("li");
console.log(lista.addClass("z") === lista); // true (zwrócony ten sam obiekt)

Ten sam wzorzec można zbudować samemu w kilku linijkach, co dobrze pokazuje, że nie ma w nim magii:

class Zapytanie {
  constructor(elementy) { this.elementy = [...elementy]; }

  dodajKlase(nazwa) {
    this.elementy.forEach((el) => el.classList.add(nazwa));
    return this; // to jedno słowo umożliwia łańcuch
  }

  tekst(nowy) {
    if (nowy === undefined) return this.elementy[0].textContent; // odczyt kończy łańcuch
    this.elementy.forEach((el) => { el.textContent = nowy; });
    return this;
  }
}

const $$ = (selektor) => new Zapytanie(document.querySelectorAll(selektor));

const w = $$("li").dodajKlase("a").dodajKlase("b").tekst("X");
console.log(w instanceof Zapytanie); // true
console.log(w.tekst()); // "X"

Kluczem jest return this. Dokładniej o tym, czym jest this i skąd się bierze w metodach, piszemy w artykule programowanie obiektowe w JavaScript. Podobny łańcuch spotkasz także w czystym JavaScripcie: metody tablic zwracają nowe tablice (filter().map()), a obietnice mają .then().catch(), co opisujemy w artykule o testowaniu kodu asynchronicznego.

Czy jQuery jest przestarzałe?

To zależy od tego, jak zdefiniujesz „przestarzałe”. Nie uważamy, że jQuery jest passé. Biblioteka jest rozwijana, wyszła jej nowa wersja główna, a ogromna liczba działających serwisów wciąż z niej korzysta. Jeśli pracujesz z istniejącym kodem, jQuery prawdopodobnie spotkasz, a zrozumienie go oszczędza godziny.

Warto jednak wiedzieć, dlaczego nie jest już tak powszechne. Jego główna zaleta, czyli wyrównanie różnic między przeglądarkami, straciła znaczenie, bo przeglądarki same się ujednoliciły. Dlatego nowy projekt zaczyna się dziś zwykle od czystego JavaScriptu albo frameworka. Do nauki najlepsza jest kolejność odwrotna do historycznej: najpierw dobrze poznaj czysty JavaScript, bo jQuery to tylko wygodna nakładka na niego.

Skąd błąd „$ is not defined” i jak go naprawić?

To najczęstszy błąd początkujących z jQuery. Przeglądarka nie zna znaku $, bo biblioteka nie została załadowana, zanim zadziałał twój kod.

try {
  $("li").hide(); // jQuery nie został jeszcze załadowany
} catch (e) {
  console.log(e.name + ": " + e.message); // "ReferenceError: $ is not defined"
}

Najczęstsze przyczyny i rozwiązania:

Jeśli w ogóle nie potrzebujesz jQuery, zastąp $ czystym JavaScriptem, jak w przykładach wyżej.

Co dalej?

Jeśli chcesz zrozumieć nowoczesny JavaScript, który zastąpił większość tego, co dawało jQuery, zacznij od nowości z ES2015, a historię języka i standardu znajdziesz w artykule historia JavaScriptu i czym jest ECMAScript. Jeśli masz formularze napisane w jQuery, zobacz też walidację formularza w JavaScript.

Jeśli chcesz poukładać JavaScript pod okiem mentora, zobacz kurs Zaawansowany JS, a jeśli dopiero zaczynasz, ścieżkę Frontend.