Średni · lekcja 8

jQuery — klasyczna biblioteka do manipulacji DOM i AJAX

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

Zacznij tutaj

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.

Wprowadzenie

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 jQueryDział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.

    CechajQueryAngular
    Typ narzędziabiblioteka do manipulacji DOMpełny framework komponentowy
    Struktura koduskrypty operujące BEZPOŚREDNIO na elementach HTMLkomponenty z własną logiką, szablonem i stylami
    Aktualizacja widokuRĘCZNA (musisz sam napisać kod zmieniający DOM)AUTOMATYCZNA (data binding, lekcja 10)
    Językzwykły JavaScriptTypeScript (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.

    Zobacz zależności

    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 => {...})
});

    Połącz z praktyką

    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.