jQuery — klasyczna biblioteka do manipulacji DOM i AJAX

Po co się tego uczymy?

Podstawa programowa INF.04.7.2 wymienia jQuery obok Angulara, React.js i Node.js jako jeden z frameworków/bibliotek, które powinieneś znać — to pytanie może pojawić się na egzaminie pisemnym, nawet jeśli w praktyce budujesz aplikacje w Angularze. jQuery to znacznie STARSZA, prostsza biblioteka niż Angular — poznanie jej pomoże Ci też docenić, PO CO w ogóle powstały nowoczesne frameworki komponentowe.

Teoria

Czym jest jQuery? To biblioteka JavaScript (NIE framework komponentowy jak Angular) stworzona w 2006 roku, żeby uprościć trzy rzeczy, które w "gołym" JavaScript były wtedy bardzo niewygodne: wyszukiwanie i modyfikowanie elementów HTML (DOM), obsługę zdarzeń, oraz komunikację z serwerem (AJAX). Przez wiele lat jQuery było NAJPOPULARNIEJSZĄ biblioteką JavaScript na świecie — używane na miliardach stron — i nadal jest obecne w wielu starszych, istniejących systemach, więc warto rozpoznawać jego charakterystyczną składnię.

Selektor $ — serce jQuery. Funkcja $() (skrót od jQuery()) przyjmuje selektor CSS (dokładnie taki sam, jak w arkuszach stylów) i zwraca WSZYSTKIE pasujące elementy jako jeden obiekt, na którym można wywoływać metody:

Kod jQuery	Działanie
`$("#produkt").text("Nowa nazwa")`	znajduje element o id="produkt" i zmienia jego tekst
`$(".karta").hide()` / `.show()`	ukrywa/pokazuje WSZYSTKIE elementy z klasą "karta"
`$("button").on("click", function() {...})`	podpina obsługę zdarzenia kliknięcia pod WSZYSTKIE przyciski na stronie
`$("#formularz").val()`	odczytuje wartość pola formularza
`$(" Nowy` `").appendTo("#lista")`	tworzy nowy element i dodaje go na końcu listy

AJAX w jQuery — komunikacja z serwerem BEZ przeładowania strony (ten sam cel, który dziś realizuje HttpClient w Angularze): $.ajax({...}) albo prostszy skrót $.getJSON(adresUrl, function(dane) {...}) wysyłają żądanie HTTP i wykonują podaną funkcję, gdy odpowiedź nadejdzie — koncepcyjnie to DOKŁADNIE to, co robi .subscribe() na Observable z HttpClient w lekcji 12, tylko w znacznie starszym stylu (funkcje zwrotne/callbacki zamiast Observable/RxJS).

Dlaczego Angular (i React, Vue) "wyparły" jQuery z nowych projektów? jQuery świetnie nadaje się do PROSTYCH, punktowych modyfikacji strony (pokaż/ukryj element, podepnij zdarzenie), ale nie ma wbudowanego pojęcia "komponentu" ani automatycznej synchronizacji danych z widokiem (data binding) — w większej aplikacji z wieloma współpracującymi fragmentami interfejsu, ręczne "majstrowanie" przy DOM przez jQuery szybko staje się chaotyczne i trudne w utrzymaniu. Dokładnie ten problem (uporządkowanie dużej aplikacji w komponenty z automatycznym data bindingiem) rozwiązuje Angular, którego uczysz się w tym dziale jako głównego narzędzia.

Cecha	jQuery	Angular
Typ narzędzia	biblioteka do manipulacji DOM	pełny framework komponentowy
Struktura kodu	skrypty operujące BEZPOŚREDNIO na elementach HTML	komponenty z własną logiką, szablonem i stylami
Aktualizacja widoku	RĘCZNA (musisz sam napisać kod zmieniający DOM)	AUTOMATYCZNA (data binding, lekcja 10)
Język	zwykły JavaScript	TypeScript (typowany)
Typowe zastosowanie dziś	drobne usprawnienia na istniejących, starszych stronach (np. WordPress)	budowa NOWYCH, dużych aplikacji SPA od podstaw

Instalacja. jQuery można dodać do projektu na dwa sposoby: przez CDN (znacznik <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> w pliku HTML) albo przez npm install jquery (poznane w lekcji 5) w projektach korzystających z narzędzi budujących.

Schemat

jQuery (2006+) — biblioteka manipulacji DOM       Angular (dzisiejszy główny framework kursu)

$("#przycisk").on("click", function() {          @Component({ selector: "app-licznik", ... })
  let aktualny = parseInt($("#licznik").text());  export class LicznikComponent {
  $("#licznik").text(aktualny + 1);                 liczba = 0;
});                                                  zwieksz() { this.liczba++; }
                                                    }
RĘCZNA synchronizacja:                            <p>{{ liczba }}</p>          ← AUTOMATYCZNA
kod MUSI wiedzieć, GDZIE                          <button (click)="zwieksz()">
i JAK zaktualizować HTML                           Angular SAM wie, że zmiana `liczba`
za każdym razem                                    wymaga odświeżenia <p>

AJAX (jQuery):                                    HttpClient (Angular, lekcja 12):
$.getJSON("/api/produkty", function(dane) {       this.http.get("/api/produkty")
  // callback - wykona się, gdy dane przyjdą         .subscribe(dane => {...})
});

Przykład z życia

Wiele starszych stron internetowych (w tym część motywów i wtyczek WordPressa — czyli technologii, na której zbudowana jest sama strona bitedu.pl) nadal korzysta z jQuery do prostych usprawnień: rozwijanych menu, walidacji formularza kontaktowego, płynnego przewijania do sekcji strony. Nowe, duże aplikacje (jak projekty w tym dziale) buduje się dziś w Angularze/React/Vue, ale umiejętność rozpoznania i czytania kodu jQuery wciąż bywa przydatna przy pracy z istniejącymi, starszymi systemami.

index.html

<!-- index.html - podłączenie jQuery przez CDN -->
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Przykład jQuery</title>
</head>
<body>
  <input type="number" id="wzrost" placeholder="Wzrost (cm)">
  <input type="number" id="waga" placeholder="Waga (kg)">
  <button id="btnOblicz">Oblicz BMI</button>
  <p id="wynik"></p>

  <ul id="listaProduktow"></ul>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="skrypt.js"></script>
</body>
</html>

skrypt.js

// skrypt.js
$(document).ready(function () {

  // Obsługa kliknięcia przycisku (odpowiednik (click) z Angulara)
  $("#btnOblicz").on("click", function () {
    const wzrostCm = parseFloat($("#wzrost").val());
    const wagaKg = parseFloat($("#waga").val());

    if (wzrostCm >  && wagaKg > ) {
      const wzrostM = wzrostCm / 100;
      const bmi = wagaKg / (wzrostM * wzrostM);
      $("#wynik").text("Twoje BMI: " + bmi.toFixed(1));
    } else {
      $("#wynik").text("Podaj poprawne dane.");
    }
  });

  // AJAX - pobranie listy produktów z API (odpowiednik HttpClient.get())
  $.getJSON("https://localhost:7042/api/produkty", function (produkty) {
    produkty.forEach(function (p) {
      $("<li>").text(p.nazwa + " - " + p.cena + " zł").appendTo("#listaProduktow");
    });
  }).fail(function () {
    $("#listaProduktow").append("<li>Błąd pobierania produktów.</li>");
  });

});

Komentarz i wyjaśnienie kodu

$(document).ready(function () { ... }) to klasyczny wzorzec jQuery uruchamiający kod DOPIERO, gdy CAŁY dokument HTML jest w pełni wczytany — bez tego skrypt mógłby próbować znaleźć element #btnOblicz, zanim przeglądarka zdążyła go w ogóle utworzyć, i nic by się nie wydarzyło.

Zwróć uwagę, jak RĘCZNY jest ten kod w porównaniu do Angulara: $("#wynik").text(...) musi być wywołane JAWNIE, za każdym razem, gdy chcemy zaktualizować widok — w Angularze wystarczyłoby zmienić pole wynik w klasie komponentu, a interpolacja {{ wynik }} zaktualizowałaby się SAMA (lekcja 9). To najlepiej pokazuje, na czym polega "automatyczny data binding", o którym mowa w teorii.

$.getJSON(url, function(dane) {...}).fail(function() {...}) to starszy, "callbackowy" styl obsługi asynchroniczności — funkcja podana jako argument wykona się PO nadejściu odpowiedzi (albo .fail(), jeśli żądanie się nie powiedzie) — koncepcyjnie identyczne do .subscribe({ next: ..., error: ... }) z Angulara, tylko starszą składnią, bez Observable/RxJS.

Ćwiczenie samodzielne

Utwórz prosty plik HTML z podłączonym jQuery (przez CDN) i skrypt odczytujący wartość dowolnego pola tekstowego po kliknięciu przycisku, wypisujący ją w innym elemencie strony — bez używania żadnego frameworka, tylko czysty jQuery.

Zadania do pracy własnej

Zbuduj prosty przełącznik widoczności — przycisk, który na przemian ukrywa i pokazuje (.toggle()) dowolny fragment strony.
Przepisz kalkulator BMI z przykładu tak, żeby po obliczeniu wyniku dodawał kolorowanie tekstu (czerwony/zielony/pomarańczowy) w zależności od kategorii BMI, korzystając z metody .css("color", "...") jQuery.
Zbuduj prostą listę zadań (to-do) w czystym jQuery: pole tekstowe + przycisk "Dodaj" tworzący nowy element <li> na liście, z przyciskiem "Usuń" przy KAŻDEJ pozycji (podpowiedź: $(document).on("click", ".usun", function() { $(this).parent().remove(); }) — delegacja zdarzeń, bo przyciski "Usuń" są tworzone DYNAMICZNIE, już po uruchomieniu strony) — a następnie zastanów się i zapisz w kilku zdaniach, ile z tego kodu i w jaki sposób uprościłby Angular (komponenty, @for, @onclick z lekcji 9-10).

Typowe błędy

Mieszanie jQuery z Angularem w TYM SAMYM komponencie — Angular sam zarządza swoim fragmentem DOM i "nie wie" o zmianach wprowadzonych bezpośrednio przez jQuery; efektem bywają niespójności między tym, co faktycznie widać na ekranie, a tym, co Angular "myśli", że tam jest. Jeśli projekt korzysta z Angulara, manipulacje DOM powinny iść WYŁĄCZNIE przez mechanizmy Angulara, nie przez jQuery.

Zapominanie o $(document).ready() (albo nowszym odpowiedniku) — próba znalezienia elementu, który jeszcze nie istnieje w DOM, zwróci pusty wynik ($() zwróci "nic"), bez żadnego widocznego błędu, co bywa mylące przy debugowaniu.

Traktowanie jQuery jako "przestarzałego, więc niepotrzebnego" — to błąd na egzaminie pisemnym, gdzie jQuery jest WPROST wymienione w podstawie programowej; warto rozpoznawać jego składnię, nawet jeśli w praktyce budujesz w nowocześniejszym frameworku.

Nawiązanie do egzaminu zawodowego

To bezpośrednia realizacja INF.04.7.2, gdzie jQuery jest wymienione WPROST obok ASP.NET Core, Django, Angulara, React.js i Node.js jako biblioteka/framework, którą uczeń powinien rozpoznawać. Świadomie skontrastowana z Angularem (główny framework tego kursu), żeby pokazać, PO CO w ogóle powstały nowoczesne frameworki komponentowe — to dobre przygotowanie zarówno do pytań teoretycznych na egzaminie, jak i do pracy z istniejącym, starszym kodem w przyszłej pracy zawodowej. Kolejne trzy lekcje wracają do głównego nurtu — architektury komponentowej Angulara.