Lekcja 1: Wprowadzenie do jQuery

jQuery to szybka, mała i bogata w funkcje biblioteka JavaScript. Ułatwia ona takie rzeczy jak przechodzenie i manipulowanie dokumentami HTML, obsługę zdarzeń, animacje i Ajax, dzięki łatwemu w użyciu API, które działa w wielu przeglądarkach. Dzięki połączeniu wszechstronności i rozszerzalności, jQuery zmieniło sposób, w jaki miliony ludzi piszą kod JavaScript.

Po co używać jQuery?

Uproszczenie JavaScript: jQuery znacznie upraszcza wiele skomplikowanych zadań JavaScript, pozwalając pisać mniej kodu, aby osiągnąć te same rezultaty.
Kompatybilność z przeglądarkami: jQuery zajmuje się wieloma problemami związanymi z kompatybilnością między różnymi przeglądarkami, co pozwala skupić się na logice aplikacji.
Manipulacja DOM: Wybieranie elementów HTML (selektory) i manipulowanie nimi (zmiana treści, stylów, atrybutów) jest znacznie łatwiejsze i bardziej intuicyjne.
Obsługa zdarzeń: jQuery oferuje spójny i prosty sposób na obsługę zdarzeń (kliknięcia, najechania myszką, zdarzenia klawiatury itp.).
Efekty i animacje: Biblioteka zawiera wbudowane metody do tworzenia prostych efektów wizualnych (np. pokazywanie/ukrywanie elementów, płynne przejścia) i animacji.
AJAX: jQuery upraszcza wykonywanie asynchronicznych żądań HTTP (AJAX) do serwera.
Rozszerzalność: Istnieje ogromna liczba wtyczek (plugins) jQuery, które dodają dodatkowe funkcjonalności.

Jak dodać jQuery do strony?

Istnieją dwa główne sposoby dodania jQuery do projektu:

1. Pobranie pliku jQuery

Możesz pobrać plik biblioteki jQuery z oficjalnej strony jquery.com. Dostępne są dwie wersje:

Production version: Jest to wersja zminimalizowana (minified) i skompresowana, przeznaczona do użytku na działającej stronie internetowej (szybsze ładowanie).
Development version: Jest to wersja nieskompresowana, czytelna, przeznaczona do celów deweloperskich i debugowania.

Po pobraniu pliku (np. jquery-3.x.x.min.js), umieść go w swoim projekcie i dołącz do strony HTML za pomocą tagu <script>, najlepiej przed zamknięciem tagu </body>:

<!DOCTYPE html>
<html>
<head>
    <title>Moja strona z jQuery</title>
</head>
<body>

    <!-- Treść strony -->

    <script src="path/to/jquery-3.x.x.min.js"></script> <!-- Ścieżka do pobranego pliku -->
    <script src="js/moj-skrypt.js"></script> <!-- Twój własny skrypt JS/jQuery -->
</body>
</html>

2. Użycie CDN (Content Delivery Network)

Zamiast hostować plik jQuery samodzielnie, możesz skorzystać z publicznych sieci CDN, takich jak Google CDN, Microsoft CDN czy CDNJS. Jest to często preferowane podejście, ponieważ:

Szybsze ładowanie: Użytkownik mógł już pobrać tę samą wersję jQuery z CDN podczas odwiedzania innej strony, więc plik może być już w pamięci podręcznej przeglądarki.
Mniejsze obciążenie serwera: Plik jQuery jest serwowany z serwerów CDN, a nie Twojego.

Aby użyć CDN, wystarczy dodać odpowiedni tag <script> z linkiem do pliku na serwerze CDN:

<!DOCTYPE html>
<html>
<head>
    <title>Moja strona z jQuery (CDN)</title>
</head>
<body>

    <!-- Treść strony -->

    <!-- jQuery z Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="js/moj-skrypt.js"></script> <!-- Twój własny skrypt JS/jQuery -->
</body>
</html>

Ważne: Twój własny skrypt, który używa jQuery (moj-skrypt.js), musi być dołączony po dołączeniu biblioteki jQuery.

Podstawowa składnia jQuery

Podstawą jQuery jest funkcja $() (lub jej alias jQuery()). Służy ona głównie do wybierania elementów HTML (za pomocą selektorów CSS) i następnie wykonywania na nich różnych operacji (metod jQuery).

Składnia wygląda zazwyczaj tak:

$(selektor).metoda(argumenty);

Na przykład, aby ukryć wszystkie paragrafy (<p>) na stronie:

$("p").hide();

Document Ready Event

Kod jQuery często manipuluje elementami HTML na stronie. Aby mieć pewność, że wszystkie elementy DOM zostały w pełni załadowane i są gotowe do manipulacji, kod jQuery powinien być umieszczony wewnątrz funkcji obsługi zdarzenia "document ready". Zapobiega to błędom wynikającym z prób operowania na elementach, które jeszcze nie istnieją w drzewie DOM.

Istnieją dwa popularne sposoby zapisu:

// Sposób 1 (dłuższy, bardziej czytelny dla początkujących)
$(document).ready(function() {
    // Tutaj umieść swój kod jQuery
    console.log("DOM jest gotowy!");
    // Przykład: Ukryj wszystkie paragrafy po załadowaniu DOM
    // $("p").hide(); 
});

// Sposób 2 (krótszy, powszechnie używany)
$(function() {
    // Tutaj umieść swój kod jQuery
    console.log("DOM jest gotowy! (krótszy zapis)");
    // Przykład: Zmień tekst wszystkich nagłówków h1
    // $("h1").text("Witaj w jQuery!");
});

Używanie jednej z tych form gwarantuje, że Twój kod jQuery zostanie wykonany dopiero po całkowitym zbudowaniu drzewa DOM przez przeglądarkę.

Zadanie praktyczne

Stwórz prosty plik HTML. Dodaj do niego bibliotekę jQuery za pomocą CDN. Wewnątrz zdarzenia "document ready" (używając dowolnego z dwóch sposobów zapisu), dodaj kod jQuery, który wyświetli w konsoli przeglądarki komunikat "jQuery działa!".

Pokaż rozwiązanie

<!DOCTYPE html>
<html>
<head>
    <title>Test jQuery</title>
</head>
<body>

    <h1>Testowanie jQuery</h1>

    <!-- Dołączenie jQuery z CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <!-- Twój skrypt jQuery -->
    <script>
        // Użycie krótszego zapisu $(function() { ... });
        $(function() {
            // Wyświetlenie komunikatu w konsoli
            console.log("jQuery działa!");
        });

        /* Alternatywnie, dłuższy zapis:
        $(document).ready(function() {
            console.log("jQuery działa! (dłuższy zapis)");
        });
        */
    </script>

</body>
</html>

Otwórz ten plik HTML w przeglądarce i sprawdź konsolę deweloperską (zazwyczaj klawisz F12). Powinien pojawić się tam komunikat "jQuery działa!".

Zadanie do samodzielnego wykonania

Zmodyfikuj kod z zadania praktycznego. Zamiast wyświetlać komunikat w konsoli, użyj jQuery, aby znaleźć element <h1> na stronie i zmienić jego tekst na "Udało się uruchomić jQuery!". Pamiętaj, aby kod zmieniający tekst umieścić wewnątrz funkcji obsługi zdarzenia "document ready".

FAQ - Wprowadzenie do jQuery

Czy jQuery jest nadal potrzebne w nowoczesnym JavaScript?

Nowoczesny JavaScript (ES6+) wprowadził wiele funkcji (np. querySelector, fetch, klasy, funkcje strzałkowe), które upraszczają zadania dawniej wymagające jQuery. Jednak jQuery nadal jest popularne, zwłaszcza w starszych projektach i ze względu na ogromną bazę wtyczek oraz prostotę składni dla wielu typowych zadań.

Jaka jest różnica między `$` a `jQuery`?

$ jest po prostu aliasem (skrótem) dla obiektu jQuery. Oba odnoszą się do tej samej funkcji. Używanie $ jest bardziej powszechne ze względu na zwięzłość. W rzadkich przypadkach, gdy inna biblioteka również używa znaku $, można użyć jQuery.noConflict(), aby zwolnić alias $ i używać pełnej nazwy jQuery.

Czy muszę umieszczać cały kod jQuery w `$(document).ready()`?

Kod, który operuje na elementach DOM (wybiera je, modyfikuje, dodaje obsługę zdarzeń), powinien być wewnątrz `$(document).ready()` lub jego krótszego odpowiednika `$(function() { ... })`, aby zapewnić, że DOM jest gotowy. Definicje funkcji lub zmiennych, które nie zależą bezpośrednio od DOM, mogą być umieszczone poza tą funkcją.

Którą wersję jQuery wybrać?

Generalnie zaleca się używanie najnowszej stabilnej wersji z gałęzi 3.x (np. 3.7.1), ponieważ zawiera ona najnowsze poprawki i ulepszenia. Wersje 1.x i 2.x są starsze i mogą być potrzebne tylko do wsparcia bardzo starych przeglądarek (jak IE 6-8), czego zazwyczaj unika się w nowych projektach.

Czy jQuery spowalnia moją stronę?

Dodanie każdej biblioteki, w tym jQuery, zwiększa rozmiar strony i czas jej ładowania. Jednak wersje produkcyjne jQuery są małe (około 30KB po kompresji gzip), a korzyści płynące z uproszczenia kodu i kompatybilności często przeważają nad niewielkim wpływem na wydajność, zwłaszcza przy użyciu CDN i pamięci podręcznej przeglądarki.